/* ============================================================================ theme-dark.css — Tecsa·S3 Clínico · modo oscuro PROPIO ---------------------------------------------------------------------------- Este es el dark mode DEL TEMA NUEVO, no el del tema actual. Diferencia crítica con `tricorder`: el oscuro de tricorder es un HUD cian-espacial (#050E1A de fondo, #00E5FF de acento). No es "el tema claro invertido" — es otra marca. El plan §3.3 separa TEMA de MODO justamente por esto: `data-app-theme` elige la marca y `data-color-mode` el modo. El tema `tecsa` conserva su lógica intacta; éste da al tema clínico su propio oscuro, sin tocar tricorder. HEREDA de theme.css ---------------------------------------------------------------------------- Todas las superficies, bordes, radios, sombras, espaciado y la escala tipográfica se heredan. Este fichero re-declara SÓLO lo que depende del modo: rampa neutra, superficies, texto, marca, tintes, bordes, elevación y los pares del semáforo de riesgo. `--ui-glass-blur` pasa a un blur real aquí. En claro el glass es "sutil, casi imperceptible" (el documento lo pide así); sobre un fondo oscuro un plano translúcido sí se distingue, y sin blur queda un rectángulo gris sobre otro gris. El blur entra justo donde aporta. CONTRASTE — medido el 2026-10-06 con la fórmula de WCAG 2.x ---------------------------------------------------------------------------- #E6F0FA sobre #101B27 .......... 15.07:1 --ui-text #A9C4DE sobre #101B27 .......... 10.02:1 --ui-text-muted #78A9E8 sobre #101B27 .......... 6.71:1 --ui-info-text #AFA9EC sobre #101B27 .......... 8.04:1 --ui-accent-text #4ADE9E sobre #101B27 .......... 10.13:1 --ui-success-text #FF9A9A sobre #101B27 .......... 8.55:1 --ui-danger-text #FFC978 sobre #101B27 .......... 10.66:1 --ui-warn-text #101B27 sobre #378ADD .......... 4.84:1 texto sobre botón primario El botón primario SIGUE siendo #378ADD en oscuro (regla de marca: "se mantiene igual en modo claro y oscuro — esto da consistencia de marca"). El texto encima pasa a tinta oscura porque el blanco sobre #378ADD da 3.59:1 en ambos modos. ============================================================================ */ @layer tokens { html[data-app-theme="tecsa-clinico"][data-color-mode="dark"] { color-scheme: dark; /* ========================================================================== RAMPA NEUTRA INVERTIDA ========================================================================== Los pasos viven como primitivos --tca-d-* en tokens.css; aquí sólo se mapean a --n-*. Se invierte la ESCALA, no se copia la rampa de theme-tokens.css:154-165 — esos pasos neutros son los del tema claro histórico y no cuadrarían con los de este tema. ========================================================================== */ --n-0: var(--tca-d-0); --n-25: var(--tca-d-25); --n-50: var(--tca-d-50); --n-100: var(--tca-d-100); --n-200: var(--tca-d-200); --n-300: var(--tca-d-300); --n-400: var(--tca-d-400); --n-500: var(--tca-d-500); --n-600: var(--tca-d-600); --n-700: var(--tca-d-700); --n-800: var(--tca-d-800); --n-900: var(--tca-d-900); /* ========================================================================== SUPERFICIES ========================================================================== --ui-bg es el fondo de página y --ui-surface el de tarjetas. La diferencia tiene que notarse: una tarjeta que no se distingue del fondo hace la pantalla ilegible. 4-5 pasos de luminosidad. ========================================================================== */ --ui-bg: var(--tca-d-bg); --ui-surface: var(--tca-d-25); --ui-surface-2: var(--tca-d-50); --ui-surface-3: var(--tca-d-100); /* ========================================================================== TEXTO ========================================================================== LA TRAMPA que theme-tokens.css:64-68 documenta, y que aquí es más fácil de caer: en oscuro --ui-surface (#101B27) es OSCURO. Si algún componente de los 345 pone `color: var(--ui-surface)` creyendo que es "el color del texto" —que es lo que pasaba con los #fff— obtiene texto oscuro sobre relleno oscuro y no se ve nada. Para texto sobre relleno va SIEMPRE --ui-text-on-fill. ========================================================================== */ --ui-text: var(--tca-d-900); /* 15.07:1 sobre --ui-surface */ --ui-text-muted: var(--tca-d-600); /* 10.02:1 */ --ui-text-strong: var(--tca-d-900); /* Tinta sobre relleno — mismo criterio que en claro. */ --ui-text-on-fill: var(--tca-ink-900); --ui-text-on-primary: var(--tca-ink-900); /* Relleno de acción primaria: el mismo degradado que en claro. */ --ui-fill-primary: var(--tca-grad-primario); --ui-fill-primary-hover: var(--tca-grad-primario-hover); --ui-fill-primary-solid: var(--tca-azul-900); --ui-text-on-fill-primary: var(--tca-blanco-texto); /* ========================================================================== MARCA ========================================================================== Los VALORES de relleno no cambian (regla de marca: el botón primario es #378ADD en ambos modos). Lo que cambia es el texto que se apoya sobre ellos y el color de marca cuando se usa COMO texto. ========================================================================== */ --ui-primary: var(--tca-azul-500); --ui-primary-strong: var(--tca-azul-300); --ui-primary-hover: var(--tca-azul-300); --ui-secondary: var(--tca-azul-300); --ui-secondary-hover: var(--tca-azul-100); --ui-accent: var(--tca-lav-700); /* relleno de IA, se conserva */ --ui-accent-text: var(--tca-d-lav-txt); /* 8.04:1 como texto */ --ui-success: var(--tca-verde-500); --ui-success-text: var(--tca-d-ok); /* 10.13:1 */ --ui-warn: var(--tca-amber-700); --ui-warn-text: var(--tca-d-warn); /* 10.66:1 */ --ui-danger: var(--tca-d-danger); --ui-danger-text: var(--tca-d-danger-txt); /* 8.55:1 */ --ui-info: var(--tca-azul-500); --ui-info-text: var(--tca-d-info-txt); /* 6.71:1 */ /* ========================================================================== SEMÁFORO DE RIESGO HL7 ========================================================================== NO se re-declara. theme-tokens.css:205-222 ya lo recalibra para fondo oscuro y sus valores son el espejo de colores_riesgo.py, con contrato de contraste medido y vigilado por hce/tests/test_badge_contraste.py. Redeclararlo aquí con la paleta de marca rompería el espejo por gusto. Consecuencia asumida: en el oscuro del tema clínico el semáforo usa los colores calibrados del tema oscuro de theme-tokens.css, no una variante lavanda-azul. Es correcto — el semáforo es información clínica estandarizada (HL7 Risk Probability), no marca. Si algún día se decide que el semáforo debe seguir al tema, es un cambio consciente con su propio test de contraste, no un efecto colateral de este fichero. ========================================================================== */ /* ========================================================================== BORDES Y SUPERFICIES DE CROMO ========================================================================== */ --ui-border: var(--tca-d-200); --ui-border-soft: var(--tca-d-100); --ui-border-strong: var(--tca-d-400); /* borde funcional de campo, >3:1 sobre #101B27 */ --ui-glass-blur: var(--tca-d-glass-blur); --ui-glass-bg: var(--tca-d-glass); /* ========================================================================== ELEVACIÓN ========================================================================== En oscuro, una sombra casi invisible no separa nada: la sombra sobre un fondo oscuro es indistinguible. La separación la hace el BORDE. Se suben las elevaciones para que el flotante (modal, panel de IA) se desprenda del plano de fondo. ========================================================================== */ --ui-elev-1: var(--tca-d-elev-1); --ui-elev-2: var(--tca-d-elev-2); --ui-elev-3: var(--tca-d-elev-3); --ui-glow: var(--tca-d-glow); /* ========================================================================== TINTES ========================================================================== En claro se usan los tintes fijos de la marca. En oscuro un tinte "claro" (verde pastel, ámbar pastel) sobre fondo oscuro satura y vibra: se usa color-mix contra la superficie oscura, que da un tinte tenue del mismo color semántico. ========================================================================== */ --ui-tint-primary: color-mix(in oklab, var(--ui-primary) 18%, var(--ui-surface)); --ui-tint-primary-2: color-mix(in oklab, var(--ui-primary) 30%, var(--ui-surface)); --ui-tint-success: color-mix(in oklab, var(--tca-verde-500) 22%, var(--ui-surface)); --ui-tint-warn: color-mix(in oklab, var(--tca-amber-700) 22%, var(--ui-surface)); --ui-tint-danger: color-mix(in oklab, var(--tca-d-danger) 22%, var(--ui-surface)); --ui-tint-info: color-mix(in oklab, var(--ui-info) 18%, var(--ui-surface)); --ui-tint-accent: color-mix(in oklab, var(--ui-accent) 22%, var(--ui-surface)); /* ========================================================================== CROMO DE MARCA ========================================================================== El top-bar azul-claro y el gradiente del sidebar son de marca: en oscuro pasarían a ser los únicos elementos claros de la pantalla y desharían la coherencia. Se invierten a superficies oscuras con el matiz de marca como acento. ========================================================================== */ --tca-topbar-bg: var(--tca-d-topbar); --tca-topbar-border: var(--tca-d-200); --tca-sidebar-border: var(--tca-d-side-bd); --tca-sidebar-bg: var(--tca-d-grad-sidebar); /* El avatar mantiene su gradiente de marca — es identidad, no superficie. Con anillo blanco pasa a anillo de la superficie oscura para que se recorte contra ella (lo hace components.css vía --tca-blanco, que aquí se re-declara). */ --tca-blanco: var(--tca-d-25); --tca-agente-border: var(--tca-d-side-bd); /* ========================================================================== BANDA DE ESTADÍSTICAS DEL PIE ========================================================================== tokens.css fija la tinta y los cinco iconos para la superficie CLARA del pie. En oscuro el pie es --ui-surface-3 (#1A2A3A) y esa tinta (#101B27) quedaba a ~1.1:1: letra negra sobre fondo oscuro. Se invierten aquí, con el mismo criterio de los --ui-tint-*: tinte tenue del color semántico contra la superficie oscura y glifo en la variante legible en oscuro. */ --tca-stat-valor: var(--tca-d-900); --tca-stat-label: var(--tca-d-600); --tca-stat-pacientes-bg: color-mix(in oklab, var(--tca-verde-500) 22%, var(--ui-surface-3)); --tca-stat-pacientes-bd: color-mix(in oklab, var(--tca-verde-500) 40%, var(--ui-surface-3)); --tca-stat-pacientes-fg: var(--tca-d-ok); --tca-stat-familias-bg: color-mix(in oklab, var(--tca-azul-500) 22%, var(--ui-surface-3)); --tca-stat-familias-bd: color-mix(in oklab, var(--tca-azul-500) 40%, var(--ui-surface-3)); --tca-stat-familias-fg: var(--tca-d-info-txt); --tca-stat-riesgo-bg: color-mix(in oklab, var(--tca-d-danger) 22%, var(--ui-surface-3)); --tca-stat-riesgo-bd: color-mix(in oklab, var(--tca-d-danger) 40%, var(--ui-surface-3)); --tca-stat-riesgo-fg: var(--tca-d-danger-txt); --tca-stat-perfiles-bg: color-mix(in oklab, var(--tca-amber-700) 22%, var(--ui-surface-3)); --tca-stat-perfiles-bd: color-mix(in oklab, var(--tca-amber-700) 40%, var(--ui-surface-3)); --tca-stat-perfiles-fg: var(--tca-d-warn); --tca-stat-nuevos-bg: color-mix(in oklab, var(--tca-verde-500) 22%, var(--ui-surface-3)); --tca-stat-nuevos-bd: color-mix(in oklab, var(--tca-verde-500) 40%, var(--ui-surface-3)); --tca-stat-nuevos-fg: var(--tca-d-ok); } }