/* ==========================================================================
   TOKENS — el vocabulario visual del sistema
   ==========================================================================
   Antes de esto había 228 colores distintos hardcodeados entre los templates y
   este archivo, y 112 de ellos aparecían UNA sola vez. No eran decisiones de
   diseño: eran accidentes de copiar y pegar. Detrás de esos 228 valores había
   unos 15 roles reales.

   La regla ahora: en un template NO va un color literal. Va el token del rol
   que cumple. Si un color nuevo no encaja en ningún rol, el que falta es el
   token, no el color — agregalo acá y usalo desde todos lados.

   Los valores son los que YA dominaban la app, así que casi nada cambia de
   aspecto. Lo que cambia es que ahora hay un solo lugar donde tocarlos.
   ========================================================================== */

:root {
    /* --- Superficies ---------------------------------------------------- */
    --sup-base: #f4f6fa;   /* fondo de la página */
    --sup-card: #ffffff;   /* tarjetas, tablas, modales */
    --sup-sutil: #f8f9fa;  /* filas alternas, barras de filtros */
    --sup-hover: #f1f3f5;  /* hover de fila y de ítem de lista */

    /* --- Bordes --------------------------------------------------------- */
    --borde: #dee2e6;         /* el borde de todos los días */
    --borde-sutil: #e9ecef;   /* separadores internos */
    --borde-fuerte: #ced4da;  /* inputs, foco, cabeceras de tabla */

    /* --- Texto ---------------------------------------------------------- */
    --texto-titulo: #2c3e50;  /* h1-h6 y datos destacados */
    --texto: #495057;         /* cuerpo */
    --texto-suave: #6c757d;   /* etiquetas, ayudas */
    --texto-tenue: #adb5bd;   /* placeholders, deshabilitado, ceros */
    --texto-invertido: #ffffff;

    /* --- Marca ---------------------------------------------------------- */
    --marca: #4361ee;
    --marca-oscuro: #3a56d4;
    --marca-suave: #eef1fe;
    --navbar: #003a61;

    /* --- Semánticos ------------------------------------------------------
       Un solo verde, un solo rojo, un solo ámbar. Antes convivían #28a745,
       #27ae60 y #198754 para "esto salió bien", que es la clase de detalle
       que hace que dos pantallas se sientan de sistemas distintos. */
    --exito: #198754;
    --exito-fondo: #d1e7dd;
    --peligro: #dc3545;
    --peligro-fondo: #fbe6e5;
    --alerta: #d97706;
    --alerta-fondo: #fff3cd;
    --info: #0d6efd;
    --info-fondo: #e7f1ff;

    /* --- Acento por módulo -----------------------------------------------
       Cada pantalla pisa --acento con una línea en su propio <style>. Todo lo
       demás (la barrita del título, el hover de las tabs, el foco) cuelga de
       este token en vez de repetir el color en diez reglas. */
    --acento: var(--marca);

    /* --- Forma y profundidad --------------------------------------------- */
    --radio-sm: 6px;
    --radio: 10px;
    --radio-lg: 16px;
    --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sombra: 0 2px 8px rgba(15, 23, 42, 0.06);
    --sombra-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --sombra-lg: 0 8px 32px rgba(15, 23, 42, 0.10);

    /* --- Ritmo ------------------------------------------------------------
       Escala de 4px. Los márgenes "13px" y "17px" que aparecían sueltos no
       tenían razón de ser, solo hacían que nada alineara con nada. */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;

    --transicion: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   FIXIO – Design System v2.0 (Premium Overhaul)
   ══════════════════════════════════════════════════════════════ */

/* --- COMPATIBILIDAD: nombres viejos ------------------------------------------
   Este bloque era el "Design System v2.0" y convivía con el :root de base.html
   y con 228 colores sueltos en los templates. Tres sistemas para una sola app.

   No se borra porque hay ~35 usos vivos de estos nombres. Se convierten en
   ALIAS de los tokens de arriba: el código viejo sigue andando y hay un único
   lugar donde cambia un color. A medida que se toque un template, migrar sus
   var(--nombre-viejo) al token nuevo y borrar la línea de acá.

   Ojo: --danger-color era var(--peligro) y --warning-color #ffd166. Ahora apuntan al
   rojo y al ámbar del sistema, así que esos avisos cambian de tono a propósito:
   antes había tres rojos distintos según la pantalla.
   --------------------------------------------------------------------------- */
:root {
    --primary-color: var(--marca);
    --primary-color-dark: var(--marca-oscuro);
    --primary-color-light: var(--marca-suave);
    --secondary-color: var(--exito);
    --secondary-dark: var(--exito);
    --danger-color: var(--peligro);
    --warning-color: var(--alerta);
    --info-color: var(--info);
    --background-color: var(--sup-base);
    --card-background: var(--sup-card);
    --text-color: var(--texto);
    --text-muted: var(--texto-suave);
    --heading-color: var(--texto-titulo);
    --border-color: var(--borde);
    --border-light: var(--borde-sutil);
    --shadow-xs: var(--sombra-sm);
    --shadow-sm: var(--sombra);
    --shadow-md: var(--sombra-md);
    --shadow-lg: var(--sombra-lg);
    --shadow-glow: 0 0 20px rgba(67, 97, 238, 0.15);
    --radius-sm: var(--radio-sm);
    --radius-md: var(--radio);
    --radius-lg: var(--radio-lg);
    --radius-xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-normal: var(--transicion);
    --transition-smooth: var(--transicion);
}

/* --- RESET Y BASE --- */
* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { 
    color: var(--heading-color); 
    letter-spacing: -0.02em;
}
h1 { font-size: 1.6em; font-weight: 700; }
h2 { 
    font-size: 1.35em; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 12px; 
    margin-bottom: 24px;
}

.celda-truncada {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* --- ENCABEZADO --- */
.main-header {
    background: linear-gradient(135deg, var(--card-background) 0%, var(--marca-suave) 100%);
    padding: 1em 2em;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
    border-bottom: 2px solid var(--primary-color-light);
}
.header-logo-nav { display: flex; align-items: center; gap: 2em; }
.header-logo-nav img { height: 45px; }
.header-logo-nav h1 { margin: 0; font-weight: 700; }
.header-logo-nav .nav-links { display: flex; gap: 10px; }
.header-actions { display: flex; align-items: center; gap: 1em; }

.container {
    max-width: 1600px;
    margin: 0 auto 2em auto;
    background: var(--card-background);
    padding: 2em;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

/* --- BOTONES GENERALES --- */
.boton-navegacion {
    text-decoration: none; 
    font-weight: 600; 
    font-size: 0.9em; 
    padding: 10px 18px;
    border-radius: var(--radius-md); 
    color: white; 
    border: none;
    transition: all var(--transition-smooth);
    letter-spacing: 0.01em;
}
.boton-navegacion:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-md);
}
.nav-envios { background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark)); }
.nav-pacientes { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); }

.boton-regresar, .boton-logout {
    text-decoration: none; font-weight: 500; font-size: 0.85em;
    padding: 8px 14px; border-radius: var(--radius-sm); 
    transition: all var(--transition-normal);
}
.boton-regresar { 
    color: var(--primary-color); 
    background-color: transparent; 
    border: 1px solid var(--border-color); 
}
.boton-regresar:hover { 
    background-color: var(--primary-color-light); 
    border-color: var(--primary-color);
}
.boton-logout { 
    color: white; 
    background: linear-gradient(135deg, #475569, var(--texto)); 
    border-radius: var(--radius-md);
}
.boton-logout:hover { 
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* --- FILTROS Y BUSCADOR --- */
.filtros { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}
.filtros span { font-weight: 700; color: var(--heading-color); }
.filtros .filter-group { 
    display: flex; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    overflow: hidden;
    background: var(--card-background);
    box-shadow: var(--shadow-xs);
}
.filtros a {
    text-decoration: none; 
    padding: 8px 16px; 
    color: var(--text-color); 
    font-size: 0.88em;
    font-weight: 500;
    border-left: 1px solid var(--border-color); 
    background-color: var(--card-background); 
    transition: all var(--transition-fast);
}
.filtros .filter-group a:first-child { border-left: none; }
.filtros a:hover { 
    background-color: var(--primary-color-light); 
    color: var(--primary-color);
}
.filtros a.active { 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark)); 
    color: white; 
    font-weight: 600; 
}
.filtros-fecha a.active { 
    background: linear-gradient(135deg, #f59e0b, var(--alerta)); 
}

.search-container { margin-bottom: 20px; }
.search-container form { display: flex; gap: 10px; }
.search-container input { flex-grow: 1; }
.search-container button {
    border: none; 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark)); 
    color: white;
    padding: 0 20px; 
    border-radius: var(--radius-md); 
    font-weight: 600; 
    cursor: pointer;
    transition: all var(--transition-normal);
}
.search-container button:hover { 
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

/* --- TABLAS --- */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
    font-size: 0.85em; 
}
th, td { 
    padding: 12px 10px; 
    border-bottom: 1px solid var(--border-color); 
    text-align: left; 
    vertical-align: middle; 
}
th {
    background: linear-gradient(180deg, var(--sup-hover) 0%, var(--sup-hover) 100%);
    color: var(--texto-suave); 
    font-weight: 700;
    text-transform: uppercase; 
    font-size: 0.72em; 
    letter-spacing: 0.8px;
    border-top: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
}
tr:last-child td { border-bottom: none; }
tr { transition: background-color var(--transition-fast); }
tr:hover { background-color: var(--sup-hover); }
td.columna-acciones { width: 120px; }

/* --- BOTONES DE TABLA --- */
.boton-tabla {
    width: 100%; 
    text-decoration: none; 
    display: inline-block; 
    text-align: center;
    padding: 7px 12px; 
    border: none; 
    border-radius: var(--radius-sm); 
    cursor: pointer;
    font-size: 0.8em; 
    font-weight: 600; 
    color: white; 
    transition: all var(--transition-normal);
    letter-spacing: 0.02em;
}
.boton-tabla:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-sm);
}
.boton-tabla.editar { background: linear-gradient(135deg, #f59e0b, var(--alerta)); }
.boton-tabla.enviar, .boton-tabla.validar { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); }
.boton-tabla.inactivar { background: linear-gradient(135deg, var(--danger-color), #dc2f4f); }
.boton-tabla.reactivar { background: linear-gradient(135deg, #6b7280, #4b5563); }
.boton-tabla.revertir { background: linear-gradient(135deg, var(--warning-color), #f0c040); color: var(--texto-titulo); }

/* --- FORMULARIOS --- */
.formulario { max-width: 640px; margin-top: 24px; }
.campo-form { margin-bottom: 1.4em; }
.campo-form label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: var(--heading-color);
    font-size: 0.9em;
}
.campo-form input, .campo-form select, .campo-form textarea {
    width: 100%; 
    padding: 11px 14px; 
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md); 
    font-family: inherit; 
    font-size: 0.95em;
    transition: all var(--transition-normal);
    background-color: var(--marca-suave);
}
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus {
    outline: none; 
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
    background-color: #fff;
}

/* --- GRILLA DE PRODUCTOS Y CANTIDADES EN TABLAS ---
   Un paciente o un envío pueden llevar varios productos. Encadenarlos con "·" en
   un solo renglón se vuelve ilegible apenas hay más de uno.

   En cambio cada producto lleva su propia fila DENTRO de la celda, y la columna
   de cantidad dibuja las mismas filas en el mismo orden: así cada renglón de una
   casa con el de la otra. Es el patrón que ya usaba el panel de Admisión.

   Las dos columnas van SIEMPRE de a pares y recorriendo la misma lista; si una
   se filtra u ordena distinto que la otra, los renglones dejan de corresponderse.

   POR QUÉ LA ALTURA ES FIJA Y NO `min-height`:
   son dos <td> independientes, cada uno con su propio flujo. Nada obliga a que
   la fila 1 de uno mida lo mismo que la fila 1 del otro. Con `min-height`, un
   nombre de producto que ocupa dos renglones estira SU fila pero no la del
   número, y las dos columnas se desfasan — que es justo lo que pasaba.

   Con `height` fija e idéntica en ambas, la correspondencia deja de depender del
   contenido. El nombre largo se recorta a dos líneas (`line-clamp`) y el nombre
   completo queda en el `title`.

   No se puede resolver con un solo <td colspan="2">: `updateColumnVisibility()`
   ubica las celdas por `nth-child`, y un colspan correría el índice de todas las
   columnas siguientes. */
td.celda-grilla {
    padding: 0 !important;
    vertical-align: top;
}

.mini-grilla {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mini-grilla > div {
    border-bottom: 1px solid var(--border-color);
    padding: 4px 8px;
    font-size: 0.72rem;
    line-height: 1.25;
    height: 38px;          /* FIJA: ver comentario de arriba */
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* El último no lleva línea: la cierra el borde del propio <td>. */
.mini-grilla > div:last-child { border-bottom: none; }

.celda-grilla .celda-producto {
    text-align: left;
    color: var(--heading-color);
}

/* El recorte va en el <span> interior y no en el div: así el div sigue siendo
   flex y centra verticalmente el texto dentro de los 38px, igual que la celda
   de cantidad. Hasta dos renglones; lo que no entra queda en el `title`. */
.celda-grilla .celda-producto > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.celda-grilla .celda-cantidad {
    justify-content: center;
    font-weight: 700;
    color: var(--text-color);
}

/* Salió MENOS (o más) de lo pautado. Sin marca visual por decisión de producto:
   el número que se ve es el real y alcanza. Lo único que queda es el cursor de
   ayuda, que avisa al pasar por encima que el pautado está en el tooltip. */
.celda-grilla .celda-cantidad.cantidad-parcial {
    cursor: help;
}

.celda-grilla .celda-vacia {
    display: block;
    padding: 8px;
    color: var(--text-muted);
    font-style: italic;
}

/* --- FORMULARIOS EN FICHA (alta y edición de pacientes y envíos) ---
   `.formulario` es una sola columna de 640px: sirve para un formulario de tres
   campos, pero el de paciente tiene veinte y queda una tira interminable donde
   no se distingue qué cosa va con qué.

   Esto lo reemplaza por secciones con título y una grilla que se acomoda al
   ancho. Convive con `.formulario`: las pantallas viejas no se tocan. */

.form-ficha {
    max-width: 1100px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.form-ficha .form-seccion {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-xs);
}

.form-ficha .form-seccion > h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-ficha .form-seccion > .seccion-ayuda {
    margin: 0 0 18px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

/* auto-fit: dos columnas cuando entra, una sola en pantallas angostas, sin
   media queries a mano. */
.form-ficha .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 4px 20px;
}

.form-ficha .campo-form { margin-bottom: 1.1em; }

/* Campos que necesitan todo el ancho: observaciones, domicilio, y sobre todo el
   editor de líneas de producto. */
.form-ficha .ancho-completo { grid-column: 1 / -1; }

.form-ficha .campo-form .ayuda-campo {
    margin-top: 5px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.form-ficha .campo-form textarea { min-height: 80px; resize: vertical; }

/* Destaca un campo sin recurrir a colores de fondo chillones. */
.form-ficha .campo-destacado {
    background: var(--primary-color-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

/* Barra de acciones al final del formulario. Antes era `position: sticky;
   bottom: 0` ("siempre visible"), pero eso la deja pegada al fondo del
   viewport durante TODO el scroll de un formulario largo — no solo al
   llegar al final — así que termina tapando parcialmente cualquier campo
   que caiga justo en esa franja mientras se scrollea (Select2 incluido: al
   ser un elemento posicionado más tarde en el DOM, pinta encima). Vuelve a
   ser una fila normal, al costo de tener que scrollear hasta el final para
   guardar. */
.form-acciones {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    box-shadow: var(--shadow-md);
    margin-top: 18px;
}

.form-acciones .boton-accion { width: auto; min-width: 190px; }
.form-acciones .espaciador { flex: 1; }

.form-acciones .nota-acciones {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- BOTONES DE ACCIÓN PRINCIPALES --- */
.app-actions { margin-bottom: 25px; display: flex; flex-wrap: wrap; gap: 10px; }
.boton-accion-secundario {
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    color: white;
    text-decoration: none; 
    padding: 11px 18px; 
    border-radius: var(--radius-md); 
    font-weight: 600;
    transition: all var(--transition-smooth);
    letter-spacing: 0.01em;
}
.boton-accion-secundario:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-md);
}
.crear-envio, .crear-combo, .crear-paciente { 
    background: linear-gradient(135deg, #6b7280, #4b5563); 
}
.exportar-pacientes, .exportar-envios { 
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); 
}

.boton-accion {
    width: 100%; 
    padding: 14px; 
    border: none; 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white; 
    font-size: 1.05em; 
    font-weight: 700; 
    border-radius: var(--radius-md);
    cursor: pointer; 
    transition: all var(--transition-smooth);
    letter-spacing: 0.02em;
}
.boton-accion:hover { 
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.boton-accion.cancelar { background: var(--borde); color: #475569; }
.boton-accion.cancelar:hover { background: var(--borde-fuerte); }

/* --- OTROS COMPONENTES --- */
.info-paciente-validacion {
    background: linear-gradient(135deg, var(--sup-hover), #f0f4ff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); 
    padding: 1.5em;
}
.info-paciente-validacion h3 { margin-top: 0; }
.modal-info-grid, .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 0.9em; }
.modal-info-grid .full-width, .info-grid .full-width { grid-column: 1 / -1; }
.paciente-link { 
    cursor: pointer; 
    text-decoration: none; 
    color: var(--primary-color); 
    font-weight: 700; 
    transition: color var(--transition-fast);
}
.paciente-link:hover { color: var(--primary-color-dark); }

/* Estados y Alertas */
.estado-activo { 
    padding: 4px 10px; 
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)); 
    color: white; 
    border-radius: 20px; 
    font-size: 0.78em; 
    font-weight: 600;
    letter-spacing: 0.03em;
}
.estado-inactivo { 
    padding: 4px 10px; 
    background: linear-gradient(135deg, var(--texto-tenue), var(--texto-suave)); 
    color: white; 
    border-radius: 20px; 
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.discrepancia { background-color: #fef3c7 !important; font-weight: bold; color: #92400e; }
.alerta-atrasado { background-color: #fce4ec !important; color: #b71c1c; font-weight: bold; }
.envio-parcial-highlight { background-color: #fff7ed !important; }

/* --- Barra de Controles del Panel --- */
.panel-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--sup-hover), #f0f4ff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 25px;
    box-shadow: var(--shadow-xs);
}
.panel-controles .filtros,
.panel-controles .search-container {
    margin-bottom: 0;
}
.panel-controles .search-container {
    flex-grow: 1;
    max-width: 400px;
}
.panel-controles .search-container form {
     width: 100%;
}

/* --- SEMÁFORO --- */
.semaforo-rojo {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

.semaforo-naranja {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: var(--alerta);
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

.semaforo-amarillo {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    color: #a16207;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

.semaforo-verde {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}

/* --- ENVÍO URGENTE --- */
.envio-urgente-highlight {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    font-weight: bold !important;
}

/* ══════════════════════════════════════════════════════════════
   ANIMACIONES GLOBALES
   ══════════════════════════════════════════════════════════════ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--sup-hover);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--texto-tenue);
}

/* Form select styling improvement */
select.form-select,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Badge overrides for premium look */
.badge {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Alert improvements */
.alert {
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: linear-gradient(135deg, #dcfce7, #d1fae5);
    color: #166534;
}

.alert-danger {
    background: linear-gradient(135deg, #fce4ec, #fee2e2);
    color: #991b1b;
}

.alert-warning {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    color: #92400e;
}

.alert-info {
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    color: #1e40af;
}

/* --- FILTROS DE PANEL -------------------------------------------------------
   Dimensionado compacto de los inputs de filtro. Vivía duplicado y ya
   divergido en panel_logistica.html y stock_nutricion.html; acá está una sola
   vez para que todos los paneles se vean igual. */
.filter-input {
    font-size: 0.8rem;
    padding: 4px 8px;
    height: 31px;
}

/* Icono pegado al input dentro de un .input-group: se le saca el borde interno
   a cada lado para que icono y campo se lean como una sola pieza. */
.filter-icon {
    font-size: 0.8rem;
    height: 31px;
    padding: 4px 10px;
    background-color: #fff;
    border-right: 0;
    color: var(--texto-tenue);
}

.input-group .filter-input {
    border-left: 0;
}

.input-group:focus-within .filter-icon {
    border-color: #86b7fe;
}


/* ==========================================================================
   COMPONENTES COMPARTIDOS
   ==========================================================================
   Todo lo de acá abajo estaba copiado y pegado en varios templates, y ya había
   divergido: la cabecera de página tenía tres definiciones distintas de
   .page-title, y .filter-input dos. Copiar estilos es cómo se desincroniza un
   diseño sin que nadie lo decida.

   Cada regla usa --acento, así que la misma clase se pinta del color de la
   pantalla en la que está.
   ========================================================================== */

/* --- Cabecera de página ---------------------------------------------------- */
.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--e3);
    flex-wrap: wrap;
    margin-bottom: var(--e4);
}

.page-title {
    font-weight: 700;
    color: var(--texto-titulo);
    margin: 0;
    position: relative;
}

/* La barrita de color debajo del título: es lo que identifica el módulo. */
.page-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--acento);
    margin-top: var(--e1);
    border-radius: 2px;
}

/* --- Tablas ---------------------------------------------------------------- */
.tabla-sistema thead th {
    background-color: var(--sup-hover);
    color: var(--texto);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--borde-fuerte);
    white-space: nowrap;
}

.tabla-sistema tbody td {
    font-size: 0.88rem;
    vertical-align: middle;
    color: var(--texto);
}

.tabla-sistema tbody tr:hover {
    background-color: var(--sup-hover);
}

/* --- Estados numéricos ----------------------------------------------------- */
.dato-negativo { color: var(--peligro); font-weight: 700; }
.dato-cero     { color: var(--texto-tenue); }
.dato-fuerte   { color: var(--texto-titulo); font-weight: 700; }

/* --- Barra de filtros ------------------------------------------------------ */
.barra-filtros {
    background-color: var(--sup-sutil);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio);
    padding: var(--e2) var(--e3);
    margin-bottom: var(--e3);
}