/* ========================================================================== GeoMap · HCP-Data — tokens.css (25 sep 2026) Fuente única de colores y medidas para todas las páginas (dashboard, fallas recurrentes, administración; el mapa se suma en una etapa próxima). Regla: el color significa ESTADO. Rojo/naranja/verde solo cuando el dato está en ese estado; lo interactivo usa un único acento (--color-accent). Tema: (clave localStorage 'dashboard-theme'). ========================================================================== */ /* 26 sep 2026 (PageSpeed): fuentes servidas por el propio servidor (frontend/vendor/fonts/), antes Google Fonts (2 conexiones externas antes de poder dibujar). Inter y JetBrains Mono variables, subconjunto latino (incluye á é í ó ú ñ ü ¿ ¡). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../vendor/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tema claro (tokens de Grafana Light) ---- */ :root { --bg-canvas: #fbfbfb; --bg-panel: #ffffff; --bg-surface: #f4f5f5; --border-weak: rgba(36, 41, 46, 0.12); --border-medium: rgba(36, 41, 46, 0.3); --text-primary: #24292e; --text-secondary: rgba(36, 41, 46, 0.75); --text-disabled: rgba(36, 41, 46, 0.5); /* alias históricos (los sigue usando código viejo) */ --color-bg-primary: var(--bg-canvas); --color-bg-secondary: var(--bg-panel); --color-bg-tertiary: var(--bg-surface); --color-bg-header: var(--bg-panel); --color-border: var(--border-weak); --color-border-strong: var(--border-medium); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-light: var(--text-disabled); /* estados: *-solid = rellenos, barras, bordes; sin sufijo = texto */ --color-success: #0a764e; --color-success-solid: #1b855e; --color-warning: #b04e0c; --color-warning-solid: #ff9900; --color-critical: #cf0e5b; --color-critical-solid: #e0226e; --color-info: #1f62e0; --color-info-solid: #3871dc; --color-accent: #1f62e0; /* series por servidor (categóricas, sin verde ni rojo para no confundirse con estado) */ --serie-1: #3d71d9; --serie-2: #7c5cd6; --serie-3: #0b8fa0; /* escala tipográfica (mínimo 11 px) */ --fs-hero: 40px; --fs-metric: 22px; --fs-title: 15px; --fs-body: 13px; --fs-small: 12px; --fs-label: 11px; /* radios y sombra de capas flotantes */ --radius: 4px; --radius-pill: 999px; --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18); } /* ---- Tema oscuro (tokens de Grafana Dark) ---- */ [data-theme="dark"] { --bg-canvas: #111217; --bg-panel: #181b1f; --bg-surface: #22252b; --border-weak: rgba(204, 204, 220, 0.12); --border-medium: rgba(204, 204, 220, 0.2); --text-primary: #ccccdc; --text-secondary: rgba(204, 204, 220, 0.65); --text-disabled: rgba(204, 204, 220, 0.4); --color-success: #6ccf8e; --color-success-solid: #1a7f4b; --color-warning: #fbad37; --color-warning-solid: #ff9900; --color-critical: #ff5286; --color-critical-solid: #d10e5c; --color-info: #6e9fff; --color-info-solid: #3d71d9; --color-accent: #6e9fff; --serie-1: #6e9fff; --serie-2: #a58bf5; --serie-3: #3cc4d4; } html[data-theme="dark"] { color-scheme: dark; } /* ---- Accesibilidad: sin animaciones si el sistema lo pide ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== Modo oscuro para las páginas hechas con Tailwind (admin.html). tailwind.min.css es un build estático sin variantes dark:, así que se pisan las clases utilitarias bajo html[data-theme="dark"] (mismo criterio que css/style.css del mapa, con los tokens de arriba). ========================================================================== */ html[data-theme="dark"] .bg-slate-100 { background-color: var(--bg-canvas); } html[data-theme="dark"] .bg-slate-50 { background-color: var(--bg-surface); } html[data-theme="dark"] .bg-slate-200 { background-color: #0c0e12; } html[data-theme="dark"] .bg-white { background-color: var(--bg-panel); } html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover, html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #262a33; } html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-weak); } html[data-theme="dark"] .border-slate-300 { border-color: var(--border-medium); } html[data-theme="dark"] .text-slate-900 { color: #f4f4f8; } html[data-theme="dark"] .text-slate-800 { color: #e2e2ea; } html[data-theme="dark"] .text-slate-700 { color: #c8c8d6; } html[data-theme="dark"] .text-slate-600 { color: #a9a9bb; } html[data-theme="dark"] .text-slate-500 { color: #8a8aa0; } html[data-theme="dark"] .text-slate-400 { color: #74748a; } html[data-theme="dark"] .hover\:text-slate-800:hover { color: #f4f4f8; } html[data-theme="dark"] .placeholder-slate-400::placeholder { color: #74748a; } html[data-theme="dark"] .text-ok-600 { color: var(--color-success); } html[data-theme="dark"] .text-bad-600 { color: var(--color-critical); } html[data-theme="dark"] .text-brand-600 { color: var(--color-info); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #383b42; } html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #4b4f58; }