/* ==========================================================================
   Portal institucional · Facultad de la Salud Humana · UNL
   Tokens del sistema visual institucional.
   ==========================================================================

   Fuente única de verdad de color, tipografía, espacio, radio y sombra del
   portal. Los valores NO son una interpretación nueva: se toman literalmente
   del sistema visual ya en producción en los sistemas de Laboratorios
   (`/var/www/fsh-laboratorios-django/static/css/design-tokens.css`) y de
   Vinculación, que a su vez derivan del Manual de Identidad Corporativa de la
   Universidad Nacional de Loja.

   Este archivo es una copia REDUCIDA: se conservan los tokens que el portal
   usa —color, tipografía, densidad, sombra, filete de marca— y se omiten los
   de la aplicación de gestión que aquí no tienen sentido (barra lateral,
   altura de control de formulario, puente con Bootstrap). Los valores
   conservados son idénticos a los del origen, para que las tres piezas se
   vean como un mismo sistema.

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

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

:root {
    /* ----------------------------------------------------------------------
       1. Colores corporativos UNL
       ---------------------------------------------------------------------- */
    --unl-red: #BF0811;             /* Pantone 485 C — 6.45:1 sobre blanco */
    --unl-black: #211915;           /* Pantone Black C — 16.4:1 sobre blanco */
    --unl-blue: #004C7B;            /* azul institucional — 9.05:1 sobre blanco */

    /* Variaciones tonales admitidas por el manual, generadas sobre blanco. */
    --unl-red-80:  #CC3A32;
    --unl-red-15:  #F7E1E0;
    --unl-blue-80: #337095;
    --unl-blue-40: #99B7CB;
    --unl-blue-15: #E5EDF2;

    /* Derivados oscuros. No son colores nuevos: son el azul institucional
       oscurecido para estructura y para alcanzar AA donde el original no
       llega. */
    --unl-blue-dark: #003A5D;
    --unl-blue-darker: #002A44;
    --unl-red-dark: #96060D;        /* rojo pulsado / hover */

    /* ----------------------------------------------------------------------
       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;

    --font-size-xs: .6875rem;   /* 11 px — rótulos, metadatos */
    --font-size-sm: .8125rem;   /* 13 px — apoyo */
    --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 sección */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ----------------------------------------------------------------------
       3. Roles de color
       ---------------------------------------------------------------------- */
    --color-text: var(--unl-black);
    --color-muted: #5B5450;         /* 7.03:1 sobre blanco */
    --surface-page: #F4F6F8;
    --surface-panel: #ffffff;
    --border-subtle: #E3E7EA;

    /* Alias semánticos: los mismos nombres `--fsh-*` que consumen las
       plantillas de Laboratorios y Vinculación, para que el vocabulario sea
       uno solo en los tres proyectos. */
    --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(--unl-blue);
    --fsh-blue-700: var(--unl-blue-dark);
    --fsh-blue-900: var(--unl-blue-darker);
    --fsh-accent: var(--unl-red);
    --fsh-accent-soft: var(--unl-red-15);

    --fsh-content-bg: var(--surface-page);
    --fsh-surface: var(--surface-panel);
    --fsh-surface-muted: #F8FAFB;
    --fsh-text: var(--color-text);
    --fsh-text-muted: var(--color-muted);
    --fsh-border: var(--border-subtle);
    --fsh-border-strong: #C3C9CE;
    --fsh-neutral-bg: #EEF0F2;

    /* ----------------------------------------------------------------------
       4. Densidad: espacio, radio, sombra
       ---------------------------------------------------------------------- */
    --fsh-space-1: .25rem;
    --fsh-space-2: .5rem;
    --fsh-space-3: .75rem;
    --fsh-space-4: 1rem;
    --fsh-space-5: 1.5rem;
    --fsh-space-6: 2rem;

    --fsh-radius-sm: 8px;
    --fsh-radius: 12px;
    --fsh-radius-lg: 18px;
    --radius-control: 10px;

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

    /* ----------------------------------------------------------------------
       5. Estructura
       ---------------------------------------------------------------------- */
    --fsh-navbar-height: 64px;
    --fsh-content-max: 1160px;      /* más estrecho que el panel de gestión:
                                       esto es una portada, no una tabla */
    --fsh-font: var(--font-sans);
    --fsh-transition: .15s ease;

    /* ----------------------------------------------------------------------
       6. Filete institucional rojo–azul
       ----------------------------------------------------------------------
       El elemento de marca que cose los tres sistemas: bajo la cabecera y en
       el borde superior de cada tarjeta. Se declara una sola vez. */
    --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%);
    --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%);
}

@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;
    }
}