/* ================================================================ SGF — TEMAS ---------------------------------------------------------------- Tipografías + tokens de color de los tres temas. Va aparte de estilosNuevos.css porque el login (inicio.jsp) necesita los tokens pero no las reglas de componentes: cargarlas ahí le rompería el layout (empezando por el padding sobre .w3-container). Lo cargan htmlHeadRecupero.jspf (las 94 pantallas) e inicio.jsp. ================================================================ */ /* ---------------------------------------------------------------- TIPOGRAFÍAS (servidas desde el proyecto, sin depender de Google) ---------------------------------------------------------------- */ @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/gabarito-600.woff2') format('woff2'); } /* Open Sans es una fuente variable: un solo archivo cubre 400 y 600 */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/opensans.woff2') format('woff2'); } /* ================================================================ TEMAS ---------------------------------------------------------------- El tema se elige con data-tema en , que las JSPs escriben antes de pintar con el tema guardado del usuario. Sin atributo = Perla y violeta. Hay dos temas: Perla y violeta, y Navbar rosa. Tokens de superficie vs. tinta — importante para el tema claro: --fs-navy TINTA primaria: texto y borde de botones, íconos, chips oscuros. Es oscura en TODOS los temas. --fs-band* SUPERFICIE de chrome: banda superior, barra de título, cabecera de grilla, footer, modales, calendario. En Perla es clara. --fs-on-band* Lo que va escrito encima del band. Antes las dos cosas eran --fs-navy; había que separarlas para que el header pueda ser claro sin que los botones se vuelvan ilegibles. ================================================================ */ /* ---------- PERLA Y VIOLETA (default) ---------- */ :root { --fs-navy: #2B2B2E; --fs-navy-dark: #1A1A1D; --fs-blue: #6E6875; --fs-blue-light: #F3EFF6; --fs-orange: #CB2385; --fs-orange-light: #FCEBF4; --fs-gray-bg: #E4E2E7; --fs-gray-light: #FBFAFC; --fs-gray-border: #D2CFD7; --fs-text: #1A1A1A; --fs-text-muted: #6B6772; --fs-white: #FFFFFF; --fs-band: #EDEAEF; --fs-band-from: #EDEAEF; --fs-band-to: #DCD7E0; --fs-on-band: #1A1A1A; --fs-on-band-soft: rgba(26, 26, 26, 0.72); --fs-on-band-line: rgba(26, 26, 26, 0.20); --fs-on-band-hover: rgba(26, 26, 26, 0.08); /* band claro: las flechas del calendario van negras */ --fs-band-filter: brightness(0); --fs-nav-bg: #2B2B2E; --fs-icon: #CB2385; --fs-badge-bg: #CB2385; --fs-badge-ink: #FFFFFF; --fs-select: #CB2385; --fs-focus: rgba(203, 35, 133, 0.22); --fs-accent-hover: #C71F8F; --fs-cta: #CB2385; --fs-second: #8B2FE0; --fs-second-bg: #F1E7FD; --fs-second-ink: #5B1BA0; --fs-font-ui: 'Open Sans', 'Segoe UI', Arial, sans-serif; --fs-font-display: 'Gabarito', 'Segoe UI', Arial, sans-serif; --fs-success: #198754; --fs-success-bg: #D1F0DF; --fs-radius: 6px; --fs-shadow: 0 1px 4px rgba(0, 0, 0, 0.09); --fs-shadow-md: 0 2px 10px rgba(43, 43, 46, 0.14); } /* ---------- NAVBAR ROSA ---------- */ :root[data-tema="rosa"] { --fs-navy: #141414; --fs-navy-dark: #000000; --fs-blue: #4A4A4A; --fs-blue-light: #EFECEE; --fs-orange: #CB2385; --fs-orange-light: #FCEBF4; --fs-gray-bg: #ECECEC; --fs-gray-light: #FBFBFB; --fs-gray-border: #D6D6D6; --fs-text: #1A1A1A; --fs-text-muted: #6B6B6B; --fs-band: #141414; --fs-band-from: #141414; --fs-band-to: #4A4A4A; --fs-on-band: #FFFFFF; --fs-on-band-soft: rgba(255, 255, 255, 0.85); --fs-on-band-line: rgba(255, 255, 255, 0.25); --fs-on-band-hover: rgba(255, 255, 255, 0.12); --fs-band-filter: brightness(0) invert(1); --fs-nav-bg: #CB2385; /* la navbar ya es rosa: un ícono o un badge rosa encima no se verían */ --fs-icon: #FFFFFF; --fs-badge-bg: #FFFFFF; --fs-badge-ink: #CB2385; --fs-select: #CB2385; --fs-focus: rgba(203, 35, 133, 0.22); --fs-accent-hover: #C71F8F; --fs-cta: #CB2385; --fs-second: #0FB5A6; --fs-second-bg: #E1F6F4; --fs-second-ink: #0A6E64; --fs-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.16); } /* ---------------------------------------------------------------- FUENTE BASE — cada tema define cuál es ---------------------------------------------------------------- */ body { font-family: var(--fs-font-ui); }