/*
 * HÉLIX V3 — Design Tokens
 * Sistema de diseño unificado basado en Atomic Design
 * Continuidad visual con Hélix v2 (pivotes 2026-04-30)
 *
 * Paleta: tonos cálidos + azul pastel como acento
 * Tipografía: IBM Plex Sans + IBM Plex Mono
 */

/* ─── Importar fuentes ─────────────────────────────────────────── */
/* Dos familias, no cinco (22/8). Figtree, Hanken Grotesk y Space Grotesk
   estaban acá porque una paleta cambiaba la tipografía; se descargaban SIEMPRE,
   en las ocho paletas, aunque sólo una las usara. Son tres pedidos menos a
   Google Fonts en cada carga — y la mesada abre esto con la red del
   laboratorio. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ─── Paleta del logo Hélix ────────────────────────────────────── */
:root {
  --hx-coral:      #E07866;
  --hx-periwinkle: #9B8DC9;
  --hx-sage:       #7BA88A;
  --hx-gold:       #E8B84B;
  --hx-steel:      #6B8DC9;
}

/* ─── Modo claro (default) ─────────────────────────────────────── */
:root {
  /* Lo que dibuja el NAVEGADOR y no nosotros: el iconito del calendario, el
   * almanaque que se despliega, las barras de desplazamiento, la lista de un
   * `<select>` abierto.
   *
   * Sin esta línea el navegador lo elige mirando la preferencia del MAC, que no
   * tiene nada que ver con el tema de la app. El caso común no es el exótico:
   * mucha gente tiene el Mac en oscuro, y usando Hélix en claro abría un
   * almanaque negro encima de una pantalla blanca. Son 89 campos de fecha y
   * hora en 38 pantallas, y con esto no hay que tocar ninguna. (23/8) */
  color-scheme: light;

  /* Fondos */
  --h-bg:           #FAF8F4;
  --h-surface:      #FFFFFF;
  --h-nest:         #F4F1EB;
  --h-hairline:     #E8E4DC;
  --h-border-soft:  #D6D0C5;

  /* Texto */
  --h-ink:          #27241F;
  --h-ink-soft:     #5C574E;
  --h-muted:        #6E695E;
  --h-faint:        #8B8478;

  /* Marca principal — coral del logo Hélix.
   *
   * Contraste (auditoría 2026-07-19): el coral #E07866 daba 2.98:1 tanto con
   * texto blanco encima como usado de texto sobre fondo claro. El mínimo
   * legible (WCAG AA, texto normal) es 4.5:1. Este token se usa 95 veces como
   * COLOR DE TEXTO además de como fondo del botón principal, así que se
   * oscurece el token en sí en vez de parchear caso por caso: ahora da 5.23:1
   * en los dos usos. Los fondos suaves NO cambian — la paleta y el aire son
   * los mismos, sólo baja la luminosidad del trazo. */
  --h-brand-primary:       #AC5145;
  --h-brand-primary-hover: #93443A;
  --h-brand-primary-soft:  #FCEEE9;
  --h-brand-primary-soft-hover: #F8DDD4;
  --h-brand-primary-text:  #FFFFFF;
  /* La letra sobre el degradé del tema (iniciales del avatar, ícono de la
   * acción principal). Blanco para los degradés oscuros; las paletas con un
   * degradé claro (Ocaso, Alba, Primavera, Mediodía, Verano) ponen la tinta
   * de su botón vivo. No cambia con el modo: el degradé tampoco. */
  --h-sobre-degrade: #FFFFFF;
  /* Se conserva por compatibilidad con lo que ya lo referencia: ya no hace
     falta un tono aparte para fondos claros, el principal cumple AA solo. */
  --h-brand-primary-on-light: #AC5145;

  /* Gradiente de firma. Por defecto se deriva del color de marca (fallback
     para las paletas que no traen uno propio); la paleta "aurora" lo pisa con
     su degradé azul→violeta→magenta. Se usa en el logo y momentos puntuales,
     nunca de fondo. */
  --h-brand-gradient: linear-gradient(120deg, var(--h-brand-primary), var(--h-brand-primary-hover));

  /* Acento IA — periwinkle del logo. 2.58 -> 4.96:1 */
  --h-accent-ai:      #6B5CA0;
  --h-accent-ai-soft: #F0EDF8;

  /* Estados semánticos.
   *
   * Los cuatro estaban por debajo del mínimo sobre su propio fondo suave
   * (ok 2.63, warn 2.42, danger 3.57, info 2.83). Son los estados clínicos que
   * el bioquímico lee de reojo — "Validado", "Pendiente", "Crítico" — así que
   * es el peor lugar donde tener texto que se pierde.
   *
   * Se oscurece sólo el tono de trazo; los fondos -soft quedan igual. El tono
   * se usa 88 veces como texto, 18 como fondo y 11 como borde: al oscurecerlo
   * los fondos (que llevan texto blanco) y los bordes también mejoran. */
  --h-ok:         #3D6B4D;   /* 2.63 -> 5.24:1 */
  --h-ok-soft:    #E6EFE8;
  --h-ok-soft-hover: #D5E4D9;
  /* ── El amarillo, y por qué era un marrón ──────────────────────────
   *
   * Matías, 12/8: *«el amarillo me parece demasiado aburrido, está en varias
   * partes del sistema; poné algo más alegre, un amarillo como el de los
   * colores de helix»*.
   *
   * Tenía razón y la causa estaba escrita acá arriba: para llegar al mínimo
   * legible se había oscurecido el tono hasta #7A5D2E, que ya no es amarillo
   * —es un marrón mostaza—. Un amarillo alegre de verdad sobre blanco da
   * 1.8:1: ilegible. O sea que el problema no se arregla eligiendo mejor el
   * color, se arregla SEPARANDO LOS ROLES, que es lo que la casa ya hace con
   * el naranja del logo (ver la paleta "ocaso" al pie).
   *
   *   trazo/texto  →  ámbar profundo, tiene que ser legible
   *   fondo suave  →  crema amarillo luminoso, no beige grisáceo
   *   señal viva   →  el amarillo del logo, SIN texto encima
   *
   * El tono nuevo es el de la hebra amarilla del logo (tema "Alba"): más
   * naranja y más saturado que el marrón que había, y con MÁS contraste que
   * antes (5.37 contra 5.11). Se gana alegría sin perder legibilidad. */
  --h-warn:       #A34A08;   /* ámbar profundo — 5.37:1 sobre su fondo suave */
  --h-warn-soft:  #FDF3DA;   /* crema amarillo: era #F2EAD7, un beige apagado */
  --h-warn-soft-hover: #F9E8BF;
  /* Fondo «aurora» (tarea 4799, Matías 29/9: «esto me encantó, me gustaría
   * ese fondo para algunas partes del sistema»). Los cuatro pastel del logo,
   * copia exacta del bloque «sin cargo» de helixlab.com.ar. Son la marca: NO
   * siguen la paleta elegida, por eso no se reusan los -soft (que cambian con
   * cada tema). Se usan en molecules/fondo-aurora.css. */
  --h-aurora-salmon:   #FBE3D9;
  --h-aurora-lavanda:  #E9E4F7;
  --h-aurora-salvia:   #DDEBDF;
  --h-aurora-amarillo: #FCEFCB;
  --h-aurora-borde:    #E6E0D6;
  /* Los dibujitos de adentro de los campos (flecha del desplegable, lupa del
   * buscador), tarea 2836. Van como imagen en el CSS y una imagen no puede
   * leer var(--h-*): el color va escrito adentro. Por eso viven acá, con su
   * versión para el oscuro, y no en atoms/input.css, donde quedaban en el
   * gris del claro también en oscuro. */
  --h-icono-desplegable: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --h-icono-lupa: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  /* El amarillo alegre de verdad — la hebra del logo. Va donde NO hay texto
   * encima: franjas laterales, puntos de estado, barras. Con letras arriba
   * quedaría en 1.8:1 y no se leería nada. */
  --h-warn-vivo:  #E9B949;
  --h-danger:     #8E2F2C;   /* 3.57 -> 6.38:1 */
  --h-danger-soft:#F4E0DD;
  --h-info:       #3F6383;   /* 2.83 -> 5.30:1 */
  --h-info-soft:  #E5ECF3;

  /* ── La tinta que va ENCIMA de un relleno saturado ────────────────────
   * Cuando el fondo es `--h-ok`, `--h-warn`, `--h-danger`, `--h-info`,
   * `--h-accent-ai` o `--h-brand-primary` —un relleno de color, no su version
   * suave—, el texto de arriba usa ESTE token y nunca un blanco a mano.
   *
   * Por que importa, y no es una cuestion de prolijidad: los estados INVIERTEN
   * su claridad entre los dos modos. En claro `--h-ok` es un verde oscuro
   * (#3D6B4D) y el blanco encima da 6.16:1. En oscuro el MISMO token es un
   * verde claro (#8AB39A) y el blanco encima da 2.33:1 — ilegible. Con el
   * amarillo es peor todavia: 1.83:1.
   *
   * O sea que `color: #fff` sobre un estado esta bien en un modo y roto en el
   * otro, y como se escribe mirando el modo claro, el que queda roto es el
   * oscuro — que es el que la aplicacion usa de verdad. Estaba pasando en el
   * check de validado del protocolo, en el aviso de muestra vencida de la
   * mesada y en once lugares mas.
   *
   * Medido: en claro va blanco (6.16 / 5.93 / 8.10 / 6.32 sobre ok/warn/
   * danger/info); en oscuro va la tinta del fondo (7.33 / 9.37 / 6.47 / 6.95).
   * Los dos lados por arriba de 4.5:1. Lo comprueba tools/verificador/
   * contraste.py, que falla si alguna combinacion baja del minimo. */
  --h-sobre-estado: #FFFFFF;

  /* ── Los tres neutros que NO son de la paleta ──────────────────────────
   * Un brillo interior sobre un boton lleno, una sombra, el velo que oscurece
   * detras de un cuadro: no son colores de marca ni estados, son luz y falta
   * de luz. Van SIEMPRE dentro de un `color-mix`, nunca como relleno:
   *     box-shadow: 0 1px 0 color-mix(in srgb, var(--h-brillo) 18%, transparent) inset;
   * Existen para que estas capas dejen de escribirse como `rgba(255,255,255,
   * .18)` sueltos —que es lo mismo, pero repartido en veinte archivos y sin
   * forma de cambiarlo— y para que el dia que el modo oscuro necesite otra
   * intensidad haya UN lugar donde tocarlo. */
  --h-brillo: #FFFFFF;
  --h-sombra: #000000;
  --h-velo:   #14110E;   /* casi negro, apenas calido — el tono de la casa */

  /* ── Movimiento: UNA escala para toda la casa ─────────────────────────
   * Cada pantalla venia inventando su "120ms ease-out". Con tokens, todas las
   * transiciones comparten ritmo — que es lo que hace que la aplicacion se
   * sienta UNA cosa y no veinte pantallas pegadas. La curva de entrada
   * desacelera (llega suave); la de salida acelera (se va rapido): lo que
   * aparece pide atencion, lo que se va no la retiene. */
  --h-dur-1: 120ms;   /* micro: hover, foco, press */
  --h-dur-2: 180ms;   /* elementos: cuadros, filas, chips */
  --h-dur-3: 280ms;   /* paneles y entradas de pagina */
  /* La pantalla entera se reacomoda (Laboratorio, 19/9: la planilla se achica
   * y aparece el protocolo, las tarjetas se pliegan a un renglón). Matías: «que
   * sea más lenta la transición, le va a dar un toque más interesante». Con
   * 280 ms el cambio se leía como un salto; 600 ms se ve cómo se mueve. */
  --h-dur-4: 600ms;   /* cambios de escena: la pantalla se reacomoda */
  --h-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --h-ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --h-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Los dos ritmos que se repiten SOLOS mientras se espera. Van aparte de la
   * escala de arriba porque no son una respuesta a algo que hizo la persona:
   * son el sistema diciendo "segui esperando". Lentos a proposito — un latido
   * rapido pone nervioso justo cuando no se puede hacer nada.
   * `pulso` lo comparten el esqueleto y el punto de estado en vivo: las cosas
   * que esperan respiran todas al mismo tiempo. `giro` es el del spinner, que
   * venia en tres velocidades distintas segun de que archivo saliera. */
  --h-dur-pulso: 1.4s;
  --h-dur-giro:  0.8s;

  /* Duraciones compuestas, listas para usar en `transition`. Existen para que
   * escribir la transicion mas corta posible ya salga con el ritmo de la casa:
   *   transition: background var(--h-mov-rapido);
   * `--h-mov-sale` usa la curva de salida — para lo que se va, no lo que llega. */
  --h-mov-rapido: var(--h-dur-1) var(--h-ease-out);
  --h-mov-medio:  var(--h-dur-2) var(--h-ease-out);
  --h-mov-lento:  var(--h-dur-3) var(--h-ease-out);
  /* Curva de ida y vuelta: arranca y termina suave, para lo que se reacomoda
   * (no llega ni se va: cambia de forma a la vista). */
  --h-mov-escena: var(--h-dur-4) var(--h-ease-inout);
  --h-mov-sale:  var(--h-dur-1) var(--h-ease-in);

  /* Sombras */
  --h-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --h-shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --h-shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);

  /* Tipografía — UNA sola familia para todo el sistema.
   *
   * Decisión de Matías, 22/8: *«una sola familia para todo»*. La letra no
   * depende del color elegido: hasta ese día la paleta Aurora pisaba estos dos
   * tokens con Hanken Grotesk y Space Grotesk, así que cambiar de color
   * cambiaba la tipografía de todas las tablas del laboratorio. El color se
   * elige en Apariencia; la letra es de la casa y es la misma siempre.
   *
   * `--h-font-display` existe para los titulares del panel de trabajo y hoy
   * vale lo mismo que la de texto: es un gancho, no una segunda familia. Si
   * algún día se le pone otra, se cambia acá y en un solo lugar. */
  --h-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --h-font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  --h-font-display: var(--h-font-sans);

  /*
   * Tamaños de texto
   *
   * `xs` y `sm` subieron el 6/8 (11 → 12 y 12.5 → 13.5). No es preferencia:
   * el cuerpo de TODAS las tablas del sistema usa `sm` y las líneas
   * secundarias de cada celda usan `xs`, así que la pantalla de profesionales
   * —y las de catálogos, determinaciones y equipos, que son iguales— tenían
   * texto de 11 y 12.5 píxeles. Matías lo dijo así: "la letra de la tabla es
   * muy chiquita, prácticamente no se ve". Once píxeles está por debajo de
   * cualquier mínimo legible, y estas pantallas se miran ocho horas por día.
   *
   * Se sube el PISO acá y no tabla por tabla, para que suba parejo en todo el
   * sistema en vez de quedar una pantalla legible al lado de otra que no.
   */
  --h-text-xs:   12px;
  --h-text-sm:   13.5px;
  --h-text-base: 14px;
  --h-text-md:   15px;
  --h-text-lg:   18px;
  --h-text-xl:   22px;
  --h-text-2xl:  28px;
  --h-text-3xl:  36px;

  /* Pesos tipográficos */
  --h-weight-regular: 400;
  --h-weight-medium:  500;
  --h-weight-semibold:600;
  --h-weight-bold:    700;

  /* Espaciado (escala de 4px) */
  --h-space-1:  4px;
  --h-space-2:  8px;
  --h-space-3:  12px;
  --h-space-4:  16px;
  --h-space-5:  20px;
  --h-space-6:  24px;
  --h-space-8:  32px;
  --h-space-10: 40px;
  --h-space-12: 48px;
  --h-space-16: 64px;

  /* Bordes redondeados */
  /* Radios. Subidos un punto (10->12, 14->16) en la revisión de diseño del
     2026-07-19: es lo que más "actualiza" el aspecto sin tocar la densidad de
     información ni sumar color. El chico queda igual: en un chip o un input
     de 6px ya se lee redondeado. */
  --h-radius-sm:   6px;
  --h-radius-md:   12px;
  --h-radius-lg:   16px;
  --h-radius-xl:   20px;
  --h-radius-pill: 9999px;

  /* Layout */
  --h-sidebar-width:    240px;
  --h-topbar-height:    56px;
  --h-content-max:      1600px;
  --h-content-padding:  40px;

  /* Ritmo semántico (alias de --h-space-*) — usar estos en layouts de página
   * en lugar de tokens crudos. Garantiza ritmo coherente entre vistas.
   * Doc: docs/AUDIT-2026-05-15-visual-headers.md §4.1
   * Doc: docs/AUDIT-DESIGN-2026-05-20.md §4.2 (sprint 2 — spacing system) */
  /* 27/8 — Matías, prioridad, sobre producción: "el encabezado se come
   * media pantalla en TODAS las páginas [...] mucho aire, poca
   * información visible". Bajados un escalón (24→16, 20→12): sigue
   * habiendo aire, pero no tanto como para perder media pantalla en
   * título+meta antes de que arranque el contenido. */
  --h-page-pad-y:       var(--h-space-4);  /* 16 (antes 24) — padding vertical page-content */
  --h-header-pad-top:   var(--h-space-4);  /* 16 (antes 24) — padding top de page-header */
  --h-header-pad-bot:   var(--h-space-3);  /* 12 (antes 20) — padding bottom de page-header */

  /* Ritmo vertical entre bloques (audit sprint 2 §4.2):
   * - GAP-SECTION: separa secciones grandes (KPIs ↔ tabla, hero ↔ ctas)
   * - GAP-BLOCK:   separa cards / sub-secciones dentro de una seccion
   * - GAP-CLUSTER: separa elementos agrupados (icon+text, 2 botones juntos)
   * - GAP-ELEMENT: separa label/value, line-height extra */
  --h-gap-section:      var(--h-space-8);  /* 32 */
  --h-gap-block:        var(--h-space-6);  /* 24 */
  --h-section-gap:      var(--h-space-6);  /* 24 (alias legacy — sigue valido) */
  --h-gap-cluster:      var(--h-space-3);  /* 12 */
  --h-cluster-gap:      var(--h-space-2);  /* 8  (alias legacy) */
  --h-gap-element:      var(--h-space-2);  /* 8 */

  /* Contextual Patient Bar (Ola A.1, CPB)
   * Banda fija con datos del paciente activo en vistas operativas.
   * Doc: docs/redesign/observaciones-tour-2026-05-18-header-research.md */
  --h-cpb-bg:           var(--h-surface);
  --h-cpb-border:       var(--h-hairline);
  --h-cpb-text:         var(--h-ink);
  --h-cpb-text-soft:    var(--h-ink-soft);
  --h-cpb-height:       56px;
  --h-cpb-alert-red:        var(--h-danger);
  --h-cpb-alert-red-soft:   var(--h-danger-soft);
  --h-cpb-alert-yellow:     var(--h-warn);
  --h-cpb-alert-yellow-soft: var(--h-warn-soft);

  /* Transiciones — NOMBRES VIEJOS, ya no son una escala aparte.
   *
   * Eran 100/150/250ms con `ease`, o sea una SEGUNDA escala compitiendo con la
   * de arriba: dos elementos vecinos, los dos "correctos", se movian distinto.
   * Ahora apuntan a la escala unica, asi que los 48 lugares que ya los usaban
   * se alinearon sin tocar ni una linea. Para codigo nuevo usar los `--h-mov-*`. */
  --h-transition-fast:   var(--h-mov-rapido);
  --h-transition-base:   var(--h-mov-medio);
  --h-transition-slow:   var(--h-mov-lento);

  /* Z-index */
  --h-z-base:    0;
  --h-z-raised:  10;
  --h-z-dropdown:100;
  --h-z-modal:   200;
  --h-z-toast:   300;
  --h-z-tooltip: 400;

  /* Aliases de compatibilidad — tokens que varias páginas usan sin sufijo pero
   * que no existían: quedaban vacíos (bordes transparentes, fondos rotos en modo
   * oscuro). Resuelven lazy al valor del tema activo. Fix auditoría 2026-07-04 #7 */
  --h-border:       var(--h-hairline);
  --h-radius:       var(--h-radius-md);
  --h-surface-alt:  var(--h-nest);
  --h-surface-1:    var(--h-surface);
  --h-surface-2:    var(--h-nest);

  /* ── Las cuatro capas de una tarjeta con tabla (Matías, 26/9, captura 46:
   * «los colores de fondo te quedaron todos iguales») ────────────────────
   * Hasta hoy el encabezado de la tarjeta, el encabezado de la tabla y la
   * cebra usaban los tres `--h-nest`, y la página `--h-bg` es casi lo mismo:
   * cuatro cremas iguales, nada se distingue. Escalera de afuera hacia
   * adentro, cada capa un escalón más clara que la anterior:
   *   página (--h-bg)  >  encabezado de la tarjeta  >  encabezado de la
   *   tabla  >  cebra (nest al 40 %)  >  cuerpo (--h-surface).
   * Los dos encabezados llevan la marca, en dos intensidades: un 9 % del
   * color de la apariencia (naranja en Ocaso, azul en Nube…) sobre blanco el
   * de la tarjeta y un 4 % el de la tabla. Antes el de la tabla era el nido
   * (--h-nest, beige) y Matías lo vio el 27/9 con la cebra recién puesta:
   * «me gustó cómo quedó, el único que desentona es el de la fila del
   * encabezado». Era el único escalón de otro tono.
   * Se calculan con color-mix, así cada apariencia y el modo oscuro los
   * tienen sin definirlos uno por uno. */
  --h-cabecera-tarjeta: color-mix(in srgb, var(--h-brand-primary) 9%, var(--h-surface));
  --h-cabecera-tabla:   color-mix(in srgb, var(--h-brand-primary) 4%, var(--h-surface));
  --h-cebra:            color-mix(in srgb, var(--h-nest) 40%, transparent);

  /* Overlay de modales — un único valor canónico (warm dark). Fix auditoría #3 */
  --h-modal-overlay-bg: color-mix(in srgb, var(--h-velo) 55%, transparent);

  /* Colores de dominio (imagenología + triage) — antes hardcodeados en 6 archivos
   * sin token, rotos en modo oscuro. Fix auditoría 2026-07-04 #6 */
  --h-imagen:          #8B5CB8;
  --h-imagen-soft:     #EFE4F5;
  --h-tubo-amarillo:      #8B6914;
  --h-tubo-amarillo-soft: #FFF7CD;
  --h-tubo-celeste:       #1F6F9C;
  --h-tubo-celeste-soft:  #DCEDF7;
  /* Color FÍSICO de la tapa del tubo — para el punto de color en listas de
   * preanalítica. No son colores de marca: representan el tubo real que el
   * técnico tiene en la mano (rojo=coagulación seca, violeta=EDTA hemograma,
   * celeste=citrato, verde=heparina, gris=fluoruro, amarillo=gel/SST). Ola A. */
  --h-tubo-cap-rojo:         #D4443A;
  --h-tubo-cap-amarillo:     #E0A82E;
  --h-tubo-cap-celeste:      #4EA8E0;
  --h-tubo-cap-azul:         #3B72C4;
  --h-tubo-cap-violeta:      #9B6FD4;
  --h-tubo-cap-verde:        #2FA36B;
  --h-tubo-cap-gris:         #8A8F98;
  --h-tubo-cap-transparente: #CBD2DC;
  --h-tubo-cap-frasco:       #E6C34D;
  --h-tubo-cap-naranja:      #C2600E;   /* trombina / RST */
  --h-tubo-cap-marron:       #8C6F4F;
  --h-tubo-cap-rosa:         #C97BA8;
  --h-tubo-cap-negro:        #454B54;

  /* Sectores del laboratorio. Son CATEGORÍAS, no estados: el color no dice
   * "esto está mal", dice "esto es microbiología". Por eso son tonos fijos y
   * no derivados de la paleta —si siguieran a la marca, dos sectores se
   * volverían el mismo color al cambiar de tema—. Los que ya tenían un token
   * equivalente lo reusan (química → warn, inmunología → info, endocrino → ok);
   * acá van los dos que no lo tenían y estaban escritos a mano en
   * `styles/orden-nueva.css`. */
  --h-sector-micro:       #A85A0B;
  --h-sector-micro-soft:  #FCE7CD;
  --h-sector-parasito:      #7A4A2A;
  --h-sector-parasito-soft: #F5E6D8;

  /* Acentos de las secciones de Configuración. Misma lógica que los sectores:
   * son categorías (general, administración, médico, laboratorio, comercial,
   * seguridad, personal, catálogo), no estados. Vivían como
   * `--setup-accent-*` adentro de `styles/setup.css`, o sea ocho colores a
   * mano en una hoja de pantalla. */
  --h-setup-general:   #3b82f6;
  --h-setup-admin:     #f97316;
  --h-setup-medico:    #10b981;
  --h-setup-lab:       #8b5cf6;
  --h-setup-comercial: #f59e0b;
  --h-setup-seguridad: #ef4444;
  --h-setup-personal:  #6366f1;
  --h-setup-catalogo:  #06b6d4;

  /* ── El papel ─────────────────────────────────────────────────────────
   * Una planilla impresa, una etiqueta, una hoja de trabajo: eso sale por una
   * impresora, sobre papel blanco, y NO sigue el tema — si la pantalla está en
   * oscuro, el papel igual es blanco. Por eso estos tokens son fijos a
   * propósito, y por eso van aparte de `--h-ink`/`--h-surface`, que sí giran.
   *
   * Existen porque hoy cada hoja de impresión inventaba sus grises: entre las
   * cinco había #444, #555, #666, #777, #888, #999, #ccc, #e5e7eb, #f2f2f2,
   * #f4f4f4 y #f5f5f5 — once grises para tres roles. */
  --h-papel:            #FFFFFF;
  --h-papel-nest:       #F2F2F2;   /* encabezado de tabla, franja */
  --h-papel-tinta:      #1C1F24;   /* el texto principal */
  --h-papel-tinta-soft: #555555;   /* subtítulos, metadatos */
  --h-papel-tinta-faint:#888888;   /* notas al pie, vacíos */
  --h-papel-linea:      #CCCCCC;   /* filetes y bordes de celda */
  /* Triage: se usan como texto sobre blanco. Cuatro de los cinco no llegaban
   * al mínimo de 4.5:1 — el amarillo tenía un comentario que decía "oscurecido
   * para AA" pero se había quedado en 2.94:1, o sea que el arreglo anterior no
   * alcanzó. Recalculados con el medidor (tools, auditoría 2026-07-19). */
  --h-triage-rojo:     #dc2626;  /* 4.83:1, ya cumplía */
  --h-triage-naranja:  #CA4C0A;  /* 3.56 -> 4.62:1 */
  --h-triage-amarillo: #9D6B03;  /* 2.94 -> 4.63:1 */
  --h-triage-verde:    #12863D;  /* 3.30 -> 4.66:1 */
  --h-triage-azul:     #0B7CAF;  /* 2.77 -> 4.65:1 */

  /* ─── Dibujos que se usan como máscara ──────────────────────────
   *
   * Un icono que hace falta desde CSS y no desde el HTML (un `::before`, por
   * ejemplo, donde no hay dónde poner un `<svg>`). El color NO sale de acá: se
   * pinta con `background-color` a través de `mask`, así sigue saliendo de un
   * token y no queda cocido adentro del data URI —que es lo que les pasa al
   * chevron del select y a la lupa del buscador (input.css), anteriores a la
   * regla 5: tienen el gris en hex y no cambian en tema oscuro.
   *
   * El `stroke='%23000'` de adentro NO es un color hardcodeado: `mask` mira
   * el canal ALFA, no el tono. Negro sólido = alfa 1 = "acá se pinta". Ponerle
   * un token no haría nada; cambiarlo por transparente borraría el icono.
   *
   * Uso:
   *   background-color: currentColor;
   *   -webkit-mask: var(--h-icono-alerta) center / contain no-repeat;
   *           mask: var(--h-icono-alerta) center / contain no-repeat;
   *
   * Es el mismo triángulo que dibuja `.alert-icon` en alert-banner.css: el
   * aviso chico de un campo y el aviso grande de la pantalla tienen que ser
   * el mismo dibujo, no dos parecidos. */
  --h-icono-alerta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* ─── Modo oscuro ──────────────────────────────────────────────── */
[data-mode="dark"] {
  /* El otro lado de lo mismo: acá el almanaque salía BLANCO sobre la pantalla
   * oscura, y el iconito del calendario casi negro sobre el campo oscuro — en
   * la mesada se veía como una mancha. Verificado con captura antes y después
   * del campo de fecha. */
  color-scheme: dark;

  /* Píxel apagado (Matías, 1/10): «el modo oscuro tiene que apuntar a ser el
   * píxel apagado; se usa de noche, y si le ponemos un color da brillo igual».
   * El fondo de la pantalla es negro puro en TODAS las paletas y las tarjetas
   * son un negro apenas levantado: el borde fino (hairline) es lo que las
   * separa, no un fondo de color. Antes el fondo era un marrón tostado
   * (#14110E) y las tarjetas un #1F1B17; en Orquídea, un vino que se notaba. */
  --h-bg:          #000000;
  --h-surface:     #0E0D0C;
  --h-nest:        #171513;
  --h-hairline:    #2D2A26;
  --h-border-soft: #3E3935;
  /* La letra del botón principal. En claro es blanco sobre un acento oscuro;
   * en oscuro TODOS los acentos son claros (tienen que leerse sobre negro),
   * así que el blanco quedaba en 2,5–3:1 encima. Va la tinta del fondo. */
  --h-brand-primary-text: #0E0D0C;
  /* Las cabeceras de tarjeta y de tabla se tiñen con el acento. En claro el
   * acento es oscuro y el 9% apenas se nota; en oscuro el acento es claro y
   * el mismo 9% daba un vino (#22141C en Orquídea) sobre el negro. A la mitad. */
  --h-cabecera-tarjeta: color-mix(in srgb, var(--h-brand-primary) 5%, var(--h-surface));
  --h-cabecera-tabla:   color-mix(in srgb, var(--h-brand-primary) 2%, var(--h-surface));

  /* Letra y bordes del oscuro (Matías 1/10, tarea 4916: «algo en el contraste
   * me produce dolor a la vista»). Medido: la letra estaba a 16:1 sobre la
   * tarjeta y los bordes a 1,2:1. Letra casi blanca sobre negro «sangra» (se
   * ve con halo, más en negrita) y los bordes no se veían: el ojo buscaba
   * dónde termina cada tarjeta. Ahora, en las doce paletas, la letra a 13:1
   * (sigue muy por encima del 7:1 más exigente) y los bordes a 1,35 y 1,7. */
  --h-ink:         #D8D3C6;
  --h-ink-soft:    #B0A998;
  /* La cebra de las tablas (27/9): el 40% del nido oscuro sobre la superficie
     oscura no se distinguía en la captura. Acá aclara apenas con la tinta. */
  --h-cebra:       color-mix(in srgb, var(--h-ink) 6%, transparent);
  /* Subidos el 22/8: daban 4,24:1 y 2,35:1 sobre el fondo oscuro, por debajo
     del mínimo (4,5 el texto normal, 3 el auxiliar y los íconos). Es el valor
     más chico que llega — el tono no cambia, sólo deja de perderse. */
  --h-muted:       #837C6F;
  --h-faint:       #656059;

  --h-brand-primary:       #8AA8DC;
  --h-brand-primary-hover: #A4BDE5;
  --h-brand-primary-soft:  #283649;
  --h-brand-primary-soft-hover: #34445A;

  --h-accent-ai:      #D49E83;
  --h-accent-ai-soft: #3E2D24;

  --h-ok:         #8AB39A;
  --h-ok-soft:    #2A3A30;
  --h-ok-soft-hover: #364B3D;
  /* En oscuro no hay que oscurecer nada para que se lea: el amarillo del logo
   * va tal cual y queda en 6.71:1 sobre su fondo (antes 5.45 con un beige
   * apagado). Es el único tema donde el amarillo puede ser amarillo del todo. */
  --h-warn:       #E9B949;
  --h-warn-soft:  #3D3424;
  --h-warn-soft-hover: #4A422F;
  /* Aurora en oscuro: los mismos cuatro tonos, apagados al nivel de los
   * -soft oscuros, para que se insinúen sin aclarar la pantalla. */
  --h-aurora-salmon:   #3A2A25;
  --h-aurora-lavanda:  #2D2A3B;
  --h-aurora-salvia:   #24312A;
  --h-aurora-amarillo: #383122;
  --h-aurora-borde:    #3A3631;
  --h-icono-desplegable: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --h-icono-lupa: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --h-warn-vivo:  #F0C766;
  --h-danger:     #D78B88;  /* aclarado: 4.29 -> 4.67:1 sobre danger-soft */
  --h-danger-soft:#4A2D2B;
  --h-info:       #8AA8C9;
  --h-info-soft:  #2A3540;

  /* Acá se ve por qué el token existe: los cuatro estados de arriba son
   * CLAROS en este modo, así que la tinta que va encima tiene que ser oscura.
   * En modo claro este mismo token es blanco. Un `#fff` escrito a mano no
   * puede hacer las dos cosas — y en oscuro deja 1.83:1 sobre el amarillo. */
  --h-sobre-estado: #0E0D0C;

  --h-tubo-amarillo:      #E0C673;
  --h-tubo-amarillo-soft: #3D3424;
  --h-tubo-celeste:       #8AB8D4;
  --h-tubo-celeste-soft:  #253742;
  /* Color físico de tapa — versión un punto más brillante para fondo oscuro. */
  --h-tubo-cap-rojo:         #E85C51;
  --h-tubo-cap-amarillo:     #EBBB4A;
  --h-tubo-cap-celeste:      #63BAF0;
  --h-tubo-cap-azul:         #5A8FE0;
  --h-tubo-cap-violeta:      #B088E8;
  --h-tubo-cap-verde:        #45BD82;
  --h-tubo-cap-gris:         #A2A8B2;
  --h-tubo-cap-transparente: #6B7280;
  --h-tubo-cap-frasco:       #EBCF63;
  --h-tubo-cap-naranja:      #E8944A;
  --h-tubo-cap-marron:       #B08E68;
  --h-tubo-cap-rosa:         #E29AC5;
  --h-tubo-cap-negro:        #6E7683;

  --h-shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --h-shadow-md: 0 4px 12px rgba(0,0,0,0.50);
  --h-shadow-lg: 0 12px 32px rgba(0,0,0,0.70);
}

/* ─── Reset base ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--h-font-sans);
  font-size: var(--h-text-base);
  line-height: 1.5;
  color: var(--h-ink);
  background: var(--h-bg);
  /* Toque distintivo por tema (2026-07-24): florcitas de Primavera, escarcha
     de Invierno, resplandor de Ocaso, horizonte de Alba, nubes de Nube.
     Cada tema define su --h-bg-decor; sin tema queda en nada.
     25/8 — se suman --h-bg-decor-position/-size/-repeat, con el mismo
     fallback que ya tenía el comportamiento de siempre (posición 0 0,
     tamaño auto, repetición SÍ): los siete temas que no los definen quedan
     exactamente igual que antes. Sólo Ocaso los usa por ahora, para poder
     tener VARIAS motivos en distintas esquinas sin que se repitan como
     tapiz (ver su bloque, más abajo). */
  background-image: var(--h-bg-decor);
  background-position: var(--h-bg-decor-position, 0 0);
  background-size: var(--h-bg-decor-size, auto);
  background-repeat: var(--h-bg-decor-repeat, repeat);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── El logo, no una ilustración de fondo (encargo 4636-B, 26/9) ───────────
 *
 * Hasta acá cada tema traía SU ilustración grande (la célula con rayos de
 * Ocaso, la orquídea con el tallo en doble hélice, el copo de Invierno...).
 * Matías, 26/9, mirando Laboratorio: «las imágenes de fondo de las
 * apariencias: quitalas. Dejá abajo el loguito transparente de Hélix» — un
 * solo logo chico, igual en las ocho apariencias, no un dibujo distinto por
 * tema. Las ilustraciones viejas (`design-system/fondos/*.svg`) ya no se
 * referencian desde acá; ningún tema redefine `--h-bg-ilustracion`, así que
 * TODOS caen en este único valor por omisión.
 *
 * Es el símbolo solo (`assets/marca/helix-simbolo.svg`), sin la palabra
 * "Lab": ya viene con fondo transparente, así que no hace falta el
 * `mix-blend-mode` que usaba la ilustración vieja para borrar su rectángulo
 * blanco. Chico, abajo a la derecha, bien apagado — es una marca de agua,
 * no una decoración que compita con la tabla.
 *
 * `z-index: -1` la manda detrás de todo el contenido y `pointer-events: none`
 * hace que no se pueda clickear: es decoración, no interfaz. `position: fixed`
 * para que no se mueva al scrollear, igual que el `background-attachment` de
 * arriba. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--h-bg-ilustracion, url("../assets/marca/helix-simbolo.svg?v=11cb76dc"));
  background-repeat: no-repeat;
  background-position: var(--h-bg-ilustracion-position, right 80px bottom 80px);
  background-size: var(--h-bg-ilustracion-size, 48px auto);
  opacity: var(--h-bg-ilustracion-opacity, .10);
}
/* 13/10, Matías: «la MITAD de tamaño y con más margen abajo y a la derecha,
 * que no quede pegado al borde ni encima del pie». Medía 96 px de ancho
 * (141 de alto: el símbolo es 209×308) a 20 px de cada borde, y en
 * Laboratorio y el Mostrador se metía debajo de la barra de teclas del pie
 * (que ocupa los últimos ~48 px). Ahora 48 px de ancho, a 32 px del costado y
 * 64 px de abajo: queda por encima del pie, con aire, en claro y en oscuro.
 * 15/10, Matías: «al logo dale más margen desde la derecha, así queda
 * equidistante»: 80 px del costado, los mismos que de abajo (con 64 tocaba el
 * pie de Laboratorio a 1366, que ahora lleva la leyenda y baja en dos líneas).
 * Lo cuida `el-logo-de-fondo-es-chico-y-con-margen.test.js`. */

/* Una pantalla abierta dentro de otra (`html.es-embebido`, la pone
 * embebido.js) no dibuja su propio logo de fondo: el de la pantalla de
 * afuera ya está en el mismo rincón y se veían dos (Matías 28/9, con la
 * captura de Derivación · Qualium adentro de Laboratorio). */
html.es-embebido body::before { content: none; }

/* Las pantallas de la sala que son del cliente (televisor de turnos y tótem,
 * `html.pantalla-del-cliente`) no llevan la marca de agua de Hélix: Matías
 * 23/10, «no deben tener el logo de Hélix sino el diseño y logo del cliente». */
html.pantalla-del-cliente body::before { content: none; }

/* En pantallas chicas el logo se corre un poco más cerca del borde (y también
 * a la mitad, 13/10). */
@media (max-width: 720px) {
  body::before {
    background-position: var(--h-bg-ilustracion-position-movil, right 16px bottom 24px);
    background-size: var(--h-bg-ilustracion-size-movil, 36px auto);
    opacity: var(--h-bg-ilustracion-opacity-movil, .10);
  }
}

/* El panel desplegable de la derecha (.hx-drawer, 322px) se dibuja ENCIMA de
 * la ilustración y la cortaba por la mitad — captura de Matías del 28/8, el
 * sol guillotinado: «que el margen se amolde al desplegable de la columna
 * derecha». Con el panel abierto, la capa termina donde empieza el panel. */
body:has(.hx-drawer.open)::before {
  right: 322px;
}

/* Lo mismo con el rail del Copiloto de las páginas que lo tienen propio
 * (recepción, laboratorio): es una COLUMNA de la grilla con fondo opaco, no
 * un panel flotante, así que también tapaba la ilustración — captura de
 * Matías del 29/8 con el copo de Invierno guillotinado por el Copiloto:
 * «mirá cómo se tapa la imagen de los temas, esto es lo que te pedí ayer».
 * Cerrado mide 60px (la tirita del botón ✦); abierto, 322px. */
body:has(.hx-body > .hx-rail)::before {
  right: 60px;
}
body:has(.hx-body.rail-open)::before {
  right: 322px;
}

/* En el teléfono el rail directamente no existe (display:none a ≤920px en
 * workspace-shell.css): la ilustración vuelve a la esquina. */
@media (max-width: 920px) {
  body:has(.hx-body > .hx-rail)::before,
  body:has(.hx-body.rail-open)::before {
    right: 0;
  }
}

/* Modo oscuro: el logo ya es un SVG a color con fondo transparente (no una
 * línea que dependa de invertirse para verse), así que alcanza con un poco
 * más de opacidad — sobre fondo oscuro un logo muy tenue directamente no se
 * distingue. */
:root[data-mode="dark"] body::before {
  opacity: .14;
}

/* Quien pidió menos animación/estímulo tampoco quiere un dibujo detrás. */
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .06; }
}

a {
  color: var(--h-brand-primary-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}


/* Foco visible accesible — UX audit #7 */
/* Foco: el contorno solo se pierde en tablas densas, donde hay muchos bordes
 * compitiendo. Se le suma un halo del color suave de marca para que el ojo lo
 * encuentre sin buscar. No rompe la regla de "color sólo cuando significa
 * algo": el foco ES funcional — dice dónde vas a escribir. */
:focus-visible {
  outline: 2px solid var(--h-brand-primary);
  outline-offset: 2px;
  border-radius: var(--h-radius-sm);
  box-shadow: 0 0 0 4px var(--h-brand-primary-soft);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}

/* ─── Color por área (multi-servicio, sprint 2 2026-05-17) ────────
 * Cada sección del sidebar tiene un color de área. CTAs siguen
 * usando --h-primary (coral). El color de área va en dots, active
 * state y tabs de Setup. */
:root {
  --h-area-operacion:        #6B7280;
  --h-area-operacion-soft:   #F3F4F6;
  --h-area-operacion-ink:    #1F2937;

  --h-area-medico:           #6B8DC9;
  --h-area-medico-soft:      #EEF2FA;
  --h-area-medico-ink:       #2D4A7B;

  --h-area-lab:              #8E72C9;
  --h-area-lab-soft:         #F1ECFA;
  --h-area-lab-ink:          #4D3D7B;

  --h-area-imagen:           #6BC9B8;
  --h-area-imagen-soft:      #ECFAF7;
  --h-area-imagen-ink:       #2D7B6E;

  --h-area-backoffice:       #7BA68A;
  --h-area-backoffice-soft:  #EDF5EF;
  --h-area-backoffice-ink:   #2C5239;

  --h-area-sistema:          #E07866;
  --h-area-sistema-soft:     #FCEEEA;
  --h-area-sistema-ink:      #7A2E18;
}

/* Modo oscuro de los colores de área (Matías, 3/10, con captura): las
 * versiones «-soft» eran pasteles claros sin par oscuro, así que la fila
 * elegida de Resultados salía casi blanca con el texto claro encima, ilegible.
 * En oscuro el suave es el color del área apenas mezclado con la superficie
 * (píxel apagado, sin brillo) y la tinta se aclara para leerse sobre él. */
[data-mode="dark"] {
  --h-area-operacion-soft:  color-mix(in srgb, var(--h-area-operacion) 22%, var(--h-surface));
  --h-area-operacion-ink:   color-mix(in srgb, var(--h-area-operacion) 45%, #FFFFFF);
  --h-area-medico-soft:     color-mix(in srgb, var(--h-area-medico) 22%, var(--h-surface));
  --h-area-medico-ink:      color-mix(in srgb, var(--h-area-medico) 45%, #FFFFFF);
  --h-area-lab-soft:        color-mix(in srgb, var(--h-area-lab) 22%, var(--h-surface));
  --h-area-lab-ink:         color-mix(in srgb, var(--h-area-lab) 45%, #FFFFFF);
  --h-area-imagen-soft:     color-mix(in srgb, var(--h-area-imagen) 22%, var(--h-surface));
  --h-area-imagen-ink:      color-mix(in srgb, var(--h-area-imagen) 45%, #FFFFFF);
  --h-area-backoffice-soft: color-mix(in srgb, var(--h-area-backoffice) 22%, var(--h-surface));
  --h-area-backoffice-ink:  color-mix(in srgb, var(--h-area-backoffice) 45%, #FFFFFF);
  --h-area-sistema-soft:    color-mix(in srgb, var(--h-area-sistema) 22%, var(--h-surface));
  --h-area-sistema-ink:     color-mix(in srgb, var(--h-area-sistema) 45%, #FFFFFF);
}

[data-area="operacion"]  { --h-area: var(--h-area-operacion);  --h-area-soft: var(--h-area-operacion-soft);  --h-area-ink: var(--h-area-operacion-ink); }
[data-area="medico"]     { --h-area: var(--h-area-medico);     --h-area-soft: var(--h-area-medico-soft);     --h-area-ink: var(--h-area-medico-ink); }
[data-area="lab"]        { --h-area: var(--h-area-lab);        --h-area-soft: var(--h-area-lab-soft);        --h-area-ink: var(--h-area-lab-ink); }
[data-area="imagen"]     { --h-area: var(--h-area-imagen);     --h-area-soft: var(--h-area-imagen-soft);     --h-area-ink: var(--h-area-imagen-ink); }
[data-area="backoffice"] { --h-area: var(--h-area-backoffice); --h-area-soft: var(--h-area-backoffice-soft); --h-area-ink: var(--h-area-backoffice-ink); }
[data-area="sistema"]    { --h-area: var(--h-area-sistema);    --h-area-soft: var(--h-area-sistema-soft);    --h-area-ink: var(--h-area-sistema-ink); }

/* Print: ocultar sidebar y toolbar al imprimir — UX #15 */
@media print {
  .sidebar, .toolbar, .modal-overlay, .toast-stack { display: none !important; }
  .main { width: 100% !important; }
  .app { display: block !important; }
  .page-header, .card { box-shadow: none !important; border: 1px solid #ddd; }
}


/* ─── Densidad por data-density (Tier E.3) ──────────────────────── */
[data-density="compact"] {
  --h-density-row-h:     32px;
  --h-density-row-pad-y: 4px;
  --h-density-input-pad: 4px var(--h-space-2);
}
[data-density="comfortable"] {
  --h-density-row-h:     40px;
  --h-density-row-pad-y: var(--h-space-2);
  --h-density-input-pad: var(--h-space-2) var(--h-space-3);
}
[data-density="cozy"] {
  --h-density-row-h:     48px;
  --h-density-row-pad-y: var(--h-space-3);
  --h-density-input-pad: var(--h-space-3) var(--h-space-4);
}

/* ─── prefers-reduced-motion: respetar preferencia del SO ──────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Breakpoints (Tier E.1, 2026-05-26) ─────────────────────────── */
:root {
  --h-bp-mobile:   480px;
  --h-bp-tablet:   768px;
  --h-bp-desktop:  1100px;
  --h-bp-wide:     1440px;
  --h-bp-ultra:    1920px;

  /* Aca vivia una TERCERA escala de movimiento (`--h-motion-emphasized`,
   * `-standard`, `-reduced`: 300/200/100ms con tres curvas propias). Se borro
   * el 12/8 porque en toda la aplicacion no la usaba NADIE — ni una linea.
   * Un juego de tokens sin usar no es inocuo: el proximo que abra el archivo
   * ve cuatro escalas legitimas y elige cualquiera, y ahi la pantalla nueva
   * vuelve a moverse distinto de la de al lado. El latido del esqueleto, que
   * si es un ritmo real y distinto, quedo como `--h-dur-pulso` arriba. */

  /* Line-height tokens (consistencia) */
  --h-lh-tight:   1.2;
  --h-lh-snug:    1.35;
  --h-lh-normal:  1.5;
  --h-lh-relaxed: 1.65;

  /* Default densidad (comfortable) — overrideable con [data-density="..."] */
  --h-density-row-h:     40px;
  --h-density-row-pad-y: var(--h-space-2);
  --h-density-input-pad: var(--h-space-2) var(--h-space-3);
}

/* ─── Paletas brand seleccionables (Apariencia, 2026-05-27) ──────────
 * Aplicar al root con: <html data-brand-color="coral|blue|green|teal|purple|slate">
 * Cada paleta override los tokens --h-brand-primary*.
 *
 * OJO con la especificidad: theme.js SIEMPRE escribe data-brand-color en el
 * root, así que este bloque le gana a los tokens de :root de arriba. Cualquier
 * arreglo de contraste hecho allá hay que replicarlo acá o queda pisado.
 *
 * Decía "WCAG AA verificado" pero no lo estaba (auditoría 2026-07-19): con
 * texto blanco encima daban coral 2.98, green 2.54 y teal 3.68, contra un
 * mínimo de 4.5. Recalculados con tools/verificador/contraste.py.
 */
/* ─── Temas: cada paleta tiñe TAMBIÉN los fondos y neutros ───────────
 * (2026-07-23, pedido de Matías). Antes un tema sólo cambiaba el botón
 * primario y el fondo crema quedaba igual para todos → "parecía sólo un
 * cambio de color". Ahora cada tema arrastra su atmósfera: el fondo, las
 * líneas, los inputs y el botón secundario toman el matiz del acento, como
 * hace Aurora. En claro las tarjetas (--h-surface) quedan blancas para no
 * ensuciar; el ambiente lo dan bg/nest/hairline/border. Contraste: el texto
 * (ink casi negro) sobre estos fondos casi blancos supera AA con margen.
 * Coral es el default cálido — no redefine neutros (usa el :root base). */
/* ─── Los 4 colores de las hélices del logo HÉLIX + Aurora ───────────
 * (2026-07-23, pedido de Matías). Cada tema = una hebra del logo, con nombre
 * de estación/momento del día. Colores de PRIMERA PASADA en línea con Aurora
 * (atmósfera completa: fondo + neutros + acento) — se afinan cuando cerremos
 * la paleta exacta del rediseño. Todos con texto blanco encima del primario a
 * ≥4.5:1 (AA). Se removieron púrpura, teal y slate; los ids viejos se remapean
 * en theme.js (LEGACY_BRAND). */
/* Ocaso — la hebra naranja: el naranja del wordmark "helix" (#E8836A), vivo y
 * alegre. Como texto ese tono no llega a AA, así que los ROLES se separan:
 * el botón primario usa el naranja del logo con tinta oscura encima
 * (--h-brand-button-*), y los textos/links de marca usan un naranja profundo
 * de atardecer (5.2:1). El gradiente es un cielo de ocaso naranja→rosa.
 *
 * F15(c) (25/8) — "UN tema completo bien hecho: paleta cálida coherente con
 * el crema FAF8F4 del sistema, fondo y detalle minimalista" (Matías, audio
 * 24/8). El acento (--h-brand-primary/button, ya con AA medido) no se toca.
 * Lo que se afloja es el fondo y los neutros: estaban mezclados casi puros
 * de la paleta (--h-nest a #FBECE2, un durazno bastante saturado para un
 * panel que se repite en toda la pantalla). Se mezclan ahora ~55% Ocaso /
 * 45% crema base (#FAF8F4, el mismo :root de todo el sistema) — sigue
 * siendo tibio y reconocible como Ocaso, pero no compite con el contenido.
 * Mismo criterio que las barras del dashboard (F15b, index.html/index.css):
 * moderar sin borrar la identidad. El resplandor decorativo baja de 0.14 a
 * 0.09 por lo mismo — "detalle minimalista" es que se insinúe, no que se
 * note. El modo oscuro de Ocaso no se tocó: queda para una pasada aparte. */
:root[data-brand-color="ocaso"],
[data-brand-color="ocaso"] {
  --h-sobre-degrade: #33150C;
  --h-brand-primary:       #B84A22;  /* texto/links/estados, 5.2:1 */
  --h-brand-primary-hover: #9C3F1E;
  --h-brand-primary-soft:  #FCE9E1;
  --h-brand-button-bg:       #E8836A;  /* el naranja de las letras del logo */
  --h-brand-button-bg-hover: #E06B4E;
  --h-brand-button-text:     #33150C;  /* 6.3:1 sobre el naranja vivo */
  --h-brand-gradient: linear-gradient(120deg, #F0A05C 0%, #E8836A 45%, #D45E86 100%);
  --h-bg: #FCF7F2; --h-nest: #F8EEE5; --h-hairline: #EFE1D3; --h-border-soft: #E0CBB9;
  /* Sol poniéndose: resplandor cálido arriba a la derecha, apenas — más
     apenas todavía que antes.
     25/8 — Matías pidió, sólo para Ocaso por ahora (para evaluar antes de
     llevarlo a los demás temas): microbiología en el fondo — organismos,
     moléculas, hexágonos de bioquímica. La condición fue explícita: NUNCA
     un tapiz repetido, dispersos en zonas concretas y vacías, opacidad muy
     baja. Por eso se suman tres capas de `background-image` —cada una un
     SVG chico, propio, en SU esquina— en vez de una que se repita: con
     `--h-bg-decor-repeat: no-repeat` ninguna de las cuatro se tila. El
     color de cada SVG no puede salir de `var(--h-brand-primary)` —un data
     URI es contenido estático, no puede leer una custom property— así que
     usa el HEX de Ocaso escrito a mano DENTRO del SVG; es el mismo criterio
     que ya usa la escarcha de Invierno más abajo, no una excepción nueva.
        1) el resplandor de siempre, sin tocar (arriba a la derecha).
        2) hexágonos de bioquímica, arriba a la izquierda — un hueco que
           hoy no tiene nada.
        3) un organismo con dos flagelos, abajo a la derecha.
        4) el "evento": dos organismos que se rozan + una cadena molecular
           suelta al lado, abajo a la izquierda.
     Contraste verificado con tools/verificador/contraste.py: esto no toca
     ni un color de texto ni un estado clínico, sólo el fondo detrás de
     tarjetas opacas — no había nada que pudiera empeorar, y el script lo
     confirmó. */
  --h-bg-decor-repeat: no-repeat;
  /* 28/8 — los tres motivos chicos (hexagonos, celulas) se fueron: con la
     ilustracion del sol puesta, Matias los vio como 'un dibujo extra de
     fondo' superpuesto. Queda solo el bano calido de arriba. */
  --h-bg-decor:
    radial-gradient(1100px 420px at 85% -60px,
      rgba(232,131,106,0.09), rgba(240,160,92,0.04) 45%, transparent 70%);
}
/* Alba — la hebra amarilla: amanecer.
 *
 * 1/10 — más amarilla. Matías: «Alba es demasiado parecido al Ocaso; darle
 * más amarillo». El acento era un ámbar (#B45309, 26°) que de reojo se leía
 * como el naranja de Ocaso. Ahora separa roles como Ocaso y Primavera: el
 * botón es el amarillo del sol con tinta oscura encima (8,8:1) y los textos y
 * links un dorado profundo que se lee sobre blanco (5,1:1). Con el acento en
 * 45° ya no choca con «atención» (ΔE 31), así que Alba deja de correr el
 * ámbar clínico en claro (ver más abajo). */
:root[data-brand-color="alba"],
[data-brand-color="alba"] {
  --h-sobre-degrade: #3B2B00;
  --h-brand-primary:       #876A00;  /* dorado profundo, 5.1:1 */
  --h-brand-primary-hover: #6E5600;
  --h-brand-primary-soft:  #FBF1C9;
  /* F15 (25/8) — Ocaso y Primavera son las únicas que definían
     --h-brand-button-bg. Las otras seis no lo tenían, así que con
     var(--h-brand-button-bg, var(--h-brand-primary)) — la muestra de
     apariencia.html Y los botones reales usan el mismo fallback — un valor
     heredado del tema que ESTUVIERA activo (Ocaso o Primavera) ganaba por
     herencia de :root y pisaba la muestra de las otras seis paletas: elegir
     Ocaso pintaba TODAS las demás con su naranja. Cada tema ahora se
     redefine a sí mismo, así ninguno depende de lo que herede. */
  /* 1/10: el botón deja de ser el mismo dorado del texto — es el sol. */
  --h-brand-button-bg:       #F5CB3A;  /* amarillo sol */
  --h-brand-button-bg-hover: #EDBC1F;
  --h-brand-button-text:     #3B2B00;  /* 8.8:1 sobre el amarillo */
  --h-brand-gradient: linear-gradient(120deg, #F7DC6F 0%, #F5CB3A 50%, #F2A93B 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso (ver su comentario largo):
     mezclado ~55/45 con el crema base del sistema en vez de casi puro de
     paleta, para no competir con el contenido. 1/10: corrido al amarillo
     (antes rosa arena). */
  --h-bg: #FCFAF2; --h-nest: #F8F3E1; --h-hairline: #EEE5C9; --h-border-soft: #E0D3AA;
  /* Primera luz en el horizonte: banda amarilla que se disuelve al bajar. */
  --h-bg-decor: linear-gradient(180deg,
                rgba(247,214,90,0.10) 0%, rgba(247,214,90,0.05) 26%,
                rgba(245,203,58,0.02) 44%, transparent 62%);
}
/* Invierno — la hebra azul: cielo frío y despejado, con escarcha apenas
 * perceptible flotando en el fondo. */
:root[data-brand-color="invierno"],
[data-brand-color="invierno"] {
  --h-brand-primary:       #2760D4;  /* azul invierno, 5.7:1 */
  --h-brand-primary-hover: #1E4FB5;
  --h-brand-primary-soft:  #DCE8FB;
  /* F15 (25/8): ver el comentario largo en el bloque de Alba. */
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #5A8DE8 0%, #2760D4 60%, #4F5FC9 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. */
  --h-bg: #F7F8F9; --h-nest: #EFF1F4; --h-hairline: #E1E5EA; --h-border-soft: #CDD3DC;
  /* 28/8 — los puntitos de escarcha se fueron. 26/9 — el copo ilustrado
     también: ver el comentario de `body::before`, más arriba. */
}
/* Primavera — la hebra verde: verdes VIVOS y alegres. Igual que Ocaso separa
 * roles: botón primario verde brote (vivo, tinta oscura encima) y textos en
 * verde hoja legible. Las florcitas del fondo se fueron el 1/10 (Matías:
 * «primavera, sacar el fondo de florcitas»): queda el verde, sin dibujo. */
:root[data-brand-color="primavera"],
[data-brand-color="primavera"] {
  --h-sobre-degrade: #0A2E18;
  --h-brand-primary:       #197A43;  /* texto/links/estados, 5.4:1 */
  --h-brand-primary-hover: #146134;
  --h-brand-primary-soft:  #D8F5E1;
  --h-brand-button-bg:       #2EC46A;  /* verde brote, vivo */
  --h-brand-button-bg-hover: #1FAD58;
  --h-brand-button-text:     #0A2E18;  /* 6.9:1 sobre el verde vivo */
  --h-brand-gradient: linear-gradient(120deg, #2EC46A 0%, #6BC93F 55%, #E9C93B 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. */
  --h-bg: #F6FAF5; --h-nest: #ECF5EC; --h-hairline: #DBEBDC; --h-border-soft: #C4DCC7;
}
/* Nube — tonos grises: cielo nublado y calmo. El tema neutro para quien no
 * quiere color. Nubes apenas insinuadas en el fondo. */
:root[data-brand-color="nube"],
[data-brand-color="nube"] {
  --h-brand-primary:       #526273;  /* gris azulado, 6.3:1 */
  --h-brand-primary-hover: #414F5E;
  --h-brand-primary-soft:  #E9EDF2;
  /* F15 (25/8): ver el comentario largo en el bloque de Alba. */
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #8B9AAB 0%, #5F6E80 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. */
  --h-bg: #F8F7F7; --h-nest: #F0F0F0; --h-hairline: #E4E5E4; --h-border-soft: #D1D2D2;
  /* 28/8 — las nubecitas repetidas se fueron: Matias las vio conviviendo
     con la nube nueva de un trazo y pidio dejar solo esa. */
}
/* Mar — teal profundo: agua, calma, precision. Pedido de Matias (12/8):
 * "quiero que tenga opcion de mas colores". Contraste medido: 6.07:1. */
:root[data-brand-color="mar"],
[data-brand-color="mar"] {
  --h-brand-primary:       #0C6B85;
  --h-brand-primary-hover: #0A5A70;
  --h-brand-primary-soft:  #DDF0F6;
  /* F15 (25/8): ver el comentario largo en el bloque de Alba. */
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #22A2C3 0%, #0C6B85 55%, #0B5E70 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. */
  --h-bg: #F6F9F8; --h-nest: #EDF3F2; --h-hairline: #DDE7E8; --h-border-soft: #C6D7D8;
  /* Olas apenas insinuadas, como las nubes de Nube. */
  --h-bg-decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='260'%3E%3Cg fill='none' stroke='%230C6B85' stroke-opacity='0.05' stroke-width='2'%3E%3Cpath d='M20 70 q20 -12 40 0 t40 0 t40 0'/%3E%3Cpath d='M210 180 q20 -12 40 0 t40 0 t40 0'/%3E%3C/g%3E%3C/svg%3E");
}
/* Orquídea — magenta profundo: calido y con caracter, sin pisarse con el rojo
 * de critico (#8E2F2C es ladrillo; esto es fucsia). Contraste medido: 6.61:1. */
:root[data-brand-color="orquidea"],
[data-brand-color="orquidea"] {
  --h-brand-primary:       #A82670;
  --h-brand-primary-hover: #8E1F5E;
  --h-brand-primary-soft:  #FAE3F0;
  /* F15 (25/8): ver el comentario largo en el bloque de Alba. */
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #D4569E 0%, #A82670 60%, #7E2B8E 100%);
  /* F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. */
  --h-bg: #FBF6F7; --h-nest: #F6EDEF; --h-hairline: #EDDFE3; --h-border-soft: #DEC8CF;
  /* 28/8 — los petalos repetidos se fueron. 26/9 — la orquídea ilustrada
     también: ver el comentario de `body::before`, más arriba. */
}
/* Aurora — dirección elegida por Matías (2026-07-21). Acento violeta del
 * medio del degradé (6.58:1 sobre blanco, AA) + el gradiente de firma
 * azul→violeta→magenta que da el aire "etéreo" pedido. El magenta vive SÓLO
 * en el gradiente decorativo, nunca como estado, para no confundirse con el
 * rojo de crítico. */
:root[data-brand-color="aurora"],
[data-brand-color="aurora"] {
  --h-brand-primary:       #6D45B8;
  --h-brand-primary-hover: #5A379B;
  --h-brand-primary-soft:  #EFEAF9;
  /* F15 (25/8): ver el comentario largo en el bloque de Alba. */
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient:      linear-gradient(120deg, #557DCE 0%, #8868C2 52%, #BD3B8F 100%);
  /* La atmósfera violeta-etérea: fondo y neutros con sesgo lila.
     F15(b) (25/8) — mismo criterio que Ocaso: mezclado ~55/45 con el crema
     base del sistema. Aurora es la dirección elegida por Matías y "etérea"
     a propósito — esto no le saca el aire, sólo lo modera; el gradiente y
     el acento (ya AA) quedan intactos. */
  --h-bg: #F9F7F9; --h-nest: #F2EEF3; --h-hairline: #E7E0E9; --h-border-soft: #D5CBDA;
}
/* ── Los cuatro del 1/10: el reloj y el almanaque ───────────────────────────
 * Matías pidió dos modos que cambian solos —el ciclo del día y las estaciones
 * del año— y «tres o cuatro temas más que tengan sentido». Los que faltaban
 * para que esos dos ciclos estén completos son justo cuatro: Mediodía y Noche
 * (el día ya tenía Alba y Ocaso) y Verano y Otoño (el año ya tenía Primavera
 * e Invierno). Doce en total. Mismo criterio de las otras ocho: acento con
 * blanco encima ≥4,5:1, ΔE ≥15 contra los cuatro estados clínicos en los dos
 * modos (lo mide tools/verificador/contraste.py) y fondo mezclado con el crema
 * de la casa para no competir con el contenido. */
/* Mediodía — el sol arriba y el cielo despejado. Separa roles como Ocaso: el
 * botón es celeste cielo con tinta azul noche encima (6,9:1) y los textos un
 * azul que se lee sobre blanco (5,5:1). El degradé va del sol al cielo. */
:root[data-brand-color="mediodia"],
[data-brand-color="mediodia"] {
  --h-sobre-degrade: #08243A;
  --h-brand-primary:       #0A6BB8;
  --h-brand-primary-hover: #08599A;
  --h-brand-primary-soft:  #DDEEFB;
  --h-brand-button-bg:       #45B4F2;
  --h-brand-button-bg-hover: #2FA6EC;
  --h-brand-button-text:     #08243A;  /* 6.9:1 sobre el celeste */
  --h-brand-gradient: linear-gradient(120deg, #F5CB3A 0%, #45B4F2 45%, #0A6BB8 100%);
  --h-bg: #F6F9FC; --h-nest: #EDF3F9; --h-hairline: #DEE8F2; --h-border-soft: #C8D7E7;
  /* Luz pareja de arriba, apenas. */
  --h-bg-decor-repeat: no-repeat;
  --h-bg-decor:
    radial-gradient(1200px 420px at 50% -80px,
      rgba(69,180,242,0.08), rgba(245,203,58,0.04) 45%, transparent 70%);
}
/* Noche — azul noche. En el ciclo del día es la hora del modo oscuro; en
 * claro queda un índigo sobrio para quien lo elija a mano. */
:root[data-brand-color="noche"],
[data-brand-color="noche"] {
  --h-brand-primary:       #343C8C;  /* índigo, 9.7:1 */
  --h-brand-primary-hover: #2A3175;
  --h-brand-primary-soft:  #E4E6F7;
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #1E2A6B 0%, #343C8C 55%, #6A5FB8 100%);
  --h-bg: #F7F7FA; --h-nest: #EFEFF5; --h-hairline: #E1E1EC; --h-border-soft: #CCCCDD;
}
/* Verano — agua y arena: botón turquesa de pileta con tinta oscura encima
 * (6,7:1), textos en un verde agua que se lee (5,3:1), fondo arena. No es Mar:
 * Mar es un petróleo profundo con letra blanca y fondo frío. */
:root[data-brand-color="verano"],
[data-brand-color="verano"] {
  --h-sobre-degrade: #05302A;
  --h-brand-primary:       #00787A;
  --h-brand-primary-hover: #006264;
  --h-brand-primary-soft:  #D6F3F1;
  --h-brand-button-bg:       #2CC5B0;
  --h-brand-button-bg-hover: #1FB3A0;
  --h-brand-button-text:     #05302A;  /* 6.7:1 sobre el turquesa */
  --h-brand-gradient: linear-gradient(120deg, #2CC5B0 0%, #33CCC4 45%, #F5CB3A 100%);
  --h-bg: #FCFAF4; --h-nest: #F6F1E4; --h-hairline: #EAE2CF; --h-border-soft: #D9CDB2;
  /* Sol de la siesta arriba a la derecha, apenas. */
  --h-bg-decor-repeat: no-repeat;
  --h-bg-decor:
    radial-gradient(1000px 400px at 88% -60px,
      rgba(245,203,58,0.08), rgba(44,197,176,0.03) 45%, transparent 70%);
}
/* Otoño — hojas secas: café con letra blanca (7,4:1) y un degradé de ocre a
 * óxido a café. Es el tema neutro cálido, como Nube es el neutro frío. */
:root[data-brand-color="otono"],
[data-brand-color="otono"] {
  --h-brand-primary:       #6F4E37;
  --h-brand-primary-hover: #5A3F2C;
  --h-brand-primary-soft:  #F3E8DF;
  --h-brand-button-bg:       var(--h-brand-primary);
  --h-brand-button-bg-hover: var(--h-brand-primary-hover);
  --h-brand-gradient: linear-gradient(120deg, #C9822F 0%, #A0522D 50%, #6F4E37 100%);
  --h-bg: #FBF8F4; --h-nest: #F4EEE6; --h-hairline: #E8DED2; --h-border-soft: #D6C7B6;
}
/* ── Aurora ya no cambia la letra, y por qué (22/8) ────────────────────────
 *
 * Hasta hoy esta paleta pisaba `--h-font-sans` con Hanken Grotesk y los
 * títulos con Space Grotesk. La idea era buena —cambiar la sensación, no sólo
 * el color— pero el efecto medido es otro: **elegir un color cambiaba la letra
 * de todo el sistema**. Dos laboratorios con la misma aplicación leían las
 * mismas tablas con tipografías distintas, y la persona que probaba paletas en
 * Apariencia veía saltar el texto de cada pantalla.
 *
 * Matías, 22/8, sobre las cinco familias que había cargadas: *«una sola
 * familia para todo»*. El color se elige; la letra es de la casa.
 *
 * Lo que se saca acá se saca también del `@import` de arriba: Figtree, Hanken
 * Grotesk y Space Grotesk ya no se descargan. Son tres pedidos menos a Google
 * Fonts en cada carga, en un sistema que se abre en la mesada con la red del
 * laboratorio.
 *
 * `--h-font-display` NO se borra: lo usan el título del subnav, el encabezado
 * del riel y los números grandes del panel de trabajo
 * (`templates/workspace-shell.css`). Borrarlo dejaría esos tres en la letra por
 * omisión del navegador —Times— sin que ningún error lo avise. Pasa a valer lo
 * mismo que la de texto, definido una vez en `:root`, así el gancho queda por
 * si algún día vuelve a hacer falta una tipografía de titulares. */

/* Dark mode + paleta brand: las paletas de arriba definen `-soft` como un
 * pastel CLARO sin variante oscura, y su especificidad (:root[attr]) le gana a
 * [data-mode="dark"] → en modo oscuro quedaba texto claro sobre fondo claro
 * (ilegible: filas seleccionadas, badges soft, chips). Acá redefinimos, para
 * cada tono, `-soft` a un tinte oscuro y `-primary` a una variante legible
 * sobre fondo oscuro. Especificidad :root[mode][brand] (0,3,0) → gana siempre. */
/* En oscuro también tiñe fondos Y texto — es donde más se nota la atmósfera.
 * Coral queda con el oscuro cálido base (no redefine neutros). El ink tintado
 * mantiene >12:1 sobre el fondo del mismo hue. */
/* Ocaso oscuro: naranja cálido luminoso sobre negro. */
:root[data-mode="dark"][data-brand-color="ocaso"]  {
  --h-brand-primary: #EC9270; --h-brand-primary-hover: #F2A587; --h-brand-primary-soft: #3D2A20;
  --h-bg: #000000; --h-surface: #110C09; --h-nest: #1B140F; --h-hairline: #312821; --h-border-soft: #45372D;
  --h-ink: #DAD2CC; --h-ink-soft: #C2B1A6; --h-muted: #8E7C70; --h-faint: #715D4E;
}
/* Alba oscuro: amarillo de primera luz sobre negro (1/10, más amarillo). */
:root[data-mode="dark"][data-brand-color="alba"]   {
  --h-brand-primary: #F0CF4A; --h-brand-primary-hover: #F5DC78; --h-brand-primary-soft: #2E2810;
  --h-brand-button-bg: #F5CB3A; --h-brand-button-bg-hover: #F7D65E; --h-brand-button-text: #3B2B00;
  --h-bg: #000000; --h-surface: #100E07; --h-nest: #1A170C; --h-hairline: #2F2A1D; --h-border-soft: #403929;
  --h-ink: #D8D4C8; --h-ink-soft: #BEB29B; --h-muted: #8A7E68; --h-faint: #6C6048;
}
/* Invierno oscuro: azul frío sobre negro. */
:root[data-mode="dark"][data-brand-color="invierno"] {
  --h-brand-primary: #6E9BF0; --h-brand-primary-hover: #8DB2F5; --h-brand-primary-soft: #22314D;
  --h-bg: #000000; --h-surface: #0A0D12; --h-nest: #12161D; --h-hairline: #242A34; --h-border-soft: #323A47;
  --h-ink: #D0D3DB; --h-ink-soft: #A7B0C2; --h-muted: #7A8399; --h-faint: #586175;
}
/* Primavera oscuro: verde vivo sobre negro. */
:root[data-mode="dark"][data-brand-color="primavera"] {
  --h-brand-primary: #35D486; --h-brand-primary-hover: #58DE9C; --h-brand-primary-soft: #16352A;
  --h-brand-button-bg: #2EC46A; --h-brand-button-bg-hover: #58DE9C; --h-brand-button-text: #0A2E18;
  --h-bg: #000000; --h-surface: #09100B; --h-nest: #111A14; --h-hairline: #222D25; --h-border-soft: #2F3D33;
  --h-ink: #CED6D0; --h-ink-soft: #A3B3A8; --h-muted: #77877D; --h-faint: #55655C;
}
/* Nube oscuro: gris sereno sobre negro. */
:root[data-mode="dark"][data-brand-color="nube"] {
  --h-brand-primary: #9FB0C2; --h-brand-primary-hover: #B4C2D1; --h-brand-primary-soft: #2A313A;
  --h-bg: #000000; --h-surface: #0C0D10; --h-nest: #141619; --h-hairline: #272A2F; --h-border-soft: #363A40;
  --h-ink: #D2D3D9; --h-ink-soft: #A8AEBC; --h-muted: #7B818F; --h-faint: #5B6272;
}
/* En modo oscuro los decorados de fondo se apagan (el ambiente lo da el tinte
 * de los neutros; puntitos/flores claras sobre fondo noche distraen).
 * Va DESPUÉS de los bloques claros para ganarles en cascada. */
:root[data-mode="dark"] { --h-bg-decor: none; }
/* Ocaso oscuro mantiene su botón vivo del logo. */
:root[data-mode="dark"][data-brand-color="ocaso"] {
  --h-brand-button-bg: #E8836A; --h-brand-button-bg-hover: #F0987F; --h-brand-button-text: #33150C;
}
/* Aurora en oscuro: violeta claro (6.7:1) + gradiente luminoso + fondos violeta
 * en las tarjetas; el fondo, negro como todos desde el 1/10. */
:root[data-mode="dark"][data-brand-color="aurora"] {
  --h-brand-primary: #A78BEF; --h-brand-primary-hover: #BCA4F7; --h-brand-primary-soft: #2A2247;
  --h-brand-gradient: linear-gradient(120deg, #5B8DEF 0%, #9B6CD8 52%, #E24FA8 100%);
  --h-bg: #000000; --h-surface: #0E0B13; --h-nest: #17121F; --h-hairline: #2D2639; --h-border-soft: #3F354F;
  --h-ink: #D5D1DD; --h-ink-soft: #ADA4C2; --h-muted: #8177A0; --h-faint: #685987;
}

/* ── Mar y Orquídea en oscuro — ESTABAN ROTAS ─────────────────────────────
 *
 * Las dos paletas del 12/8 nacieron sólo con su bloque claro, y eso no deja
 * "el modo oscuro sin terminar": deja la pantalla PARTIDA. El bloque claro de
 * una paleta se declara `:root[data-brand-color="x"]` (0,3,0 contando el
 * `:root`) y le gana al `[data-mode="dark"]` genérico (0,1,0), así que en
 * oscuro estas dos se quedaban con el FONDO CLARO de su paleta y la
 * SUPERFICIE oscura de la base: fondo blanco con tarjetas negras. Y el acento
 * —un teal profundo pensado para papel blanco— quedaba en 2,82:1 sobre el
 * fondo oscuro, cuando el mínimo legible es 4,5. Verificado en el navegador,
 * en producción, antes de tocar nada.
 *
 * O sea: las dos paletas que Matías pidió ("quiero opción de más colores") no
 * existían en el modo que la aplicación usa de verdad. El verificador ahora
 * exige que TODA paleta tenga su bloque oscuro, que es la comprobación que no
 * estaba y por eso pasó.
 *
 * Los valores no se eligieron a ojo: se derivan del tono de cada paleta con la
 * misma escalera de claridad que usan las otras seis, y se aceptó el primero
 * que cumple contraste ≥6:1 del acento sobre su superficie y ΔE ≥22 contra los
 * cuatro estados clínicos. */
/* Mar oscuro: turquesa luminoso sobre negro. */
:root[data-mode="dark"][data-brand-color="mar"] {
  --h-brand-primary: #20B6DF; --h-brand-primary-hover: #5CBCD6; --h-brand-primary-soft: #1D343A;
  --h-bg: #000000; --h-surface: #091012; --h-nest: #10191C; --h-hairline: #212C2F; --h-border-soft: #2E3E41;
  --h-ink: #D1D6D7; --h-ink-soft: #A9B8BC; --h-muted: #778C92; --h-faint: #52666B;
}
/* Orquídea oscuro: magenta claro sobre negro (1/10: el fondo vino se fue,
 * Matías lo vio «demasiado colorido» para el modo de la noche). */
:root[data-mode="dark"][data-brand-color="orquidea"] {
  --h-brand-primary: #D879AF; --h-brand-primary-hover: #E79DC7; --h-brand-primary-soft: #3A1D2D;
  --h-bg: #000000; --h-surface: #100A0D; --h-nest: #1A1015; --h-hairline: #33262D; --h-border-soft: #45343E;
  --h-ink: #D6D1D4; --h-ink-soft: #BCA9B4; --h-muted: #927786; --h-faint: #745968;
}

/* Los cuatro del 1/10 en oscuro, con el mismo negro de fondo. */
/* Mediodía oscuro: celeste sobre negro, el botón conserva el cielo. */
:root[data-mode="dark"][data-brand-color="mediodia"] {
  --h-brand-primary: #5AB8F5; --h-brand-primary-hover: #7CC8F7; --h-brand-primary-soft: #102A3D;
  --h-brand-button-bg: #45B4F2; --h-brand-button-bg-hover: #6CC4F5; --h-brand-button-text: #08243A;
  --h-bg: #000000; --h-surface: #0A0D10; --h-nest: #12171C; --h-hairline: #232A31; --h-border-soft: #323B43;
  --h-ink: #CCD4DA; --h-ink-soft: #A6B4C2; --h-muted: #7A8A99; --h-faint: #5C6B79;
}
/* Noche oscuro: luz de luna. El acento no es otro azul (Invierno y Aurora ya
 * ocupan ese lugar en oscuro): es un dorado pálido, el que menos encandila. */
:root[data-mode="dark"][data-brand-color="noche"] {
  --h-brand-primary: #E3CF8F; --h-brand-primary-hover: #EDDDA8; --h-brand-primary-soft: #2A2716;
  --h-bg: #000000; --h-surface: #0B0B12; --h-nest: #13131D; --h-hairline: #292935; --h-border-soft: #383848;
  --h-ink: #D1D1DB; --h-ink-soft: #A9A9C0; --h-muted: #7E7E99; --h-faint: #5E5E78;
}
/* Verano oscuro: turquesa sobre negro. */
:root[data-mode="dark"][data-brand-color="verano"] {
  --h-brand-primary: #33CCC4; --h-brand-primary-hover: #5CD8D1; --h-brand-primary-soft: #0F2E2C;
  --h-brand-button-bg: #2CC5B0; --h-brand-button-bg-hover: #4FD3C1; --h-brand-button-text: #05302A;
  --h-bg: #000000; --h-surface: #08100F; --h-nest: #101A19; --h-hairline: #212D2B; --h-border-soft: #2F3D3C;
  --h-ink: #CBD7D5; --h-ink-soft: #A3B8B5; --h-muted: #76908C; --h-faint: #56706C;
}
/* Otoño oscuro: caramelo sobre negro. */
:root[data-mode="dark"][data-brand-color="otono"] {
  --h-brand-primary: #C49A78; --h-brand-primary-hover: #D2AE91; --h-brand-primary-soft: #2E2219;
  --h-bg: #000000; --h-surface: #100C0A; --h-nest: #1A1411; --h-hairline: #302923; --h-border-soft: #423731;
  --h-ink: #D9D2CC; --h-ink-soft: #BFB0A4; --h-muted: #8F7E70; --h-faint: #6F5F52;
}

/* ── Oscuro: un solo negro neutro para todas las paletas (Matías, 12/10) ──
 *
 * «En modo oscuro el fondo queda demasiado fuerte: el azul me gusta, pero el
 * naranja no, el amarillo tampoco, el verde tampoco, nube tampoco… sacarle el
 * color de fondo cuando es modo oscuro, que sea sólo el negro», con alto
 * contraste para no cansar la vista. Cada paleta de arriba teñía superficie,
 * nido, bordes y letra con su tono (marrón en Ocaso, verdoso en Primavera,
 * vino en Orquídea). Desde acá, en oscuro, esos neutros son los MISMOS para
 * las doce: negro de fondo, tarjetas apenas levantadas en gris frío (el del
 * azul que le gustaba) y letra gris clara sin tinte. El color de la paleta
 * queda sólo en lo que significa: acento, botón, selección.
 *
 * Mismo selector que los bloques de arriba (0,3,0) y va DESPUÉS: gana por
 * cascada sin !important. Letra a ~13:1 sobre la tarjeta, como pidió la
 * tarea 4916 (letra casi blanca sobre negro «sangra»). */
:root[data-mode="dark"],
:root[data-mode="dark"][data-brand-color] {
  --h-bg: #000000; --h-surface: #0B0C0E; --h-nest: #131417; --h-hairline: #26282C; --h-border-soft: #36393E;
  --h-ink: #D9DBDF; --h-ink-soft: #AEB2B9; --h-muted: #80858E; --h-faint: #60656D;
}

/* ── El estado clínico se corre donde chocaba con el acento ───────────────
 *
 * Decisión de Matías (12/8): mover el color CLÍNICO, no el de marca. Alba
 * sigue siendo el ámbar del logo y Ocaso su naranja; lo que se mueve, y sólo
 * en esas paletas, es «atención» e «información».
 *
 * Por qué hacía falta: el acento y el estado estaban a ΔE 6,5 (Alba) — el
 * mismo color con otro nombre. Un chip de marca al lado de uno de alerta no se
 * distinguían de reojo, y de reojo es como se leen. La causa de la peor fue de
 * ayer mismo: al arreglar el amarillo se puso `--h-warn` en el ámbar de la
 * hebra del logo, que es exactamente lo que define Alba.
 *
 * Cada valor es el cambio MÁS CHICO que cumple las cuatro condiciones a la vez
 * —ΔE ≥22 al acento, ΔE ≥22 a los otros tres estados, ≥4,6:1 sobre su fondo
 * suave y ≥4,6:1 con la tinta que va encima—. Se buscó recorriendo el espacio
 * de color, no eligiendo a ojo: mover de más también rompe, porque un ámbar
 * que se fue al amarillo deja de leerse como «atención».
 *
 * En Alba la única salida es OSCURECER: el acento y el ámbar comparten tono
 * (26° los dos), así que no hay a dónde correrse de costado sin caer en rojo
 * —y ahí choca con «crítico»— o en amarillo —y ahí se pierde sobre el crema—.
 * El resultado sigue siendo naranja quemado saturado, no el mostaza apagado
 * que se corrigió ayer.
 *
 * 1/10: lo de Alba de arriba ya es historia — Alba pasó al amarillo (45°) y en
 * claro queda a ΔE 31 del ámbar clínico sin correr nada. */
[data-brand-color="ocaso"] { --h-warn: #945400; }   /* ΔE 22.2 · 5.39:1 */
[data-brand-color="nube"]  { --h-info: #0E6495; }   /* ΔE 22.0 · 5.38:1 */
[data-brand-color="mar"]   { --h-info: #475985; }   /* ΔE 22.0 · 5.81:1 */

/* 1/10: Alba pasó del ámbar al amarillo, así que en oscuro «atención» ya no se
 * corre al amarillo (chocaría con el acento, ΔE 12) sino al naranja: ΔE 31. */
:root[data-mode="dark"][data-brand-color="alba"] { --h-warn: #F59E42; }
:root[data-mode="dark"][data-brand-color="nube"] { --h-info: #6DA2D7; }  /* ΔE 22.1 · 4.64:1 */


/* ═══ El papel es blanco, siempre ═══════════════════════════════════════════
 *
 * Va al FINAL del archivo, y no junto al otro `@media print` de más arriba,
 * por una razón concreta: las ocho paletas redefinen los neutros del modo
 * oscuro con `:root[data-mode="dark"][data-brand-color="x"]`, que pesa más y
 * además está escrito más abajo. Un bloque de impresión puesto antes de eso no
 * gana nunca — lo probé y el texto seguía saliendo en 1,19:1.
 *
 * ── Qué rompía ────────────────────────────────────────────────────────────
 *
 * Quien trabaja en modo oscuro y aprieta imprimir —el comprobante de un turno,
 * la planilla de asistencia, la hoja de trabajo, la presentación a la obra
 * social— sacaba una hoja CASI EN BLANCO. El navegador no imprime los fondos,
 * pero el color del texto sí lo respeta, y en oscuro la tinta es un crema
 * clarísimo.
 *
 * Medido el 22/8 sobre el comprobante de turno, emulando la impresión: texto
 * rgb(232,236,237) contra papel blanco, **1,19:1**. El mínimo para leer es 4,5.
 *
 * Las cuatro pantallas de impresión declaran `data-mode="light"` en su propio
 * archivo, así que alguien ya se había dado cuenta de que esto importaba — pero
 * `theme.js` corre después y lo pisa con la preferencia guardada. Ese detalle
 * es lo que lo hacía invisible: el arreglo estaba escrito y no servía.
 *
 * Se resuelve acá y no sacando `theme.js` de esas cuatro porque el problema no
 * es de esas cuatro: es de CUALQUIER pantalla que alguien mande a imprimir.
 *
 * Los valores son los mismos del `:root` del principio. Están repetidos porque
 * CSS no tiene forma de decir «volvé al bloque de más arriba»; si se tocan los
 * de arriba hay que tocar estos, y lo comprueba
 * `backend/test/lo-que-se-imprime-se-lee.test.js`. */
@media print {
  :root,
  :root[data-mode="dark"],
  :root[data-mode="dark"][data-brand-color] {
    /* Lo mismo que la tinta, para lo que dibuja el navegador: quien trabaja en
       oscuro y manda a imprimir tiene que sacar una hoja de modo claro entera,
       y eso incluye las barras y los controles que se llegan a imprimir. */
    color-scheme: light;

    --h-bg:           #FAF8F4;
    --h-surface:      #FFFFFF;
    --h-nest:         #F4F1EB;
    --h-hairline:     #E8E4DC;
    --h-border-soft:  #D6D0C5;
    --h-ink:          #27241F;
    --h-ink-soft:     #5C574E;
    --h-muted:        #6E695E;
    --h-faint:        #8B8478;
    /* La tinta que va sobre un relleno de color vuelve a ser blanca, como en
       claro: con la del modo oscuro, un estado impreso sale ilegible. */
    --h-sobre-estado: #FFFFFF;
  }
}