/* ==========================================================================
   Sistema de Gestión de Laboratorios · Facultad de la Salud Humana · UNL
   Tokens del sistema visual institucional.
   ==========================================================================

   Este archivo es la **única fuente de verdad** de color, tipografía, espacio,
   radio, sombra y densidad. Ninguna otra hoja declara un hexadecimal
   institucional ni un valor de espaciado suelto: todas consumen estas
   variables. Es lo que permite homologar la aplicación entera sin escribir
   reglas específicas por pantalla.

   Identidad: los colores proceden del Manual de Identidad Corporativa de la
   Universidad Nacional de Loja —rojo #BF0811, verde #418E3A, negro #211915,
   azul institucional #004C7B y verde complementario #648F39— y no de una
   interpretación del logotipo. La traducción completa del manual a componentes
   digitales está en `docs/unl-visual-guidelines-dashboard.md`.

   Homologación: la escala, la densidad y la estructura siguen el lenguaje del
   sistema de Bienestar Universitario (`/var/www/ubu-laravel`), analizado en
   `docs/visual-parity-wellbeing-laboratories.md`. Se toma de allí la *gramática*
   —cabecera blanca con filete rojo–azul, barra lateral azul petróleo con activo
   rojo, tarjetas con filete superior dividido, escala compacta— y se expresa con
   la paleta corporativa propia de la UNL, no con los tonos de aquel sistema.

   Reparto cromático (no se pinta la aplicación entera de un solo color):
     · fondos generales  → blanco y gris neutro muy claro;
     · estructura        → azul institucional;
     · marca y acentos   → rojo corporativo, en filetes finos y estados activos;
     · estado positivo   → verde corporativo;
     · texto             → negro corporativo y grises derivados.

   Todos los pares de color usados para texto se verificaron contra WCAG 2.1 AA;
   el ratio va anotado junto a cada variable que se usa como color de texto.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. Colores corporativos UNL (fuente única de verdad)
       ---------------------------------------------------------------------- */
    --unl-red: #BF0811;             /* Pantone 485 C — 6.45:1 sobre blanco */
    --unl-green: #418E3A;           /* Pantone 355 C — 4.07:1, no apto texto normal */
    --unl-black: #211915;           /* Pantone Black C — 16.4:1 sobre blanco */
    --unl-blue: #004C7B;            /* azul institucional — 9.05:1 sobre blanco */
    --unl-green-secondary: #648F39; /* verde complementario */

    /* Variaciones tonales admitidas por el manual (80/60/40/15 %). Se generan
       sobre blanco, que es el fondo de la aplicación, para conservar el matiz. */
    --unl-red-80:  #CC3A32;
    --unl-red-60:  #D96C64;
    --unl-red-40:  #E69D97;
    --unl-red-15:  #F7E1E0;
    --unl-green-80: #67A55C;
    --unl-green-60: #8DBB84;
    --unl-green-40: #B3D1AD;
    --unl-green-15: #E7F1E5;
    --unl-blue-80:  #337095;
    --unl-blue-60:  #6694B0;
    --unl-blue-40:  #99B7CB;
    --unl-blue-15:  #E5EDF2;

    /* Derivados oscuros para estructura y texto. No son colores nuevos: son el
       azul y el verde institucionales oscurecidos hasta alcanzar AA donde el
       original no llega (ver el documento de directrices, §4.3).
       `--unl-blue-deep` es el azul petróleo de la barra lateral: el mismo papel
       que el azul profundo de Bienestar, resuelto dentro de la paleta UNL. */
    --unl-blue-dark: #003A5D;       /* barra lateral */
    --unl-blue-darker: #002A44;     /* fondo del pie de la barra lateral */
    --unl-blue-deep: #01324E;       /* cierre inferior del degradado lateral */
    --unl-green-text: #2F6A29;      /* 6.53:1 — verde legible como texto */
    --unl-red-dark: #96060D;        /* rojo pulsado / hover */
    --unl-green-dark: #24521F;      /* verde pulsado / hover, par del anterior */

    /* ----------------------------------------------------------------------
       2. Tipografía
       ----------------------------------------------------------------------
       Montserrat se **sirve desde el propio servidor** (ver `fonts.css`); la
       pila web-safe queda como respaldo mientras llega el archivo. */
    --font-sans: "Montserrat", Arial, Helvetica, sans-serif;

    /* Escala calibrada a la densidad de referencia: cuerpo 15 px (0.9375rem),
       apoyo 13 px, rótulos 11 px. Se compensa el tamaño pequeño con peso y
       tracking, que es lo que mantiene legible un texto reducido. */
    --font-size-xs: .6875rem;   /* 11 px — rótulos, metadatos */
    --font-size-sm: .8125rem;   /* 13 px — apoyo, tablas */
    --font-size-base: .9375rem; /* 15 px — cuerpo */
    --font-size-lg: 1.0625rem;  /* 17 px */
    --font-size-xl: 1.25rem;    /* 20 px */
    --font-size-2xl: 1.5rem;    /* 24 px — título de página */

    /* Pesos con nombre: se usan por intención, no por número suelto. */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ----------------------------------------------------------------------
       3. Roles de color
       ---------------------------------------------------------------------- */
    --color-brand: var(--unl-blue);
    --color-brand-hover: var(--unl-blue-dark);
    --color-brand-dark: var(--unl-blue-darker);
    --color-sidebar: var(--unl-blue-dark);
    --color-sidebar-active: var(--unl-red);   /* activo rojo institucional */
    --color-accent: var(--unl-red);
    --color-text: var(--unl-black);
    --color-muted: #5B5450;
    --surface-page: #F4F6F8;
    --surface-panel: #ffffff;
    --surface-subtle: var(--unl-blue-15);
    --border-subtle: #E3E7EA;

    /* ----------------------------------------------------------------------
       4. Densidad: espacio, radio, sombra, altura de control
       ----------------------------------------------------------------------
       Escala de densidad explícita, en los nombres que pide el sistema. Las
       series numéricas (`--space-1`…`--space-8`) se conservan porque las
       consumen las hojas de componentes y de módulos. */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Altura de control homologada: 37 px, dentro del rango 36–38 px de la
       referencia. Suficiente para el puntero fino; en pantallas táctiles sube
       a 40 px (ver la consulta `pointer: coarse` en `components.css`). */
    --control-height: 37px;
    --control-height-sm: 32px;
    --control-height-lg: 44px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    /* Radio de los elementos a escala de control —botón, campo, recuadro de
       icono, aviso—, todos los que antes repetían `10px` a mano. Se declara
       aparte del radio de tarjeta y de panel porque son dos ritmos distintos:
       ajustar los controles no debe arrastrar a los contenedores. */
    --radius-control: 10px;

    /* Sombras en dos planos, siempre en negro corporativo: un filo de contacto
       muy tenue y una difusión amplia. Es lo que da profundidad sin marcar caja. */
    --shadow-sm: 0 1px 2px rgba(33, 25, 21, .05), 0 1px 3px rgba(33, 25, 21, .04);
    --shadow-md: 0 2px 4px rgba(33, 25, 21, .05), 0 10px 26px rgba(33, 25, 21, .09);
    --shadow-lg: 0 8px 20px rgba(33, 25, 21, .10), 0 24px 60px rgba(33, 25, 21, .16);

    /* ----------------------------------------------------------------------
       5. Estructura
       ---------------------------------------------------------------------- */
    --fsh-sidebar-width: 252px;
    /* Altura **real** de la cabecera, no un mínimo aproximado: la hoja de
       estructura se la impone a la barra y con ella calcula el anclaje de la
       barra lateral, el alto del shell y el salto a anclas. Si el token y la
       altura pintada divergieran, la diferencia se vería como una franja vacía
       bajo la cabecera al desplazar la página. Por eso vive aquí, en una sola
       declaración, y se ajusta por punto de ruptura más abajo. */
    --fsh-navbar-height: 64px;
    --fsh-content-max: 1560px;

    /* ----------------------------------------------------------------------
       5.b. Base responsive reutilizable (móvil)
       Una sola fuente para las áreas seguras (notch/isla/indicador) y las
       medidas móviles: los módulos NO recalculan `env()` cada uno por su cuenta,
       consumen estas variables. Fallback 0px si el navegador no las soporta. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --header-mobile-height: 58px;
    --sidebar-mobile-width: min(86vw, 320px);
    --content-mobile-padding: clamp(16px, 4vw, 24px);

    /* ----------------------------------------------------------------------
       6. Filete institucional rojo–azul
       ----------------------------------------------------------------------
       El elemento de marca que cose toda la aplicación: bajo la cabecera, en el
       borde superior de cada tarjeta y en la tarjeta de acceso. Es el mismo
       recurso que usa Bienestar, resuelto con el rojo y el azul de la UNL.
       Se declara una sola vez y se reutiliza; así el acento nunca se desvía. */
    --rule-brand: linear-gradient(90deg,
        var(--unl-red) 0%, var(--unl-red) 16%,
        var(--unl-red-80) 22%, var(--unl-blue) 34%, var(--unl-blue-dark) 100%);
    /* Variante corta para tarjetas: el rojo ocupa más proporción porque el
       ancho es menor y, si no, el acento desaparece. */
    --rule-brand-card: linear-gradient(90deg,
        var(--unl-red) 0%, var(--unl-red) 28%,
        var(--unl-blue) 28%, var(--unl-blue) 62%,
        var(--unl-blue-15) 62%);

    /* ----------------------------------------------------------------------
       7. Alias del sistema (`--fsh-*`)
       ----------------------------------------------------------------------
       Nombres semánticos que consumen las plantillas y las hojas de
       componentes. Cambiar aquí el valor cambia la aplicación entera. */

    /* Azul institucional */
    --fsh-blue-050: #F2F6F9;
    --fsh-blue-100: var(--unl-blue-15);
    --fsh-blue-200: var(--unl-blue-40);
    --fsh-blue-400: var(--unl-blue-80);
    --fsh-blue-600: var(--color-brand);
    --fsh-blue-700: var(--color-brand-hover);
    --fsh-blue-900: var(--color-brand-dark);
    --fsh-navy: var(--color-sidebar);

    /* Acento de marca: rojo corporativo. Se usa en filetes finos, indicadores
       de sección y estado activo. Nunca como fondo continuo de áreas operativas
       grandes (norma del manual). */
    --fsh-accent: var(--unl-red);
    --fsh-accent-soft: var(--unl-red-15);
    /* Alias heredados: el nombre «gold» sobrevive en plantillas y utilidades;
       apunta ya al rojo corporativo para no dejar dos acentos conviviendo. */
    --fsh-gold: var(--unl-red);
    --fsh-gold-soft: var(--unl-red-15);
    --fsh-gold-text: var(--unl-red);

    /* Estados. Los semánticos parten de la paleta corporativa donde el
       significado coincide (positivo → verde UNL, error → rojo UNL). El ámbar
       de advertencia NO se presenta como color corporativo: es un color de
       interfaz que el sistema ya usaba y que la paleta UNL no cubre. */
    --fsh-success: var(--unl-green-text);      /* 6.53:1 sobre blanco */
    --fsh-success-strong: var(--unl-green);    /* corporativo, para filetes */
    --fsh-success-bg: var(--unl-green-15);
    --fsh-warning: #8a5a00;                    /* ámbar semántico, 5.62:1 */
    --fsh-warning-bg: #fdf3e2;
    --fsh-danger: var(--unl-red);              /* 6.45:1 sobre blanco */
    --fsh-danger-bg: var(--unl-red-15);
    --fsh-info: var(--unl-blue);
    --fsh-info-bg: var(--fsh-blue-050);
    --fsh-neutral: var(--color-muted);
    --fsh-neutral-bg: #EEF0F2;

    /* Superficies y texto */
    --fsh-content-bg: var(--surface-page);
    --fsh-surface: var(--surface-panel);
    --fsh-surface-alt: var(--surface-subtle);
    --fsh-surface-muted: #F8FAFB;   /* fondo de campo, cabecera de tabla */
    --fsh-text: var(--color-text);
    --fsh-text-muted: var(--color-muted);
    --fsh-border: var(--border-subtle);
    --fsh-border-strong: #C3C9CE;

    /* Radios, sombras, espaciado */
    --fsh-radius-sm: var(--radius-sm);
    --fsh-radius: var(--radius-md);
    --fsh-radius-lg: var(--radius-lg);
    --fsh-shadow-sm: var(--shadow-sm);
    --fsh-shadow: var(--shadow-md);
    --fsh-shadow-lg: var(--shadow-lg);
    --fsh-space-1: var(--space-1);
    --fsh-space-2: var(--space-2);
    --fsh-space-3: var(--space-3);
    --fsh-space-4: var(--space-4);
    --fsh-space-5: var(--space-5);
    --fsh-space-6: var(--space-6);

    /* Movimiento */
    --fsh-transition: .15s ease;

    /* Tipografía */
    --fsh-font: var(--font-sans);

    /* ----------------------------------------------------------------------
       8. Puente con Bootstrap 5.3
       ----------------------------------------------------------------------
       Bootstrap se conserva como base; se le entregan los tokens propios para
       que sus componentes hereden la identidad sin reescribirlos uno a uno. */
    --bs-primary: var(--fsh-blue-600);
    --bs-primary-rgb: 0, 76, 123;
    --bs-link-color: var(--fsh-blue-600);
    --bs-link-color-rgb: 0, 76, 123;
    --bs-link-hover-color: var(--fsh-blue-700);
    --bs-body-color: var(--fsh-text);
    --bs-body-font-family: var(--fsh-font);
    --bs-body-font-size: var(--font-size-base);
    --bs-border-color: var(--fsh-border);
    --bs-border-radius: var(--fsh-radius-sm);
    --bs-secondary-color: var(--fsh-text-muted);
}

/* Tablet y móvil: la cabecera pierde el logotipo grande y el nombre de la
   cuenta, así que ocupa menos. Se ajusta el token —no una regla suelta— para
   que todo lo que se mide con él siga cuadrando. */
@media (max-width: 991.98px) {
    :root { --fsh-navbar-height: 58px; }
}

/* Respeta la preferencia del sistema de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}