:root { /* Paleta "Precision Analytical" (Deep Space, Material 3) — TEMA OSCURO (por defecto) */ color-scheme: dark; --bg: #10131a; /* canvas de la app */ --bg2: #161b22; /* tarjetas / contenedores (nivel 1) */ --bg3: #21262d; /* superficie interactiva / hover / chips */ --inset: #0b0e14; /* fondo de inputs (efecto "inset", más oscuro) */ --border: #30363d; --accent: #3b82f6; /* acción primaria / foco */ --accent-soft: #adc6ff;/* acento claro: texto/iconos/estado activo */ --accent2: #22d3ee; /* secundario (charts) */ --green: #34d399; --red: #f87171; --yellow: #fbbf24; --purple: #a78bfa; /* texto de .tag.purple */ --text: #e1e2eb; --text2: #9aa0b0; /* Colores dependientes del tema que antes estaban escritos a mano */ --chart-grid: #2e3348; /* rejilla Chart.js */ --chart-tick: #94a3b8; /* ejes/leyendas Chart.js */ --shadow: rgba(0,0,0,.55); /* sombras de menú lateral / tooltips */ --shadow-soft: rgba(0,0,0,.4); /* sombras suaves (barra comparador, toasts, visor PDF) */ --overlay: rgba(0,0,0,.72); /* fondo de modales */ --overlay-strong: rgba(0,0,0,.8); /* fondo de comparadores */ --overlay-soft: rgba(0,0,0,.5); /* fondo tras el menú móvil */ --tint-blue: rgba(59,130,246,.22); /* anillo de foco, leyenda "hoja" */ --tint-blue-soft: rgba(59,130,246,.10); /* fila seleccionada, celda "hoja" */ --tint-amber: #78350f44; /* .tag.yellow */ --tint-amber-soft: rgba(245,158,11,.11); /* celda "api" */ --tint-amber-strong: rgba(245,158,11,.26); /* leyenda "api" */ --tint-red: #7f1d1d44; /* .tag.red */ --tint-violet: #4c1d9544; /* .tag.purple */ --tint-green: #14532d44; /* .tag.green */ --tint-navy: #1e3a5f44; /* .tag.blue */ --tint-gray: rgba(148,163,184,.28);/* leyenda "n/a" */ --tint-gray-soft: rgba(148,163,184,.09);/* celda "n/a" */ --radius: 8px; --radius-lg:12px; --sidebar-w:248px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* TEMA CLARO: solo redefine colores. Se activa con data-theme="light" en (ver el script de arranque en y toggleTheme()). */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f4f8; --bg2: #ffffff; --bg3: #e9ecf2; --inset: #f6f7fa; --border: #d5d9e2; --accent: #2563eb; --accent-soft: #1d4ed8; --accent2: #0e7490; --green: #047857; --red: #dc2626; --yellow: #b45309; --purple: #6d28d9; --text: #1a1d26; --text2: #5b6270; --chart-grid: #e2e5ec; --chart-tick: #5b6270; --shadow: rgba(15,18,26,.18); --shadow-soft: rgba(15,18,26,.12); --overlay: rgba(15,18,26,.45); --overlay-strong: rgba(15,18,26,.55); --overlay-soft: rgba(15,18,26,.30); --tint-blue: rgba(37,99,235,.12); --tint-blue-soft: rgba(37,99,235,.07); --tint-amber: rgba(180,83,9,.14); --tint-amber-soft: rgba(180,83,9,.09); --tint-amber-strong: rgba(180,83,9,.20); --tint-red: rgba(220,38,38,.12); --tint-violet: rgba(109,40,217,.12); --tint-green: rgba(4,120,87,.12); --tint-navy: rgba(37,99,235,.10); --tint-gray: rgba(91,98,112,.28); --tint-gray-soft: rgba(91,98,112,.09); }