/* ========================================================================== css/tokens.css — EL UNICO SITIO DE LOS COLORES DE LA WEB (MODO-OSCURO, 18 sep 2026) REGLA: ninguna pantalla, hoja de estilos ni JavaScript escribe un color a mano. Todos usan var(--fs-...). Un color nuevo se da de alta AQUI, con sus DOS valores (claro y oscuro), y en ningun otro sitio. Lo comprueba scripts/modo_oscuro_tests.py. - El juego CLARO son los colores que la aplicacion tenia antes (mismos valores). - El juego OSCURO se activa con , que pone la cabecera (header.php) ANTES de pintar, segun la preferencia del usuario o el dispositivo. - Los PDF y los correos NO leen este fichero: se quedan en claro SIEMPRE. - Los colores de ESTADO (acta y certificado) estan al final: son letra sobre panel y cumplen 4,5:1 en los dos juegos (lo comprueba la prueba de contraste). ========================================================================== */ :root { color-scheme: light; /* --- superficies --- */ --fs-bg: #f5f5f5; /* fondo de la pagina */ --fs-panel: #ffffff; /* paneles, tablas, campos */ --fs-panel-2: #f9f9f9; /* filas y paneles secundarios */ --fs-panel-3: #f5f5f5; /* recuadros hundidos (well) */ --fs-band: #eef1f4; /* banda de contenido bajo la cabecera */ --fs-hover: #e0e0e0; /* fondo al pasar el raton / desactivado */ --fs-select: #dce6fa; /* fila o dia seleccionado */ --fs-select-text: #dce6fa; --fs-ink-fill: #272727; /* rellenos "tinta": oscuros en claro, claros en oscuro */ --fs-grey-fill: #969696; --fs-grey-fill-2: #5a5a5a; --fs-grey-fill-3: #b5bac0; --fs-paper: #ffffff; /* PAPEL: blanco en los dos juegos (firmas) */ --fs-paper-ink: #272727; /* letra sobre el papel */ --fs-logo-well: transparent; /* fondo del logotipo de la cabecera */ --fs-backdrop: rgba(0, 0, 0, 0.5); --fs-print-ink: #000000; /* al imprimir una pantalla: siempre en claro */ --fs-print-line: #999999; /* --- texto --- */ --fs-text: #323232; --fs-text-body: #333333; --fs-text-strong: #272727; --fs-text-2: #5a5a5a; --fs-text-muted: #969696; --fs-text-muted-2: #777777; --fs-text-disabled: #a0a0a0; --fs-text-faint: #c8c8c8; --fs-text-faint-2: #b5bac0; --fs-link: #337ab7; --fs-link-hover: #23527c; --fs-placeholder: #999999; /* --- lineas y sombras --- */ --fs-line: #e3e3e3; --fs-line-2: #d0d0d0; --fs-line-3: #e9e9e9; --fs-line-strong: #b5b5b5; --fs-field-line: #cccccc; --fs-shadow-1: rgba(22, 63, 142, 0.15); --fs-shadow-2: rgba(22, 63, 142, 0.05); --fs-shadow-pop: rgba(0, 0, 0, 0.175); /* --- marca --- */ --fs-brand: #e3000f; /* RELLENO rojo (botones, marcas): igual en los dos juegos */ --fs-brand-text: #e3000f; /* LETRA roja: en oscuro se aclara para que se lea */ --fs-brand-line: #e3000f; --fs-brand-glow: rgba(227, 0, 15, 0.15); --fs-on-brand: #ffffff; /* letra sobre relleno de color */ --fs-logo-fire: #272727; /* "Fire" del logotipo de la cabecera */ --fs-logo-secure: #8a8a8a; /* "Secure" */ /* --- botones de acento --- */ --fs-purple: #91004b; --fs-purple-line: #91004b; --fs-purple-text: #91004b; --fs-cyan: #00d0ff; /* --- avisos (recuadros): fondo, borde y letra --- */ --fs-notice-bg: #ffccbb; --fs-danger-text: #c00000; --fs-danger-text-vivid: #ff0000; --fs-danger-bg: #ffeeee; --fs-danger-line: #cc0000; --fs-danger-ink: #990000; --fs-danger-fill: #d9534f; --fs-ok-text: #008000; --fs-ok-bg: #eefaf3; --fs-ok-line: #33aa77; --fs-ok-ink: #117755; --fs-ok-fill: #3c763d; --fs-warn-bg: #fff8e5; --fs-warn-line: #bb9900; --fs-warn-ink: #7a5c00; --fs-warn-fill: #f0ad4e; --fs-info-bg: #eef6fb; --fs-info-line: #99bbcc; --fs-info-ink: #224455; --fs-info-fill: #5bc0de; --fs-neutral-fill: #999999; /* etiqueta "Inactivo" */ --fs-row-off: #f5f5f5; /* fila de un inactivo */ /* --- categorias de senal (catalogo de productos): rojo y verde son los de peligro/correcto --- */ --fs-sign-riesgo: #b45f00; --fs-sign-obligacion: #0b5cad; /* --- graficas del panel (tartas): la familia del rojo de marca --- */ --fs-chart-1: #ff0000; --fs-chart-2: #ff7676; --fs-chart-3: #ffa0a0; /* --- redes sociales del pie (colores de cada marca) --- */ --fs-social-facebook: #3b5998; --fs-social-twitter: #55acee; --fs-social-linkedin: #0e76a8; --fs-social-youtube: #c4302b; /* --- ESTADOS DEL ACTA (letra sobre panel). Misma familia de siempre, mas oscura para que se lea. Antes: naranja #ff7f27 (2,5:1), rojo #ff0000 (4,0:1), turquesa #77cccc (1,9:1), verde #00cc00 (2,2:1). --- */ --fs-st-pendiente: #a54c08; /* naranja — sin resultado / pendiente */ --fs-st-desfavorable: #cc0000; /* rojo — desfavorable */ --fs-st-favorable: #0e7170; /* turquesa — favorable */ --fs-st-aprobada: #137538; /* verde — aprobada */ /* --- ESTADOS DEL CERTIFICADO --- */ --fs-st-cert-vigente: #137538; --fs-st-cert-anulado: #b91c1c; --fs-st-cert-neutro: #656565; /* --- icono de aviso en los listados (sin firmar, sin cobrar, no verificado); antes "orangered" a mano --- */ --fs-alert-icon: #ff4500; /* --- ESTADISTICAS (pase 6): un color por TECNICO en las graficas. Las 24 primeras son las paletas de Paul Tol y Okabe-Ito (pensadas para daltonismo); del 25 en adelante el tono lo pone el modulo y la luminosidad sale de aqui (--fs-tech-la / --fs-tech-lb). --- */ --fs-tech-01: #4477AA; --fs-tech-02: #EE6677; --fs-tech-03: #228833; --fs-tech-04: #CCBB44; --fs-tech-05: #AA3377; --fs-tech-06: #EE7733; --fs-tech-07: #66CCEE; --fs-tech-08: #332288; --fs-tech-09: #CC3311; --fs-tech-10: #117733; --fs-tech-11: #DDCC77; --fs-tech-12: #882255; --fs-tech-13: #0077BB; --fs-tech-14: #999933; --fs-tech-15: #44AA99; --fs-tech-16: #E69F00; --fs-tech-17: #88CCEE; --fs-tech-18: #D55E00; --fs-tech-19: #009988; --fs-tech-20: #AA4499; --fs-tech-21: #777777; --fs-tech-22: #000000; --fs-tech-23: #56B4E9; --fs-tech-24: #CC6677; --fs-tech-la: 38%; --fs-tech-lb: 55%; /* --- budget.css (pase 4 de MODO-OSCURO): colores propios de esa hoja. CLARO = el que tenia escrito, tal cual; OSCURO = el que ya le ponia el puente. --- */ --fs-presu-brand-glow: rgba(227,0,15,0.25); --fs-presu-danger-bg: #fbeaea; --fs-presu-danger-line: #c00000; --fs-presu-danger-line-d9534f: #d9534f; --fs-presu-danger-text: #a94442; --fs-presu-hover: #ececec; --fs-presu-info-bg: #f7fcfe; --fs-presu-info-ink: #31708f; --fs-presu-info-line: #5bc0de; --fs-presu-ink-fill: #333; --fs-presu-line: #ddd; --fs-presu-line-3: #eee; --fs-presu-line-3-f0f0f0: #f0f0f0; --fs-presu-line-strong: #999; --fs-presu-ok-line: #5cb85c; --fs-presu-panel-2: #fafafa; --fs-presu-shadow-2: rgba(0,0,0,0.12); --fs-presu-text-2: #555; --fs-presu-text-muted-2: #888; --fs-presu-text-strong: #222; --fs-presu-warn-bg: #fff8e6; --fs-presu-warn-ink: #8a6d3b; --fs-presu-warn-line: #8a6d3b; --fs-presu-warn-line-f0ad4e: #f0ad4e; /* --- Estadisticas, Series y mapa del dia (pase 4 de MODO-OSCURO): CLARO = el color que tenian escrito, tal cual; OSCURO = el que ya les ponia el puente. --- */ --fs-est-bg: #f7f5f2; --fs-est-paper-2: #fbfaf8; --fs-text-est: #1b1714; --fs-text-est-2: #6d655c; --fs-text-est-3: #948b80; --fs-est-line: #e4dfd8; --fs-est-line-2: #f0ece6; --fs-est-brand: #c62a1c; --fs-est-brand-soft: #fbecea; --fs-est-s1: #2a78d6; --fs-est-s2: #eb6834; --fs-est-s3: #1baf7a; --fs-est-s4: #6f4fd0; --fs-est-s5: #7a716a; --fs-est-pend: #ddd7ce; --fs-est-ok: #2f7d4f; --fs-est-warn: #a65c00; --fs-est-shadow: rgba(27,23,20,.05); --fs-est-notice-line: rgba(198,42,28,.25); --fs-est-confirm-bg: #fff8e6; --fs-est-confirm-line: #f0d9a0; --fs-est-tip-shadow: rgba(0,0,0,.22); --fs-est-map-bg: #fafafa; --fs-text-note: #888; } html[data-theme="dark"] { color-scheme: dark; --fs-bg: #16181c; --fs-panel: #1f2227; --fs-panel-2: #24282e; --fs-panel-3: #1b1e23; --fs-band: #1a1d22; --fs-hover: #30353d; --fs-select: #2b3a57; --fs-select-text: #ffffff; --fs-ink-fill: #cfd3d8; --fs-grey-fill: #5b626c; --fs-grey-fill-2: #444a53; --fs-grey-fill-3: #4a505a; --fs-paper: #ffffff; --fs-paper-ink: #272727; --fs-logo-well: transparent; --fs-backdrop: rgba(0, 0, 0, 0.7); --fs-print-ink: #000000; --fs-print-line: #999999; /* TEXTO EN OSCURO (pase 3): el principal, blanco; los secundarios, blanco apagado. Nunca gris medio ni oscuro sobre fondo oscuro. Todos pasan 4,5:1 sobre TODAS las superficies (lo mide la prueba de contraste). */ --fs-text: #eef0f3; --fs-text-body: #eef0f3; --fs-text-strong: #ffffff; --fs-text-2: #d3d8de; --fs-text-muted: #c3c9d1; --fs-text-muted-2: #c3c9d1; --fs-text-disabled: #a3acb7; /* desactivado: mas apagado que el resto, pero se lee */ --fs-text-faint: #b7bec8; --fs-text-faint-2: #b7bec8; --fs-link: #7cbcff; --fs-link-hover: #a8d2ff; --fs-placeholder: #aab3be; /* ayuda dentro de un campo vacio: se distingue de lo escrito, y se lee */ --fs-line: #3a3f47; --fs-line-2: #454b54; --fs-line-3: #30353c; --fs-line-strong: #59606a; --fs-field-line: #4a515b; --fs-shadow-1: rgba(0, 0, 0, 0.5); --fs-shadow-2: rgba(0, 0, 0, 0.3); --fs-shadow-pop: rgba(0, 0, 0, 0.6); --fs-brand: #e3000f; --fs-brand-text: #ff7e75; --fs-brand-line: #e3000f; --fs-brand-glow: rgba(255, 107, 97, 0.25); --fs-on-brand: #ffffff; --fs-logo-fire: #f2f3f5; --fs-logo-secure: #bcc3cc; --fs-purple: #91004b; --fs-purple-line: #c2438a; --fs-purple-text: #e58bbd; --fs-cyan: #00d0ff; --fs-notice-bg: #4a2a22; --fs-danger-text: #ff7e75; --fs-danger-text-vivid: #ff7e75; --fs-danger-bg: #3a1d1d; --fs-danger-line: #8f2f2f; --fs-danger-ink: #ffb4ad; --fs-danger-fill: #b3342f; --fs-ok-text: #4cc38a; --fs-ok-bg: #16301f; --fs-ok-line: #2f6b4a; --fs-ok-ink: #9be2bd; --fs-ok-fill: #2f6b3a; --fs-warn-bg: #352b12; --fs-warn-line: #7d6520; --fs-warn-ink: #f0cf7a; --fs-warn-fill: #8c5d12; /* lleva letra blanca encima */ --fs-info-bg: #16293a; --fs-info-line: #2f5878; --fs-info-ink: #a9d3f5; --fs-info-fill: #2b7d99; --fs-neutral-fill: #5b626c; --fs-row-off: #1b1e23; --fs-sign-riesgo: #ffb454; --fs-sign-obligacion: #6cb2ff; --fs-chart-1: #ff5a4f; --fs-chart-2: #ff8f88; --fs-chart-3: #ffc2bd; --fs-social-facebook: #3b5998; --fs-social-twitter: #1c6ea4; /* el azul de la marca, mas hondo: el icono blanco de encima se lee */ --fs-social-linkedin: #0e76a8; --fs-social-youtube: #c4302b; --fs-st-pendiente: #ff9d4d; --fs-st-desfavorable: #ff7e75; --fs-st-favorable: #5fd0cc; --fs-st-aprobada: #4ade80; --fs-st-cert-vigente: #4ade80; --fs-st-cert-anulado: #ff7e75; --fs-st-cert-neutro: #c3c9d1; --fs-alert-icon: #ff8a5c; /* ESTADISTICAS: las 5 de la paleta que no llegaban a 3:1 sobre oscuro, aclaradas dentro de su familia (3,3:1 o mas sobre los tres fondos oscuros; el negro pasa a gris claro); las demas, las mismas que en claro. */ --fs-tech-01: #4477AA; --fs-tech-02: #EE6677; --fs-tech-03: #228833; --fs-tech-04: #CCBB44; --fs-tech-05: #D677AD; /* aclarado */ --fs-tech-06: #EE7733; --fs-tech-07: #66CCEE; --fs-tech-08: #806DDB; /* aclarado */ --fs-tech-09: #CC3311; --fs-tech-10: #1AB84F; /* aclarado */ --fs-tech-11: #DDCC77; --fs-tech-12: #CF3F87; /* aclarado */ --fs-tech-13: #0077BB; --fs-tech-14: #999933; --fs-tech-15: #44AA99; --fs-tech-16: #E69F00; --fs-tech-17: #88CCEE; --fs-tech-18: #D55E00; --fs-tech-19: #009988; --fs-tech-20: #AA4499; --fs-tech-21: #777777; --fs-tech-22: #CFCFCF; /* aclarado */ --fs-tech-23: #56B4E9; --fs-tech-24: #CC6677; --fs-tech-la: 64%; --fs-tech-lb: 72%; /* --- budget.css (pase 4): colores propios de esa hoja. CLARO = el que tenia escrito, tal cual; OSCURO = el que ya le ponia el puente. --- */ --fs-presu-brand-glow: var(--fs-brand-glow); --fs-presu-danger-bg: var(--fs-danger-bg); --fs-presu-danger-line: var(--fs-danger-line); --fs-presu-danger-line-d9534f: var(--fs-danger-line); --fs-presu-danger-text: var(--fs-danger-text); --fs-presu-hover: var(--fs-hover); --fs-presu-info-bg: var(--fs-info-bg); --fs-presu-info-ink: var(--fs-info-ink); --fs-presu-info-line: var(--fs-info-line); --fs-presu-ink-fill: var(--fs-ink-fill); --fs-presu-line: var(--fs-line); --fs-presu-line-3: var(--fs-line-3); --fs-presu-line-3-f0f0f0: var(--fs-line-3); --fs-presu-line-strong: var(--fs-line-strong); --fs-presu-ok-line: var(--fs-ok-line); --fs-presu-panel-2: var(--fs-panel-2); --fs-presu-shadow-2: var(--fs-shadow-2); --fs-presu-text-2: var(--fs-text-2); --fs-presu-text-muted-2: var(--fs-text-muted-2); --fs-presu-text-strong: var(--fs-text-strong); --fs-presu-warn-bg: var(--fs-warn-bg); --fs-presu-warn-ink: var(--fs-warn-ink); --fs-presu-warn-line: var(--fs-warn-line); --fs-presu-warn-line-f0ad4e: var(--fs-warn-line); /* --- Estadisticas, Series y mapa del dia (pase 4 de MODO-OSCURO): CLARO = el color que tenian escrito, tal cual; OSCURO = el que ya les ponia el puente. --- */ --fs-est-bg: var(--fs-bg); --fs-est-paper-2: var(--fs-panel-2); --fs-text-est: var(--fs-text); --fs-text-est-2: var(--fs-text-2); --fs-text-est-3: var(--fs-text-muted); --fs-est-line: var(--fs-line); --fs-est-line-2: var(--fs-line-3); --fs-est-brand: var(--fs-brand-text); --fs-est-brand-soft: var(--fs-danger-bg); --fs-est-s1: var(--fs-link); --fs-est-s2: var(--fs-st-pendiente); --fs-est-s3: var(--fs-ok-text); --fs-est-s4: var(--fs-purple-text); --fs-est-s5: var(--fs-text-muted); --fs-est-pend: var(--fs-grey-fill); --fs-est-ok: var(--fs-ok-text); --fs-est-warn: var(--fs-warn-ink); --fs-est-shadow: var(--fs-shadow-2); --fs-est-notice-line: rgba(198,42,28,.25); --fs-est-confirm-bg: var(--fs-warn-bg); --fs-est-confirm-line: var(--fs-warn-line); --fs-est-tip-shadow: var(--fs-shadow-pop); --fs-est-map-bg: var(--fs-panel-2); --fs-text-note: var(--fs-text-muted); }