:root {
    --color-negro: #121C26;
	--color-blanco: #FFFFFF;
	--color-gris: #969491;
    --color-gris-oscuro: #222222;
	--color-azul:#88aad4;
    --color-amarillo:#FFC91C;
    --color-rojo: #d33d4b;
    --page-login-bg:var(--color-azul);
    --bs-tooltip-bg:var(--color-azul);
}


.trError{
    background-color: red!important;
    color:white!important;
}
.trError:hover td{
    background-color: red!important;
    color:yellow!important;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}

.form-check-label{
    margin-left:15px!important;
}

.sidebar {
    width: auto!important;
}

.ui-autocomplete {
    z-index: 1100!important;
}

.ui-timepicker-container{
    z-index: 1100!important;
}

.modal{
    overflow:auto!important;
}

#parteDivInformacion label{
    color:#88aad4;
    font-weight: bold;
}

.classBorde{
    border:1px solid #88aad4;
    border-radius: 30px;
    padding:10px
}

.capaFondoParte{
    background-color: var(--color-azul);
    color:var(--color-blanco);
    font-weight: bold;
    text-align: center;
}

.post-it {
  width: 200px; /* Ajusta el ancho */
  height: 200px; /* Ajusta la altura */
  background-color: #f7f7f7; /* Color de fondo */
  border: 1px solid #ccc; /* Borde */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
  padding: 10px; /* Espaciado interno */
  position: absolute; /* Posicionamiento absoluto */
  top: 50px; /* Ajusta la posición vertical */
  left: 50px; /* Ajusta la posición horizontal */
  transform: rotate(-2deg); /* Inclinación opcional */
  z-index: 1; /* Asegura que esté por encima de otros elementos */
}

.post-it .form-control {
  background-color: transparent; /* Hace transparente el textarea */
  box-shadow: none; /* Elimina la sombra del textarea */
  height: 100px; /* Asegura que el textarea ocupe todo el espacio */
  padding: 0; /* Elimina el padding del textarea */
  resize: none;
}

.post-it-- .form-floating > label {
  color: #333; /* Color del texto de la etiqueta */
  font-size: 14px; /* Tamaño de la fuente de la etiqueta */
}


.img-listado-albaran-proveedor{
    max-width: 50px;
}

#graficoTablaVehiculosTabla{
    font-size: 13px!important;
}

.capaGraficos{
    min-height: 300px!important;
}

.formularioFechasGrafico{
    font-size: 13px!important;
}

#graficoTablaCertificacionesPendientes{
    font-size: 13px!important;
}

#graficoTablaAlbaranesPendientes{
    font-size: 13px!important;
}

.subrayar-todo * {
    text-decoration: line-through;
}

.no-subrayar * {
    text-decoration: none;
}

.parpadeo {
    animation: efecto-parpadeo 2s infinite;
  }

  /* Cuando la línea está pedida, la atenuamos ligeramente */
    tr.linea-pedida {
        background-color: rgba(255, 193, 7, 0.04) !important; /* Un leve toque amarillo de fondo */
    }
    tr.linea-pedida td {
        color: #6c757d; /* Texto gris de Bootstrap */
    }

    /* Cuando ya está recibida por completo, se sombrea más */
    tr.linea-recibida {
        background-color: #f8f9fa !important; /* Fondo gris claro */
        opacity: 0.75;
    }
    tr.linea-recibida td {
        text-decoration: line-through; /* Opcional: Tacha el texto si quieres marcarlo como cerrado definitivo */
        color: #adb5bd;
    }

    /* 🎯 Sincronizar la altura y estilo visual de TomSelect con los inputs estándar */
.ts-wrapper.form-select, 
.ts-wrapper.form-control {
    height: calc(1.5em + 0.75rem + 2px) !important; /* Altura exacta form-control estándar de Bootstrap */
    padding: 0 !important; /* Eliminamos el padding del contenedor exterior */
    display: flex;
    align-items: center;
}

/* Ajustamos el control interno que contiene los textos e inputs de búsqueda */
.ts-wrapper .ts-control {
    height: 100% !important;
    width: 100%;
    padding: 0.375rem 0.75rem !important; /* El padding estándar de un input de Bootstrap */
    display: flex;
    align-items: center;
    background: transparent !important;
    border: none !important; /* Dejamos que el borde lo pinte el contenedor padre */
    box-shadow: none !important;
}

/* Evita que los elementos seleccionados (tags) o el buscador interno rompan el centrado vertical */
.ts-wrapper .ts-control > input {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Ajuste para cuando el combo ya tiene un elemento seleccionado */
.ts-wrapper.single .ts-control .item {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}
  /* Definición de la animación */
  @keyframes efecto-parpadeo {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }


  /* ==========================================================================
   BLINDAJE EXCLUSIVO PARA SELECT NATIVO DE BOOTSTRAP 5
   ========================================================================== */

select.select-articulo-ajax {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    background-color: #ffffff !important; /* Fuerza el fondo blanco */
    color: #333333 !important;
    
    /* Forzado de líneas múltiples */
    white-space: normal !important; 
    word-break: break-word !important;
    
    /* Control de tipografía y visualización */
    line-height: 1.4 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-right: 35px !important; /* Deja espacio para la flecha nativa */
    
    /* Restablece la apariencia para que el navegador permita modificar la estructura */
    -webkit-appearance: menulist-button !important; /* Truco para Safari/Chrome */
    appearance: menulist-button !important;
}

/* Corrige el color del texto inicial (Placeholder simulado de la primera opción) */
select.select-articulo-ajax option:first-child {
    color: #6c757d !important;
    white-space: nowrap !important; /* El placeholder inicial se mantiene limpio */
}

/* Evita descuadres en cascada en PC */
@media (min-width: 768px) {
    .linea-producto-item .row {
        align-items: flex-end !important;
    }
}

/* ==========================================================================
   DESCONEXIÓN Y LIMPIEZA ABSOLUTA DE PROPIEDADES HEREDADAS EN TOMSELECT
   ========================================================================== */

/* 1. Ocultamos el select de Symfony para que no interfiera en absoluto */
select.select-articulo-ajax.tomselected,
select[id^="select-ajax-"].tomselected {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* 2. El Wrapper pasa a ser un bloque rígido en el flujo HTML */
.ts-wrapper.single.select-articulo-ajax,
.ts-wrapper.single {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important; /* No permitimos que herede alturas fijas */
}

/* 3. Limpieza radical del contenedor interno (Anula la herencia de .form-select/.form-control) */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper .ts-control {
    display: block !important;      /* Cambiado de flex a block de forma estricta */
    position: relative !important;
    width: 100% !important;
    
    /* ANULACIÓN DE ALTURAS DE BOOTSTRAP */
    height: auto !important;         
    min-height: 42px !important;    /* Altura mínima base un poco más alta para albergar texto holgado */
    max-height: none !important;
    
    /* DISEÑO Y SÓLIDO */
    background-color: #ffffff !important; /* Fondo blanco 100% opaco */
    background-image: none !important;    /* Elimina la flecha de Bootstrap heredada */
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 8px 35px 8px 12px !important;
    box-shadow: none !important;
    overflow: visible !important;   /* Obliga a que la tarjeta se estire si hay mucho texto */
}

/* 4. Estilos del bloque de texto inyectado por tu JS */
.ts-wrapper.single .ts-control .item,
.ts-wrapper.single .ts-control .item-seleccionado-multilinea {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;  /* Rompe en varias líneas */
    word-break: break-word !important; /* Rompe palabras técnicas largas si es necesario */
    line-height: 1.4 !important;     /* Espaciado de lectura limpio */
    margin: 0 !important;
    padding: 0 !important;
    color: #212529 !important;       /* Color de texto oscuro real */
}

/* Evita que los textos secundarios pequeños queden amontonados */
.item-seleccionado-multilinea small {
    display: block !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
}

/* 5. El input de búsqueda (cuando abres el desplegable para escribir) */
.ts-wrapper.single .ts-control input {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 22px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 6. Forzar que la flecha nativa de TomSelect se quede fija arriba a la derecha */
.ts-wrapper.single .ts-control::after {
    position: absolute !important;
    top: 14px !important; /* Anclado en la parte superior para que no se mueva si el texto crece */
    right: 12px !important;
    transform: none !important;
    margin-top: 0 !important;
    display: block !important;
}

/* 7. Separar el grupo de botones del select en el HTML móvil para evitar colisiones */
.linea-producto-item .form-label, 
.card .row {
    position: relative !important;
}

/* ==========================================================================
   CORRECCIÓN PARA EL PLACEHOLDER CORTADO EN VACÍO
   ========================================================================== */

/* Cuando la caja está vacía (no hay ningún item seleccionado), forzamos que el input ocupe todo el ancho */
.ts-wrapper.single .ts-control input,
.ts-wrapper.single:not(.has-items) .ts-control input {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Asegura que el placeholder tenga espacio, no se corte con puntos suspensivos y use tipografía fluida */
.ts-wrapper.single .ts-control input::placeholder {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
}

/* Asegura alineación en PC */
@media (min-width: 768px) {
    .linea-producto-item .row {
        align-items: flex-end !important;
    }
}