/* ============================================================================ * zulux-tokens.css · Los colores y la tipografía corporativos de ZULUX, como * variables CSS. Fase 0 de la unificación visual (04/08/2026). * * Fuente de verdad: zulux-guia-estilo-web.html (Manual de Identidad Corporativa, * versión 2.6, julio 2026). Si la guía y este fichero discrepan, manda la guía. * * ───────────────────────────────────────────────────────────────────────────── * ESTE FICHERO NO PINTA NADA, Y ESO ES A PROPÓSITO * ───────────────────────────────────────────────────────────────────────────── * Solo declara variables. No hay ni un selector que cambie el aspecto de nada: * ni `body`, ni `*`, ni `h1`, ni `.btn`. Se puede cargar en las 47 vistas y no * se mueve un píxel. * * El motivo: 38 de las 47 vistas usan la plantilla Ace (Bootstrap + jQuery), con * 798 modales, 91 DataTables y 179 selectores de fecha. Un reset global o un * `body { background }` aquí las rompería todas de golpe. El repintado va pantalla * por pantalla en una fase posterior, con un fichero de sobreescritura aparte. * * ───────────────────────────────────────────────────────────────────────────── * CÓMO SE USA EL TEMA * ───────────────────────────────────────────────────────────────────────────── * Los tokens semánticos (--zx-fondo, --zx-texto, --zx-superficie...) vienen en * dos juegos: * * :root -> valores CLAROS. Es lo que son hoy las pantallas * de Ace, así que si algo usa un token sin querer, * no se ve raro. * :root[data-tema="oscuro"] -> valores OSCUROS, el objetivo (como el dashboard). * * Nadie pone `data-tema` todavía, así que hoy no hay cambio visible. Cuando una * pantalla esté lista para el tema oscuro, se le pone data-tema="oscuro" en el * y esa pantalla —y solo esa— cambia. * * NO se usa la función light-dark() de la guía: necesita `color-scheme`, y poner * `color-scheme: dark` en :root pondría en oscuro las barras de desplazamiento y * los controles nativos de las 38 pantallas claras. Con dos juegos de variables * se consigue lo mismo y se controla pantalla por pantalla. * * ───────────────────────────────────────────────────────────────────────────── * LA TIPOGRAFÍA NO SE CARGA AQUÍ * ───────────────────────────────────────────────────────────────────────────── * --zx-font nombra Titillium Web, pero este fichero NO la descarga. La cadena de * respaldo (Segoe UI, system-ui) funciona sola mientras no esté. * * Cuando se decida cargarla, hacerlo AUTOALOJADA con @font-face desde los .woff2 * del manual, no desde Google Fonts: la propia guía advierte de que Google Fonts * transmite la IP del visitante y eso es un problema de RGPD. Ojo, dashboard.html * ya la carga desde Google Fonts hoy, así que esa exposición ya existe ahí y * conviene arreglarla al mismo tiempo. * ========================================================================== */ :root { /* ── Corporativos (Manual Zulux, pág. 11). Son absolutos: no cambian con el tema ── */ --zx-morado: #301649; /* Principal 1/2 · Pantone 2695 C/U */ --zx-amarillo: #ffce03; /* Principal 2/2 · Pantone 7408 C/115 */ --zx-gris: #dfdfdf; /* Apoyo · Pantone Cool Gray 5 */ --zx-blanco: #ffffff; /* ── Escala de morado, para interfaz densa ── */ --zx-morado-50: #f4eef9; --zx-morado-100: #e7dcef; --zx-morado-200: #cbb8dc; --zx-morado-300: #a286be; --zx-morado-400: #7b5aa0; --zx-morado-500: #5f3488; --zx-morado-600: #4e2873; --zx-morado-700: #3f1e5e; --zx-morado-800: #301649; /* = corporativo */ --zx-morado-900: #1b0b28; /* ── Escala de amarillo ── */ --zx-amarillo-50: #fffbeb; --zx-amarillo-100: #fff4cc; --zx-amarillo-200: #ffeb99; --zx-amarillo-300: #ffe266; --zx-amarillo-400: #ffd836; --zx-amarillo-500: #ffce03; /* = corporativo */ --zx-amarillo-600: #e6b800; --zx-amarillo-700: #cca300; --zx-amarillo-800: #a38200; --zx-amarillo-900: #7a6200; /* ── Chips sólidos de estado: no dependen del tema (gráficas, bordes) ── */ --zx-exito-solido: #2e9e5b; --zx-aviso-solido: #e8911c; --zx-error-solido: #d8413b; --zx-info-solido: #2d6fe0; /* ── Tipografía ── */ --zx-font: "Titillium Web", "Segoe UI", system-ui, sans-serif; --zx-font-mono: "JetBrains Mono", "Consolas", "Monaco", monospace; --zx-peso-thin: 200; --zx-peso-light: 300; --zx-peso-regular: 400; --zx-peso-semibold: 600; --zx-peso-bold: 700; --zx-peso-black: 900; --zx-fs-xs: 0.8rem; --zx-fs-sm: 0.9rem; --zx-fs-base: 1rem; --zx-fs-lg: 1.25rem; --zx-fs-xl: 1.6rem; --zx-fs-2xl: 2.2rem; --zx-fs-3xl: 3rem; --zx-fs-display: 4.5rem; /* ── Espaciado (múltiplos de 8 px) ── */ --zx-sp-1: 0.5rem; --zx-sp-2: 1rem; --zx-sp-3: 1.5rem; --zx-sp-4: 2rem; --zx-sp-6: 3rem; --zx-sp-8: 4rem; /* ── Formas ── */ --zx-radio: 6px; --zx-radio-pastilla: 12px; --zx-transicion: 160ms ease; /* ══ Semánticos, juego CLARO (lo que son hoy las pantallas de Ace) ══ */ --zx-fondo: #ffffff; --zx-superficie: #ffffff; --zx-texto: #2b2135; --zx-texto-suave: #5a5a5a; --zx-titulo: var(--zx-morado); /* EL ACENTO CLARO NO PUEDE SER EL MORADO CORPORATIVO A SECAS (fase 5). La banda de marca —la barra de Ace y el pie— es ese mismo morado en los dos temas, así que con el acento igual, el bloque del usuario que va ENCIMA de la banda desaparecía: morado sobre morado. Se baja un escalón de la escala. Sigue siendo corporativo y da 9,9:1 sobre blanco, de sobra para AA. */ --zx-acento: var(--zx-morado-600); --zx-acento-hover: var(--zx-morado-700); --zx-borde: var(--zx-gris); --zx-suave: #eae6ee; --zx-eyebrow: var(--zx-morado-500); --zx-sombra: 0 2px 12px rgba(48, 22, 73, 0.12); --zx-exito: #1e6e42; --zx-exito-bg: #e4f2ea; --zx-aviso: #8a5410; --zx-aviso-bg: #fdf0da; --zx-error: #b3261e; --zx-error-bg: #f9e5e4; --zx-info: #1d5bbf; --zx-info-bg: #e3edfb; } /* ══ Semánticos, juego OSCURO ══ Se activa poniendo data-tema="oscuro" en el DE UNA PANTALLA. ───────────────────────────────────────────────────────────────────────────── ESTOS VALORES SON LOS DEL TABLERO, LITERALMENTE (06/08/2026) ───────────────────────────────────────────────────────────────────────────── Marco: «los colores de la moderna son los que deberíamos poner en las clásicas». Y no eran los mismos: comparados papel por papel, de 12 parejas solo coincidía UNA (el amarillo). Las superficies se iban entre 13 y 20 puntos de distancia —poco, pero suficiente para notarlo al pasar de una pantalla a otra— y los colores de estado se iban muchísimo: el rojo 106, el azul 60, el texto secundario 47. Así que estos valores ya no se eligen aquí: se COPIAN de las variables de assets/css/dashboard2.css, que es la paleta que el equipo dio por buena. Al lado de cada uno está de cuál sale. Si el tablero cambia un color, este es el fichero que hay que traer detrás. El cambio más visible no son las superficies, es el HOVER: era un morado sólido (#3f1e5e) y pasa a ser el velo del tablero, un blanco al 6% que deja ver lo que hay debajo. Es lo que hace que las tablas se sientan «modernas». ───────────────────────────────────────────────────────────────────────────── */ :root[data-tema="oscuro"] { --zx-fondo: #0f0a22; /* dashboard2 --bg */ --zx-superficie: #241a45; /* dashboard2 --blanco (la tarjeta) */ --zx-texto: #ecdcff; /* dashboard2 --tinta */ --zx-texto-suave: #9883c0; /* dashboard2 --gris / --text-dim */ --zx-titulo: var(--zx-blanco); --zx-acento: var(--zx-amarillo); /* = dashboard2 --accent, el único que ya coincidía */ --zx-acento-hover: #e0b400; /* dashboard2 --accent-osc */ --zx-borde: rgba(255, 255, 255, .09); /* dashboard2 --linea */ --zx-suave: #1e1638; /* dashboard2 --row */ --zx-eyebrow: var(--zx-morado-300); --zx-sombra: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35); /* dashboard2 --sombra */ /* Los de estado también salen del tablero. Y sus fondos pasan de ser un color sólido a un TINTE del propio color, que es como lo hace el tablero: así el aviso se posa sobre la superficie que tenga debajo en vez de recortarse. */ --zx-exito: #66bb6a; --zx-exito-bg: rgba(102, 187, 106, .16); /* --verde */ --zx-aviso: #ffb74d; --zx-aviso-bg: rgba(255, 183, 77, .16); /* --amarillo */ --zx-error: #ef5350; --zx-error-bg: rgba(239, 83, 80, .16); /* --rojo */ --zx-info: #64b5f6; --zx-info-bg: rgba(100, 181, 246, .16); /* --azul */ } /* Juego CLARO explícito, para poder forzarlo en una pantalla concreta aunque el día que se cambie el valor por defecto de :root sea el oscuro. Desde la fase 5 esto ya no es solo "por si acaso": es lo que se aplica cuando el usuario elige el tema claro en el menú de su nombre. Vale también para CLÁSICO, por lo mismo que se explica en los tokens de papel: en las pantallas modernas no hay un Ace al que volver, así que clásico se resuelve como claro. */ :root[data-tema="claro"], :root[data-tema="clasico"] { --zx-fondo: #ffffff; --zx-superficie: #ffffff; --zx-texto: #2b2135; --zx-texto-suave: #5a5a5a; --zx-titulo: var(--zx-morado); /* EL ACENTO CLARO NO PUEDE SER EL MORADO CORPORATIVO A SECAS (fase 5). La banda de marca —la barra de Ace y el pie— es ese mismo morado en los dos temas, así que con el acento igual, el bloque del usuario que va ENCIMA de la banda desaparecía: morado sobre morado. Se baja un escalón de la escala. Sigue siendo corporativo y da 9,9:1 sobre blanco, de sobra para AA. */ --zx-acento: var(--zx-morado-600); --zx-acento-hover: var(--zx-morado-700); --zx-borde: var(--zx-gris); --zx-suave: #eae6ee; --zx-eyebrow: var(--zx-morado-500); --zx-sombra: 0 2px 12px rgba(48, 22, 73, 0.12); --zx-exito: #1e6e42; --zx-exito-bg: #e4f2ea; --zx-aviso: #8a5410; --zx-aviso-bg: #fdf0da; --zx-error: #b3261e; --zx-error-bg: #f9e5e4; --zx-info: #1d5bbf; --zx-info-bg: #e3edfb; } /* ════════════════════════════════════════════════════════════════════════════ TOKENS DE PAPEL (fase 5, 06/08/2026) POR QUÉ HACEN FALTA, Y CUÁL ERA EL PROBLEMA El repintado de Ace (zulux-ace-override.css) ya usaba tokens... pero de los ABSOLUTOS: 21 usos de --zx-morado-800, 18 de --zx-morado-700, 16 de --zx-amarillo y 15 de --zx-blanco. O sea que decía «píntalo de morado oscuro», no «píntalo del color que le toque a un panel». Con eso, cambiar de tema no habría servido de nada: el morado seguiría siendo morado. Estos tokens dicen el PAPEL que hace cada color —panel, hueco, realce, texto sobre panel...— y cada tema le da su valor. Así el repintado se escribe una sola vez y vale para los dos temas. No sustituyen a los semánticos de arriba (--zx-fondo, --zx-texto...): los completan. Aquellos cubren el fondo y el texto de la página; estos, las piezas de la plantilla Ace. NO SE DEFINEN EN :root, Y ES A PROPÓSITO Solo existen dentro de un tema. Los consume únicamente el repintado, que no aplica si no hay tema, así que un juego por defecto en :root solo serviría para tapar errores. La barra superior y los avisos NO usan estos tokens: llevan sus propias variables, heredadas del tablero, en sus respectivas hojas. ════════════════════════════════════════════════════════════════════════════ */ :root[data-tema="oscuro"] { /* Igual que los semánticos de arriba: estos valores salen de dashboard2.css, no se eligen aquí. Al lado de cada uno, de qué variable del tablero sale. */ --zx-panel: #2d2358; /* --card2: cabeceras, franjas y paneles elevados */ --zx-hueco: #1a1432; /* --bg2: el interior de los campos */ --zx-hundido: #1a1432; /* --bg2: el pie de los modales */ /* EL CAMBIO QUE MÁS SE NOTA. Era #3f1e5e, un morado sólido; ahora es el velo del tablero (--gris-claro), que es lo que usa allí .pte-tbl tr:hover, .noti-row:hover y .usuario:hover. Al ser translúcido deja ver la superficie de debajo, y por eso las tablas del tablero se sienten más ligeras que las clásicas. */ --zx-realce: rgba(255, 255, 255, .06); /* --gris-claro */ --zx-borde-fuerte: rgba(255, 255, 255, .15); /* Aquí SÍ se mantiene el blanco puro y no el --tinta del tablero: este token es el texto de las franjas de cabecera, donde interesa que destaque más que el texto corriente. El texto corriente sí es --tinta (ver --zx-texto). */ --zx-sobre-panel: var(--zx-blanco); --zx-lateral: #1a1432; /* --bg2, un escalón por encima del fondo */ --zx-lateral-texto: var(--zx-texto); /* La banda de marca —la barra de Ace y el pie— se queda MORADA en los dos temas: es identidad corporativa, no decoración del tema. */ --zx-banda: var(--zx-morado); --zx-sobre-banda: var(--zx-blanco); --zx-sobre-banda-tenue: var(--zx-morado-100); /* El acento ya cambia arriba (--zx-acento: amarillo en oscuro, morado en claro). Lo que faltaba es de qué color va el texto ENCIMA del acento, que es justo al revés en cada tema: oscuro sobre amarillo, claro sobre morado. */ --zx-sobre-acento: #1a1432; /* el que usa el tablero en .btn.primario y .ct-badge */ --zx-acento-borde: #e0b400; /* --accent-osc */ /* En oscuro los dos hover ACLARAN, que es lo que hace el tablero en .btn.primario:hover. En claro los dos oscurecen. Siguen siendo dos tokens porque en claro no tienen por qué coincidir. */ --zx-enlace-hover: #ffd84d; /* El botón normal. También del tablero: allí .btn no lleva color propio, lleva el mismo velo que el hover, y el texto es el corriente. */ --zx-boton: rgba(255, 255, 255, .06); /* --gris-claro */ --zx-boton-borde: var(--zx-borde); --zx-boton-hover: rgba(255, 255, 255, .10); /* .btn:hover del tablero */ --zx-boton-hover-borde: rgba(255, 255, 255, .15); --zx-sobre-boton: var(--zx-texto); --zx-cebra: rgba(255, 255, 255, .03); /* la banda alterna de las tablas */ --zx-foco: rgba(255, 206, 3, .18); /* el anillo del campo con el foco */ /* El tinte del acento: el fondo que deja una pastilla o una tarjeta al pasar por encima. En el tablero es --accent-claro. */ --zx-acento-velo: rgba(255, 206, 3, .13); /* Las barras de desplazamiento. El tablero las tematiza para TODA la página con una regla de `*`, así que si no siguen al tema se quedan blancas sobre claro y no se ven. */ --zx-desliz: rgba(255, 255, 255, .18); --zx-desliz-suave: rgba(255, 255, 255, .10); --zx-desliz-fuerte: rgba(255, 255, 255, .32); /* Dos colores de CATEGORÍA del tablero, que no son estado: el turquesa de los partes y el violeta de RRHH. Están aquí porque también se usan como TEXTO, y el turquesa sobre blanco se queda en 1,9:1 —ilegible—, así que en claro necesitan su versión. */ --zx-turquesa: #2dd4bf; --zx-violeta: #b388ff; /* El texto que va encima de un color de ESTADO sólido (un botón verde, una pastilla azul). En oscuro los estados son tonos vivos y el texto va oscuro; en claro los estados se oscurecen para poder leerse sobre blanco, y entonces el texto va claro. Onboarding usaba un tono distinto para cada uno (#04223a sobre el azul, #06210b sobre el verde, #2a1233 sobre el lila); se unifican, porque los tres son el mismo casi-negro y la diferencia no se aprecia. */ --zx-sobre-estado: #0c1420; } /* El juego claro vale también para CLÁSICO. En las pantallas clásicas da igual —allí clásico no repinta nada— pero en las modernas no hay un Ace al que volver, así que clásico se resuelve como claro. Sin esto, en las modernas los tokens quedarían sin definir y las propiedades que los usan se volverían inválidas. */ :root[data-tema="claro"], :root[data-tema="clasico"] { --zx-panel: #efe9f6; --zx-hueco: #ffffff; --zx-hundido: #f4f0f9; --zx-realce: #e4dbf0; --zx-borde-fuerte: var(--zx-morado-200); --zx-sobre-panel: var(--zx-morado-800); --zx-lateral: #f6f3fa; --zx-lateral-texto: var(--zx-morado-700); --zx-banda: var(--zx-morado); --zx-sobre-banda: var(--zx-blanco); --zx-sobre-banda-tenue: var(--zx-morado-100); --zx-sobre-acento: var(--zx-blanco); --zx-acento-borde: var(--zx-morado-700); --zx-enlace-hover: var(--zx-acento-hover); --zx-boton: #ece6f3; --zx-boton-borde: var(--zx-morado-200); --zx-boton-hover: #e0d5ec; --zx-boton-hover-borde: var(--zx-morado-300); --zx-sobre-boton: var(--zx-morado-800); --zx-cebra: rgba(48, 22, 73, .035); --zx-foco: rgba(48, 22, 73, .16); --zx-acento-velo: rgba(78, 40, 115, .10); --zx-desliz: rgba(48, 22, 73, .22); --zx-desliz-suave: rgba(48, 22, 73, .14); --zx-desliz-fuerte: rgba(48, 22, 73, .38); --zx-turquesa: #0d7a6d; --zx-violeta: #6236b0; --zx-sobre-estado: #ffffff; }