/* ═══════════════════════════════════════════════════════════════════════ TU SALUD CERCA · EL TEMA OSCURO, UNA SOLA FUENTE (2026-10-26) Paleta «dim» (la de X/Twitter) con el acento teal de la marca. Es la ÚNICA hoja donde se escriben los colores del oscuro: cada superficie los toma de aquí con var() bajo SU selector de tema oscuro, y ninguna repite un hexadecimal del oscuro. · Página pública (landing, directorio, ficha, solicitud de cita, /registro, /planes, /pyp, /cita/, /clinica/, sala y grabación): salud.css, bloque `:root[data-theme="dark"]`, mapea sus tokens (--fondo, --superficie, --texto…) a estos. · /gerencia de un centro: styles.css los mapea bajo `html[data-vertical="salud"][data-theme="dark"]` (el widget «Ver mejor la página» ya lo hace; el cascarón, en la tanda que lo une). Los tokens viven en `:root` SIEMPRE (no dependen del tema): definirlos no pinta nada; pinta quien los use. Así una pieza en claro puede, si hace falta, mostrar algo del oscuro (vista previa) sin otra copia. Carga: index.html, clinica.html, sala.html y grabar.html la traen ANTES de salud.css; en /gerencia, el index.html de la app (app/frontend/index.html, junto a styles.css): el cascarón del panel la usa desde el primer pintado. Qué token es qué (contrastes WCAG 2.x medidos; AA = 4,5 texto, 3 gráficos): --oscuro-fondo #15202B fondo de la página --oscuro-superficie #1C2733 tarjetas, paneles, campos, secciones alternas --oscuro-superficie-rgb 28 39 51 la misma, en canales: rgba(var(--oscuro-superficie-rgb), .72) para un vidrio translúcido (/gerencia) --oscuro-elevada #22303C nivel elevado: diálogos, menús, desplegables, popovers, hover --oscuro-elevada-rgb 34 48 60 la misma, en canales (vidrio anidado de /gerencia) --oscuro-realce #2C3D4C pistas, nodos pendientes, presionado (un paso sobre la elevada) --oscuro-borde #38444D bordes y separadores --oscuro-borde-fuerte #4A5864 borde de chips y tarjetas al pasar --oscuro-borde-control #72818D borde de campos y casillas (3,78 sobre la superficie: ≥ 3) --oscuro-texto #E7E9EA texto principal: 13,54 fondo · 12,43 superficie · 11,08 elevada --oscuro-texto-2 #8B98A5 secundario: 5,60 fondo · 5,14 superficie · 4,58 elevada --oscuro-texto-3 #9AA6B2 terciario/meta: 6,11 superficie · 4,51 sobre el realce --oscuro-acento-texto #6FD0CC teal para enlaces, íconos y etiquetas: 9,09 fondo · 8,34 superficie --oscuro-acento #1A9E9B relleno del botón principal (nunca fondos grandes) --oscuro-acento-hover #2BB3AF el botón al pasar --oscuro-acento-tinta #15202B texto SOBRE el botón teal: 5,03 (con blanco daría 3,28: no) --oscuro-acento-suave teal 10 % chip/opción elegida (un tinte, no un fondo verde) --oscuro-acento-linea teal 32 % subrayados y bordes de acento suaves --oscuro-aviso #F2C66D ámbar de avisos y etiquetas («Centro de demostración»): 9,42 superficie --oscuro-aviso-suave/-borde su fondo (10 %) y su borde (40 %) --oscuro-error #FF9494 error: 7,79 fondo · 7,15 superficie (+ -suave, -borde) --oscuro-ok #7FE0B0 correcto: 10,36 fondo · 9,51 superficie (+ -suave) --oscuro-info #7EC0EA informativo y calendario azul: 7,65 superficie (+ -suave) --oscuro-rosa / -violeta #EE93BC / #BFA2F0 calendarios y etiquetas de la agenda: 6,87 / 6,95 superficie --oscuro-foco #6FD0CC anillo de foco --oscuro-velo detrás de un diálogo --oscuro-seleccion ::selection --oscuro-sombra-1/-2 apoyado / flotando (sin negro puro) --oscuro-sombra-tinta el color de esas sombras, para un box-shadow o text-shadow propio --oscuro-max-* «Contraste reforzado» en oscuro (los mismos valores de la portada, salud.css): texto #FFFFFF, texto-2 #CBD2D8 (9,91 superficie), acento-texto #A9ECE9 (12,46 con la tinta), aviso #FFD58A; bordes y error/ok más claros --oscuro-gr-* paleta SEMÁNTICA de gráficos (completadas/nuevos/mujer teal, canceladas coral, ausentes ámbar, pendientes azul grisáceo, recurrentes/hombre índigo, otro ámbar): ≥ 5,5:1 sobre la superficie #1C2733 y ≥ 4,9 sobre la elevada ═══════════════════════════════════════════════════════════════════════ */ :root { --oscuro-fondo: #15202B; --oscuro-superficie: #1C2733; --oscuro-superficie-rgb: 28, 39, 51; --oscuro-elevada: #22303C; --oscuro-elevada-rgb: 34, 48, 60; --oscuro-realce: #2C3D4C; --oscuro-borde: #38444D; --oscuro-borde-fuerte: #4A5864; --oscuro-borde-control: #72818D; --oscuro-texto: #E7E9EA; --oscuro-texto-2: #8B98A5; --oscuro-texto-3: #9AA6B2; --oscuro-acento-texto: #6FD0CC; --oscuro-acento: #1A9E9B; --oscuro-acento-hover: #2BB3AF; --oscuro-acento-tinta: #15202B; --oscuro-acento-suave: rgba(111, 208, 204, 0.1); --oscuro-acento-linea: rgba(111, 208, 204, 0.32); --oscuro-aviso: #F2C66D; --oscuro-aviso-suave: rgba(242, 198, 109, 0.1); --oscuro-aviso-borde: rgba(242, 198, 109, 0.4); --oscuro-error: #FF9494; --oscuro-error-suave: rgba(255, 148, 148, 0.1); --oscuro-error-borde: rgba(255, 148, 148, 0.4); --oscuro-ok: #7FE0B0; --oscuro-ok-suave: rgba(127, 224, 176, 0.1); --oscuro-info: #7EC0EA; --oscuro-info-suave: rgba(126, 192, 234, 0.1); --oscuro-rosa: #EE93BC; --oscuro-violeta: #BFA2F0; --oscuro-foco: #6FD0CC; --oscuro-velo: rgba(12, 18, 24, 0.7); --oscuro-seleccion: rgba(111, 208, 204, 0.3); --oscuro-sombra-1: 0 1px 2px rgba(10, 16, 22, 0.45); --oscuro-sombra-2: 0 14px 34px -16px rgba(10, 16, 22, 0.7), 0 2px 6px -2px rgba(10, 16, 22, 0.35); --oscuro-sombra-tinta: rgba(10, 16, 22, 0.6); --oscuro-max-texto: #FFFFFF; --oscuro-max-texto-2: #CBD2D8; --oscuro-max-acento-texto: #A9ECE9; --oscuro-max-aviso: #FFD58A; --oscuro-max-error: #FFB8B8; --oscuro-max-ok: #A6F0CB; --oscuro-max-borde: #8B98A5; --oscuro-max-borde-fuerte: #CBD2D8; --oscuro-gr-completadas: #2EC4BF; --oscuro-gr-canceladas: #F2795A; --oscuro-gr-ausentes: #F2C66D; --oscuro-gr-pendientes: #9DB6CF; --oscuro-gr-nuevos: #2EC4BF; --oscuro-gr-recurrentes: #8C9BF2; --oscuro-gr-mujer: #2EC4BF; --oscuro-gr-hombre: #8C9BF2; }