/* ============================================================================
   tokens.css — Tecsa·S3 Clínico · NIVEL 1: PRIMITIVOS
   ----------------------------------------------------------------------------
   ÉSTE ES EL ÚNICO FICHERO DEL TEMA CON HEX LITERALES.

   Contrato (design-system/MASTER.md §3b): el CSS que se escribe a mano usa
   sólo tokens semánticos (--ui-*, --n-*, --risk-*) más los de escala ya
   existentes en custom.css (--space-*, --radius-*, --fs-*, --lh-*,
   --duration-*, --ease-*, --touch-target). Aquí no se aplica esa regla: este
   fichero ES la fuente de los valores. theme.css los traduce a semántica.

   Paleta: documento de branding "Salud + IA" + los 5 HTML de referencia.
   Escala de espaciado/radio/tipografía: el documento la pide múltiplo de 8
   con radios 8-10 / 12-16 / 8 / 16-20 / 50%. La escala de custom.css
   (:145-201) ya coincide — --radius-md 10px, --radius-lg 14px,
   --radius-xl 20px, --touch-target 44px. Por eso NO se redefinen aquí: se
   reutilizan los tokens existentes y no se duplica la escala.

   CONTRASTE — corrección deliberada de los mockups
   ----------------------------------------------------------------------------
   Los HTML de referencia usan su paleta cruda como TEXTO y fallan WCAG AA:

     #378ADD sobre #FFFFFF ......... 3.59:1  FALLA (el mockup lo usa en enlaces)
     #7F77DD sobre #FFFFFF ......... 3.76:1  FALLA (nav activo, pills)
     #1D9E75 sobre #FFFFFF ......... 3.39:1  FALLA (pill.ok)
     blanco sobre #378ADD .......... 3.59:1  FALLA (botón primario)

   Aquí se conservan los valores de marca **como relleno** (que es lo que el
   documento de branding especifica: "botones y acciones clave") y se añaden
   las derivatives oscurecidas para TEXTO. El color del botón NO cambia; lo
   que cambia es que el texto encima sea legible:

     botón  #378ADD (marca, intacto) + texto #101B27 -> 4.84:1  AA
     enlace #185FA5 (marca, ya era azul-900)      -> 6.52:1  AA
     nav activo #7F77DD (marca, intacto) + #101B27 -> 4.62:1  AA
     lavanda como TEXTO #655ACA                   -> 5.43:1  AA
     verde como TEXTO #137A5A                     -> 5.30:1  AA

   Medido el 2026-10-06 con la fórmula de luminancia relativa de WCAG 2.x.
   Los ratios están anotados junto a cada valor.
   ============================================================================ */

@layer tokens {

  /* ==========================================================================
     EL SELECTOR DE ESTE BLOQUE NO ES DECORATIVO
     ==========================================================================
     Las declaraciones de abajo van dentro de una REGLA, no sueltas dentro del
     @layer. `@layer tokens { --x: 1px }` NO es CSS válido: el contenido de un
     @layer es una lista de reglas, y una declaración suelta se descarta en
     silencio, sin error de parseo, sin aviso y sin 404.

     Eso es lo que pasaba: los 99 tokens `--tca-*` de este fichero NO se
     aplicaban. MEDIDO en Chromium: `--tca-azul-900`, `--tca-azul-500`,
     `--tca-radius`, `--tca-d-25` y `--tca-dur-fast` salían VACÍOS, y con ellos
     toda la capa semántica que theme.css deriva de ellos (`--ui-primary`,
     `--ui-surface`, `--ui-border`, `--ui-elev-3`, `--ui-text`,
     `--ui-tint-primary`). 256 referencias `var(--tca-*)` quedaban sin resolver.
     El síntoma visible era el panel de tema con `background: rgba(0,0,0,0)`.

     El tema parecía funcionar porque el resto del chrome lo pinta
     chrome-tricorder.css; la falta sólo se nota donde el tema es lo único que
     hay, que son los componentes nuevos. Y ningún test que lea el CSS lo
     detecta, porque el fichero está lleno de tokens bien escritos y bien
     comentados, sólo que en el sitio equivocado.

     La guardia es test_tecsa_clinico_theme.py::TestLasDeclaracionesEstanDentro
     DeUnaRegla: mira dónde viven las declaraciones, no si sus valores son
     buenos. Un test de navegador lo detectaría, pero no corre en CI.
     ========================================================================== */
  html[data-app-theme="tecsa-clinico"] {

  /* --- Azul: la familia dominante, 70-80% de la interfaz --- */
  --tca-azul-900: #185FA5; /* texto sobre fondo claro, títulos — 6.52:1 en blanco */
  --tca-azul-700: #1F588B; /* hover de superficies azules */
  --tca-azul-600: #2A70B8; /* parada clara del relleno primario — 5.11:1 con blanco */
  --tca-azul-500: #378ADD; /* acento: bordes, foco, iconos, indicadores */
  --tca-azul-300: #8FC0EC;
  --tca-azul-100: #E6F1FB; /* fondo de top-bar, iconos, tintes */
  --tca-azul-050: #F2F7FD;

  /* --- Lavanda: ACENTO DE IA. Reservado. Nunca en un botón normal. --- */
  --tca-lav-700: #7F77DD; /* RELLENO de IA: FAB, panel, badge de IA — 3.76:1 */
  --tca-lav-500: #655ACA; /* lavanda legible como TEXTO — 5.43:1 */
  --tca-lav-300: #AFA9EC; /* lavanda de la landing/modo oscuro */
  --tca-lav-100: #ECE6F4;
  --tca-lav-050: #EDE9F8;

  /* --- Verde: SÓLO éxito / bienestar / indicadores positivos --- */
  --tca-verde-500: #1D9E75; /* RELLENO (badge, barra de progreso) */
  --tca-verde-700: #137A5A; /* verde legible como TEXTO — 5.30:1 */
  --tca-verde-100: #E6F7F1;

  /* --- Rojo: error / urgencia --- */
  --tca-rojo-700: #DC2626; /* 4.83:1 en blanco — AA */
  --tca-rojo-100: #FDEBEA;
  /* Rojo para TEXTO: el 700 da 4.83 en blanco pero 4.2 sobre su propio tinte
     (--tca-rojo-100) y 4.08 sobre el fondo de página; medido fallando en
     avisos de borrado (gestion, caracter). */
  --tca-rojo-800: #B91C1C;

  /* --- Ámbar: advertencia / pendiente --- */
  --tca-amber-700: #B45309; /* 5.02:1 en blanco — AA */
  --tca-amber-100: #FDF3E7;
  --tca-amber-800: #92400E; /* ámbar para texto, mismo motivo que rojo-800 */

  /* --- Gris: estructura y descanso visual --- */
  --tca-gris-900: #444441; /* texto secundario — 9.77:1 en blanco */
  --tca-gris-700: #6B6A66;
  --tca-gris-500: #9A9994;
  --tca-gris-300: #C9C9C5;
  --tca-gris-100: #ECEEF2; /* rellenos de pista (progress, segmented) */

  /* --- Rampa neutra derivada ------------------------------------------
     Estos pasos NO salen de la paleta de marca: son los neutros que la app
     ya usa para superficies escalonadas y texto de apoyo. theme.css los
     mapea a --n-100…--n-800. Se declaran aquí para que ese fichero no
     escriba ningún hex. */
  --tca-n-100: #F1F4F8;
  --tca-n-300: #D3DCE8;
  --tca-n-400: #9AA8BC;
  --tca-n-500: #67778D;
  --tca-n-600: #4A5A6E;
  --tca-n-700: #334154;
  --tca-n-800: #22303F;

  /* --- Chrome de superficie ------------------------------------------- */
  /* Borde de la top-bar clara: un azul más frío que --tca-linea, que es lo
     que usa el mockup (#cfe1f3) y lo que separa el cromo del contenido. */
  --tca-topbar-border: #CFE1F3;
  /* Borde del sidebar: gris-lavanda. NO es --tca-lav-050 — el mockup usa un
     morado-gris distinto, y este es el que separa el rail del contenido. */
  --tca-sidebar-border: #D4CAE8;
  /* Borde del avatar neutro de agente/paciente (del mockup). */
  --tca-agente-border: #D4CCEF;

  /* --- Acento de privilegio -------------------------------------------
     Chrome que sólo ve un superusuario de Django (acceso a /useradmin/).
     theme-tokens.css:81-89 lo documenta y lo separa del semáforo clínico a
     propósito: retematizar el semáforo no debe mover este acento. El valor
     se conserva tal cual — es el ámbar del navbar, no un token del tema. */
  --tca-privilege: #FFC107;

  /* --- Barra superior (navbar) -----------------------------------------
     Marino de marca, no el #134D6D teal del tema anterior. Es la única
     superficie oscura en modo claro y se conserva en oscuro: ancla la
     pantalla. Contrastes medidos (peor caso = hover sobre --tca-nav-800):
       tinta     #F5F9FF  15.93 / 11.08 / 8.45:1
       atenuada  #C3D3E6  11.04 /  7.68 / 5.86:1
       acento    azul-300  8.75 /  6.08 / 4.64:1  (iconos y activo) */
  --tca-nav-950: #0B1E33;
  --tca-nav-800: #133A5E;
  --tca-nav-ink: #F5F9FF;
  --tca-nav-ink-muted: #C3D3E6;

  /* --- Blanco y canvas --- */
  --tca-blanco: #FFFFFF;
  /* Blanco de TEXTO sobre rellenos oscuros. Aparte de --tca-blanco porque
     theme-dark.css remapea ése a la superficie oscura. */
  --tca-blanco-texto: #FFFFFF;
  --tca-canvas: #F4F6FA; /* el fondo real de la app en los mockups */
  --tca-canvas-2: #FBFCFE;
  --tca-canvas-3: #EDF3FA;

  /* --- Texto sobre relleno --- */
  --tca-ink-900: #101B27; /* 4.84:1 sobre #378ADD, 4.62:1 sobre #7F77DD */

  /* --- Bordes --- */
  /* decorativo: separa superficies, no comunica información. Por debajo de
     3:1 a propósito — un borde decorativo es adorno y WCAG 1.4.11 excluye
     los adornos del requisito de contraste no textual. */
  --tca-linea: #E3EAF3;
  --tca-linea-fuerte: #D8E3F0;
  /* FUNCIONAL: borde de campo de formulario. WCAG 1.4.11 exige ≥3:1 porque
     el borde SÍ comunica ("aquí se puede escribir"). Medido 3.70:1 sobre
     blanco.

     NOTA — corrección sobre una medición previa: #9FC4E4 daba 1.83:1, muy por
     debajo. Es un azul medio claro que a simple vista parece bastante, y por
     eso el error era fácil de cometer. El valor se corrige a #4F89C0 y el
     test dashboard/tests/test_tecsa_clinico_theme.py lo mide en cada
     ejecución, no se confía en el comentario. */
  --tca-linea-campo: #4F89C0;
  /* borde de control deshabilitado */
  --tca-linea-tenue: #EDF1F6;

  /* --- Impresión ---
     En papel no hay fondo: todo se imprime en blanco y negro. Estos dos son
     los únicos colores literales que quedan fuera de la marca, y viven aquí
     porque responsive.css los referencia como token. */
  --tca-print-tinta: #000000;
  --tca-print-papel: #FFFFFF;

  /* ==========================================================================
     2. GRADIENTES DE MARCA
     ==========================================================================
     El gradiente del sidebar es la firma visual de los mockups:
     azul -> lavanda, tres paradas a 0% / 45% / 100%.
     El avatar es un tricolor azul -> lavanda con anillo blanco.
     Se declaran aquí como tokens para que components.css no escriba
     gradientes sueltos.
     ========================================================================== */
  --tca-grad-sidebar: linear-gradient(
    180deg,
    var(--tca-azul-100) 0%,
    var(--tca-lav-100) 45%,
    var(--tca-lav-050) 100%
  );
  /* Relleno de botón primario: azul-600 → azul-900, dos azules de marca
     cercanos (sin brillo), con texto blanco en todas las paradas: 5.11 → 6.52.
     Sustituye al #378ADD plano, que no admitía un texto legible y limpio
     (blanco 3.59; la tinta 4.84 cumplía pero se veía turbia). */
  --tca-grad-primario: linear-gradient(135deg, var(--tca-azul-600) 0%, var(--tca-azul-900) 100%);
  --tca-grad-primario-hover: linear-gradient(135deg, var(--tca-azul-900) 0%, var(--tca-azul-700) 100%);
  --tca-grad-avatar: linear-gradient(
    135deg,
    var(--tca-azul-900) 0%,
    var(--tca-azul-500) 50%,
    var(--tca-lav-700) 100%
  );
  --tca-grad-progress-ok: linear-gradient(90deg, var(--tca-verde-500), #4ADE80);
  --tca-grad-progress-warn: linear-gradient(90deg, var(--tca-amber-700), #F59E0B);
  --tca-grad-progress-ko: linear-gradient(90deg, var(--tca-rojo-700), #EF4444);

  /* ==========================================================================
     3. ESCALA DE RADIO Y SOMBRA
     ==========================================================================
     Los mockups DECLARAN una escala de 4 radios y 2 sombras pero no la usan:
     escriben literales. Verificado — 5 de sus 20 tokens están muertos
     (--c-blanco, --radius-sm, --radius, --radius-xl, --shadow). Aquí se
     reconcilia: cada literal se mapea al token que claramente pretendía.

     Los radios se apoyan en la escala que YA existe en custom.css (--radius-*
     :169-175), que coincide con el documento de branding. Se referencian, no
     se redefinen.
     ========================================================================== */
  --tca-radius-sm: 6px;   /* segmented control        — var(--radius-sm) */
  --tca-radius: 10px;     /* botón, input, icono      — var(--radius-md) */
  --tca-radius-lg: 14px;  /* tarjeta, panel           — var(--radius-lg) */
  --tca-radius-xl: 18px;  /* modal, drawer            — var(--radius-xl) */
  --tca-radius-pill: 999px;

  /* Sombras MUY sutiles — el documento lo pide explícitamente:
     "casi imperceptibles, esto es lo que da el toque premium sin verse
     cargado". Nada de sombras oscuras o marcadas: se ve anticuado. */
  --tca-shadow-sm: 0 1px 2px rgba(24, 95, 165, 0.05);
  --tca-shadow: 0 2px 8px rgba(127, 119, 221, 0.08);
  --tca-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);    /* flotantes/modales */
  --tca-shadow-lift: 0 2px 6px rgba(127, 119, 221, 0.35); /* avatar */

  /* ==========================================================================
     4. TIPOGRAFÍA
     ==========================================================================
     El documento pide Inter o Manrope. El repo ya carga Inter por Google
     Fonts desde base.html:63 — no se añade una segunda petición ni se
     auto-hospeda. Manrope queda como fallback declarado, no descargado.
     La escala de tamaños la aporta custom.css (--fs-*, :123-131).
     ========================================================================== */
  --tca-font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --tca-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    monospace;

  /* ==========================================================================
     5. MOTION
     ==========================================================================
     Sutil. Los mockups tienen 7 animaciones sin escape de reduced-motion;
     aquí la duración es corta y el escape lo pone responsive.css.
     ========================================================================== */
  --tca-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tca-dur-fast: 150ms;
  --tca-dur: 240ms;

  /* ==========================================================================
     6. GLASS (glassmorphism SUTIL)
     ==========================================================================
     El documento lo pide, pero "sutil". Se limita a superficies de cromo
     (top-bar, navbar) y NO se aplica al contenido: aplicarlo a todo lo hace
     ilegible y castiga el rendimiento. En claro es casi imperceptible; el
     blur real se activa sólo en modo oscuro (theme-dark.css).
     ========================================================================== */
  --tca-glass-blur: saturate(1.4);
  --tca-glass-bg: rgba(255, 255, 255, 0.82);

  /* ==========================================================================
     7. PRIMITIVOS DE MODO OSCURO
     ==========================================================================
     El modo oscuro del tema tiene sus propios valores porque invertir la
     rampa clara no cuadra: los pasos neutros claros (--tca-n-*) están
     calibrados para el canvas #F4F6FA, y su inverso no cae sobre una
     superficie oscura con el mismo delta perceptual.

     Se declaran aquí (no en theme-dark.css) para mantener la regla de que
     tokens.css es el único fichero con hex del tema. theme-dark.css se
     limita a MAPEARLOS a los tokens semánticos.

     Sobre una superficie oscura una sombra casi invisible no separa nada: la
     separación la hace el BORDE y una sombra algo más marcada. Por eso
     --tca-d-elev-* son más fuertes que los de claro, no más suaves.

     Ratios medidos sobre --tca-d-25 (#101B27):
       --tca-d-900  15.07:1    --tca-d-600  10.02:1
       --tca-d-ok    9.51:1    --tca-d-info-txt  6.71:1
       --tca-d-warn 10.66:1    --tca-d-danger-txt 8.55:1
       --tca-d-lav-txt 8.04:1
     ========================================================================== */
  --tca-d-bg: #0A121B;      /* fondo de página */
  --tca-d-0: #0D1620;
  --tca-d-25: #101B27;      /* superficie de tarjeta */
  --tca-d-50: #14212F;
  --tca-d-100: #1A2A3A;    /* superficie-3 y borde suave */
  --tca-d-200: #24364A;    /* borde decorativo */
  --tca-d-300: #33475E;
  --tca-d-400: #5A7085;    /* borde funcional de campo */
  --tca-d-500: #7E93A6;
  --tca-d-600: #A9C4DE;    /* texto secundario */
  --tca-d-700: #B8C6D3;
  --tca-d-800: #D6E0E9;
  --tca-d-900: #E6F0FA;    /* texto principal */

  /* Semánticos legibles sobre fondo oscuro. */
  --tca-d-ok: #4ADE9E;
  --tca-d-warn: #FFC978;
  --tca-d-danger: #EF4444;
  --tca-d-danger-txt: #FF9A9A;
  --tca-d-info-txt: #78A9E8;
  --tca-d-lav-txt: #AFA9EC;

  /* Superficies de cromo. */
  --tca-d-topbar: #0F1D2B;
  --tca-d-side-bd: #2C3E52;
  --tca-d-grad-sidebar: linear-gradient(
    180deg,
    #101B27 0%,
    #14212F 45%,
    #1A2333 100%
  );

  /* Glass: en oscuro sí se activa un blur real. Sobre fondo oscuro un plano
     translúcido sin blur es un rectángulo gris sobre otro gris; en claro el
     mismo efecto satura menos y por eso --tca-glass-blur no lleva blur. */
  --tca-d-glass-blur: blur(12px) saturate(1.6);
  --tca-d-glass: rgba(16, 27, 39, 0.72);

  /* Elevación. */
  --tca-d-elev-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --tca-d-elev-2: 0 2px 8px rgb(0 0 0 / 0.5);
  --tca-d-elev-3: 0 8px 28px rgb(0 0 0 / 0.6);
  --tca-d-glow: 0 0 0 1px rgb(55 138 221 / 0.25);

  /* ==========================================================================
     PALETA DE LOS CHIPS DE ESTADÍSTICA DEL PIE
     --------------------------------------------------------------------------
     MEDIDO en Chromium componiendo alfa y degradado a mano. Antes la banda
     iba sobre un degradado teal oscuro (`#134e4a`) con los valores a 1.83:1
     y las etiquetas a 1.12:1: letra negra sobre fondo oscuro. Y los glifos,
     blancos sobre círculos saturados, iban de 1.61:1 a 4.50:1 — sobre el
     amarillo `#ffc312` un blanco da 1.61:1 y no hay forma de que se lea.

     El patrón nuevo es el inverso: tinte CLARO del color semántico con el
     GLIFO OSCURO del mismo color. Cada chip conserva su identidad y las cinco
     son legibles, con estos contrastes medidos sobre su propio tinte:

         Pacientes  #186B40 sobre #E6F3EB ....  5.72:1
         Familias   #185FA5 sobre #E6F1FB ....  5.70:1
         Riesgo Alto #B3261E sobre #FCEBE9 ....  5.66:1
         Perfiles   #8A5A00 sobre #FBF1DC ....  5.28:1
         Nuevos 30d #117A63 sobre #E4F2EE ....  4.57:1

     El verde de Pacientes es #186B40 y no el #1A7F4B de partida: aquel daba
     4.40:1, justo por debajo del 4.5:1 que pide WCAG AA para texto.

     Vive aquí y no en components.css por la regla del repo: el hex solo
     existe en tokens.css.
     ========================================================================== */
  --tca-stat-pacientes-bg: #E6F3EB;
  --tca-stat-pacientes-bd: #CBE6D6;
  --tca-stat-pacientes-fg: #186B40;
  --tca-stat-familias-bg: #E6F1FB;
  --tca-stat-familias-bd: #CBE0F4;
  --tca-stat-familias-fg: #185FA5;
  --tca-stat-riesgo-bg: #FCEBE9;
  --tca-stat-riesgo-bd: #F6D4D1;
  --tca-stat-riesgo-fg: #B3261E;
  --tca-stat-perfiles-bg: #FBF1DC;
  --tca-stat-perfiles-bd: #F2E0B8;
  --tca-stat-perfiles-fg: #8A5A00;
  --tca-stat-nuevos-bg: #E4F2EE;
  --tca-stat-nuevos-bd: #C6E4DA;
  --tca-stat-nuevos-fg: #117A63;
  /* Tinta de la banda sobre la superficie clara del pie (#EDF3FA):
     valor 15.56:1 y etiqueta 7.57:1. */
  --tca-stat-valor: #101B27;
  --tca-stat-label: #444E5A;
  }
}