/* ============================================================ OPTIVÍA — Firma visual compartida (brand tokens) ------------------------------------------------------------ Tokens de marca + reset + base tipográfica. Pensado para mantenerse SINCRONIZADO con el proyecto hermano (Optivia- monitoreo/shared/optivia-brand.css): mismas primitivas, misma tipografía. Solo afecta apariencia, NO funcionamiento. DIVERGENCIA INTENCIONAL respecto al hermano (2026-06-28): --text-3 = #6d6b60 (AA ~4.6:1). El hermano aún tiene #9a9890 (~2.9:1, reprueba AA). Recomendación: portar este fix al hermano. Colores de DOMINIO (RAM, prioridad, cumplimiento, frescura…) y tokens de ESCALA viven en theme.css, no aquí. Tipografía: cada HTML debe enlazar DM Sans / DM Mono (Google Fonts) en su . Las páginas enlazan este archivo ANTES de theme.css. ============================================================ */ /* Reset universal */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Paleta base OptiVía */ --bg: #f5f4f0; --surface: #ffffff; --surface-2: #faf9f5; --border: #e2e0d8; --border-2: #d0cec6; /* Texto */ --text-1: #1a1916; --text-2: #5a5850; --text-3: #6d6b60; /* AA: ~4.6:1 sobre superficie clara (el hermano usa #9a9890, reprueba) */ /* Header/brand */ --navy: #1a2744; --navy-soft: #2a3656; --sky: #7ab8f5; /* Acentos y semánticos */ --blue: #0c447c; --blue-mid: #378ADD; --blue-bg: #e6f0fb; --green: #1a6b3c; --green-bg: #e8f5ee; --green-bd: #b8e0c8; --amber: #7a4a00; --amber-bg: #fdf0d8; --amber-bd: #e8c870; --orange: #c2410c; --orange-bg: #fff1e6; --red: #a32d2d; --red-bg: #fce8e8; --purple: #6d3d9e; --purple-bg: #f0e8f8; /* Bordes de los acentos (para chips/banners semánticos) */ --blue-bd: #cfe0f5; --red-bd: #e8b8b8; --purple-bd: #d4c4e8; --orange-bd: #f3c9a8; /* Texto sobre acentos saturados (botones success/danger, etc.) */ --on-accent: #ffffff; /* Velo de carga sobre superficie clara (loading-overlay, mapa cargando) */ --scrim: rgba(255,255,255,.82); /* Hover de botones de acento */ --green-h: #155830; --amber-h: #5d3800; --red-h: #862626; --blue-h: #2a6fb8; /* Tipografía base */ --mono: 'DM Mono', monospace; --sans: 'DM Sans', sans-serif; /* Indica al navegador el esquema activo (controles nativos, scrollbars) */ color-scheme: light; } /* ============================================================ MODO OSCURO — [data-theme="dark"] Tokens reales del proyecto hermano (Optivia-monitoreo) para coherencia de design system. Solo se redefinen las PRIMITIVAS; los tokens semánticos/de dominio (en theme.css) se construyen con var(--blue-mid), var(--green), etc., así que cambian solos. El tema lo fija theme-init.js en antes del primer paint. ============================================================ */ [data-theme="dark"] { --bg: #13161c; --surface: #1b1f27; --surface-2: #232833; --border: #2e333f; --border-2: #3c424f; --text-1: #e8e9ec; --text-2: #b3b6bf; --text-3: #9aa0ab; --navy: #161d33; --navy-soft: #232c47; --sky: #8cc2f7; --blue: #6fb0f0; --blue-mid: #5aa0e8; --blue-bg: #15263a; --green: #5fd08a; --green-bg: #122a1c; --green-bd: #1f5538; --amber: #f0b84a; --amber-bg: #2c2310; --amber-bd: #6b5520; --orange: #f0904a; --orange-bg: #2e1d10; --red: #f08a8a; --red-bg: #2e1717; --purple: #c79cf0; --purple-bg: #241a33; --blue-bd: #2a4566; --red-bd: #6b2e2e; --purple-bd: #4a3566; --orange-bd: #6b4520; --on-accent: #13161c; --scrim: rgba(0,0,0,.55); --green-h: #7fe0a4; --amber-h: #f5ca72; --red-h: #f5a8a8; --blue-h: #8cc2f7; color-scheme: dark; } /* ============================================================ BASE — reset de elementos y tipografía ============================================================ */ html, body { height: 100%; font-family: var(--sans); background: var(--bg); color: var(--text-1); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } button { font-family: var(--sans); cursor: pointer; border: none; outline: none; background: none; } input, select, textarea { font-family: var(--sans); outline: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img { display: block; max-width: 100%; height: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } /* ============================================================ ICONOGRAFÍA — Phosphor Icons (variante duotone). SIN EMOJIS. Toda la iconografía de la UI usa . Este fix corrige la alineación vertical del web-font respecto al texto. ============================================================ */ i[class^="ph-"], i[class*=" ph-"] { vertical-align: -0.125em; line-height: 1; } /* Accesibilidad */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }