/* ============================================================================ theme.css — Tecsa·S3 Clínico · NIVEL 2: SEMÁNTICOS ---------------------------------------------------------------------------- Éste es el fichero que hace el trabajo de verdad: traduce los primitivos de tokens.css a los tokens SEMÁNTICOS que el CSS existente ya consume. Por qué así: theme-tokens.css ya define un contrato semántico completo (--ui-*, --n-*, --risk-*) y hay 335 custom properties en el repo. Todo componente que ya se pinta bien está escrito contra --ui-*. Redefiniendo --ui-* bajo un scope de tema, el CSS existente se re-tema SIN TOCAR NI UNA LÍNEA de sus reglas. Ésa es la garantía de que este trabajo no puede romper el tema actual: aquí sólo se escribe bajo `html[data-app-theme="tecsa-clinico"]`, que el tema actual nunca produce. ALCANCE ---------------------------------------------------------------------------- Se hereda de `theme-tokens.css` este bloque con la misma especificidad (0,1,0) y aparece MÁS TARDE en la cascada, luego gana para tecsa-clinico. Los otros temas no quedan afectados porque el selector no matchea. PRECEDENCIA DE CASCADA ---------------------------------------------------------------------------- base.html carga siempre: bootstrap → custom → theme-tokens → ui-components → sidebar → chrome-tricorder → footer → base-shell. {% ui_theme_stylesheet %} emite las hojas del tema al final. Es el orden deliberado: el tema nuevo gana por orden de documento, sin un solo !important. dashboard.css tiene 124 !important y es el fichero más frágil del repo; no añadimos más a esa lista. ============================================================================ */ @layer tokens { html[data-app-theme="tecsa-clinico"] { /* Declarativo, no derivado del SO: el tema de la app NO depende de prefers-color-scheme. theme-tokens.css:35-38 documenta por qué (`dark light` hacía que los controles nativos se pintaran oscuros en páginas claras). */ color-scheme: light; /* ========================================================================== RAMPA NEUTRA ========================================================================== Deriva de --tca-canvas en vez de repetir hex. custom.css:41-52 invierte esta rampa en oscuro; theme-dark.css la re-declara allí. ========================================================================== */ --n-0: var(--tca-blanco); --n-25: var(--tca-canvas-2); --n-50: var(--tca-canvas); --n-100: var(--tca-n-100); --n-200: var(--tca-linea); --n-300: var(--tca-n-300); --n-400: var(--tca-n-400); --n-500: var(--tca-n-500); --n-600: var(--tca-n-600); --n-700: var(--tca-n-700); --n-800: var(--tca-n-800); --n-900: var(--tca-ink-900); /* ========================================================================== SUPERFICIES ========================================================================== */ --ui-bg: var(--tca-canvas); --ui-surface: var(--tca-blanco); --ui-surface-2: var(--tca-canvas-2); /* dashboard.css pinta sus tarjetas con var(--dash-card-bg, #ffffff) !important y nadie definía la variable: blancas en modo oscuro. Se resuelve en , así que toma la superficie del modo activo. */ --dash-card-bg: var(--ui-surface); --dash-card-bg-2: var(--ui-surface-2); --ui-surface-3: var(--tca-canvas-3); /* ========================================================================== TEXTO ========================================================================== --ui-text #185FA5 sobre --ui-surface -> 6.52:1 AA --ui-text-muted #444441 sobre --ui-surface -> 9.77:1 AA --ui-text-muted sobre --ui-bg (#F4F6FA) -> 9.03:1 AA --ui-text sobre --ui-bg -> 6.03:1 AA LA TRAMPA que theme-tokens.css:64-68 documenta: --ui-surface NO es un color de texto. Sustituir `#fff` por var(--ui-surface) en un `color:` funciona en claro (ambos blancos) y deja texto cian sobre relleno cian (1.54:1) en oscuro. Para texto sobre relleno va --ui-text-on-fill. ========================================================================== */ --ui-text: var(--tca-azul-900); --ui-text-muted: var(--tca-gris-900); /* Tinta casi negra para títulos y campos sobre SUPERFICIE. No confundir con --ui-text-on-fill, que también vale ink-900 en claro pero no se invierte en oscuro: éste sí (theme-dark.css). */ --ui-text-strong: var(--tca-ink-900); /* La app pintaba el cuerpo en JetBrains Mono: base-shell.css (sin capa) pone `body { font-family: var(--font-base) }` y --font-base vale "JetBrains Mono", Inter… en theme-tokens.css. Como esa regla no tiene capa, ganaba al `font-family: var(--tca-font-sans)` de base.css. Se corrige el VALOR de la variable, que es lo que leen también navbar, pestañas y filtros: un cambio en vez de veinte. La mono queda para las cifras (--font-mono). */ --font-base: var(--tca-font-sans); /* Texto sobre CUALQUIER relleno semántico. En claro el relleno primario es #378ADD (marca, intocable) y el blanco sobre él da 3.59:1 — INSUFICIENTE para texto normal (necesita 4.5). Se usa tinta oscura: 4.84:1 sobre el azul, 4.62:1 sobre la lavanda, 6.47:1 sobre el rojo. Conserva el color de marca del botón y hace el texto legible. theme-dark.css invierte esta decisión para el oscuro. */ --ui-text-on-fill: var(--tca-ink-900); --ui-text-on-primary: var(--tca-ink-900); /* Relleno de acción primaria: degradado de marca con texto blanco. El mismo en ambos modos (theme-dark.css no lo redefine). */ --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 Y SEMÁNTICOS ========================================================================== --ui-primary es un RELLENO (botones), no un color de texto. Los enlaces usan --ui-text, que ya es el azul-900 de la marca (6.52:1). El documento de branding reserva #378ADD para "botones y acciones clave" — usarlo en enlaces a 14px es exactamente el fallo de 3.59:1 que tienen los mockups. ========================================================================== */ --ui-primary: var(--tca-azul-500); --ui-primary-strong: var(--tca-azul-900); --ui-primary-hover: var(--tca-azul-700); --ui-secondary: var(--tca-azul-900); --ui-secondary-hover: var(--tca-azul-700); /* Lavender is AI ONLY (documento de branding §Chatbot de IA). En componente.css el único consumidor es .ai-chat-*. En botón normal no aparece: así el usuario asocia ese color solo con "esto es IA". */ --ui-accent: var(--tca-lav-700); --ui-accent-text: var(--tca-lav-500); --ui-success: var(--tca-verde-500); --ui-success-text: var(--tca-verde-700); --ui-warn: var(--tca-amber-700); --ui-warn-text: var(--tca-amber-800); --ui-danger: var(--tca-rojo-700); --ui-danger-text: var(--tca-rojo-800); /* Relleno de botón destructivo: el mismo en ambos modos. Blanco sobre rojo-800 = 6.47:1; sobre --ui-danger del oscuro (#EF4444) el blanco daría 3.76. */ --ui-danger-fill: var(--tca-rojo-800); --ui-text-on-danger: var(--tca-blanco-texto); --ui-info: var(--tca-azul-500); --ui-info-text: var(--tca-azul-900); /* Acento de privilegio: chrome que sólo ve un superusuario. Vive sobre el navbar y no puede derivarse de --ui-warn (calibrado para fondo claro). theme-tokens.css:81-89 lo documenta. Se mantiene el ámbar. */ --ui-privilege: var(--tca-privilege); /* ========================================================================== SEMÁFORO DE RIESGO HL7 ========================================================================== NO se inventa aquí. Estos tokens son el espejo CSS de dashboard/constants/colores_riesgo.py y su contrato de contraste está medido y vigilado por hce/tests/test_badge_contraste.py. Se heredan tal cual de theme-tokens.css:118-138. Re-declararlos aquí con la paleta nueva rompería ese espejo sin necesidad: los colores del semáforo son los del estándar, no los de la marca. Deliberadamente ausentes de este fichero. ========================================================================== */ /* ========================================================================== BORDES ========================================================================== --ui-border decorativo: separa superficies (bajo 3:1, correcto — un borde decorativo no es información, WCAG 1.4.11 excluye adornos) --ui-border-strong FUNCIONAL: borde de campo de formulario. Debe cumplir ≥3:1 (WCAG 1.4.11). theme-tokens.css:92 da rgba(15,78,122,.22) que NO llega. --tca-linea-campo mide 3.70:1 sobre blanco. ========================================================================== */ --ui-border: var(--tca-linea); --ui-border-soft: var(--tca-linea-tenue); --ui-border-strong: var(--tca-linea-campo); /* ========================================================================== ELEVACIÓN Y EFECTOS ========================================================================== "Muy sutiles, casi imperceptibles" — documento de branding. Las tres elevaciones son deliberadamente planas. ========================================================================== */ --ui-elev-1: var(--tca-shadow-sm); --ui-elev-2: var(--tca-shadow); --ui-elev-3: var(--tca-shadow-md); /* Anillo de foco. WCAG 2.4.11/2.4.13 (AA) y 2.4.7 sólo exigen que sea visible — no un ratio concreto — pero 4.31:1 contra la superficie lo deja holgadamente por encima de AA y por debajo del 3:1 que un anillo de 3px (que a 42px de diámetro) haría noisy en Density alta. */ --ui-focus-ring: 0 0 0 3px var(--tca-linea-campo); /* Glassmorphism SUTIL, limitado a superficie de cromo. blur() y no en contenido: sobre texto es ilegible y carente de rendimiento. En claro apenas se percibe — que es el objetivo. */ --ui-glass: var(--tca-glass-blur); --ui-glass-bg: var(--tca-glass-bg); --ui-glow: none; /* ========================================================================== TINTES DERIVADOS ========================================================================== color-mix sobre la superficie en vez de hex nuevos: cambiar el color de marca re-tinta también los badges sin editar una línea más. ========================================================================== */ --ui-tint-primary: color-mix(in oklab, var(--ui-primary) 10%, var(--ui-surface)); --ui-tint-primary-2: color-mix(in oklab, var(--ui-primary) 20%, var(--ui-surface)); --ui-tint-success: var(--tca-verde-100); --ui-tint-warn: var(--tca-amber-100); --ui-tint-danger: var(--tca-rojo-100); --ui-tint-info: var(--tca-azul-100); --ui-tint-accent: var(--tca-lav-100); /* ========================================================================== COMPONENTES ========================================================================== La escala (--space-*, --radius-*, --fs-*, --lh-*, --duration-*, --ease-*, --z-*, --touch-target) la hereda de custom.css:123-201 — ya coincide con el documento de branding (radios 10/14/20, táctil 44px, espaciado múltiplo de 8). NO se redeclara: duplicar una escala en dos ficheros es cómo se desincronizan. Sólo se fija lo que el tema debe distinguir del tema claro histórico. ========================================================================== */ /* Anillo de foco del tema: el azul de marca, no el azul del tema claro. */ --tca-focus-width: 3px; --tca-focus-offset: 2px; /* Densidad de la navegación lateral. */ --tca-sidebar-width: 240px; --tca-sidebar-w: 260px; --tca-nav-item-h: 40px; --tca-nav-item-radius: 9px; /* Superficies de cromo. */ --tca-topbar-bg: var(--tca-azul-100); --tca-topbar-border: var(--tca-topbar-border); --tca-sidebar-bg: var(--tca-grad-sidebar); --tca-sidebar-border: var(--tca-sidebar-border); } }