/* Tres temas: Oscuro (por defecto), Glass y Claro. Valores tomados de diseno/. */
:root {
  color-scheme: dark;
  --bg: #0E1013; --nav: #08090B; --hero: #1E2530; --surface: #171A1F; --soft: #1C2026; --soft2: #23272E; --soft3: #2A2F37;
  --seg: #23272E; --pillon: #3B4452; --idle: #3A4250; --ink: #E8EAED; --muted: #A3ACB8; --primary: #E8EAED; --onprimary: #111418;
  --line: #2A2F37; --line2: #3A414C; --line3: #23272E; --blue: #7DB3FB; --bluebg: #2563EB; --bluedeep: #BFDBFE; --bluehover: #BFDBFE;
  --chart1: #93C5FD; --chart2: #3B82F6; --chart3: #1D4ED8; --chart4: #1E3A5F; --orange: #FB923C; --orangebg: #EA580C; --orange2: #C2410C;
  --warnbg: #2A1A0E; --warnbd: #7C2D12; --warnfg: #FDBA74; --warnfg2: #FED7AA; --infobg: #13203A; --infobd: #1E3A8A;
  --okbg: #0F2A1B; --okbd: #14532D; --ok: #4ADE80; --okbar: #22C55E; --ok2: #86EFAC; --violet: #C4B5FD;
  --nav-ink: #F4F5F7; --nav-muted: #9AA3AE; --nav-activo: #23272E; --error: #FCA5A5; --errorbg: #2A1215;
  --h1b: #3A1D0C; --h1f: #FED7AA; --h2b: #6B2F0E; --h2f: #FFEDD5; --h3b: #9A3412; --h3f: #FFFFFF; --h4b: #C2410C; --h4f: #FFFFFF; --h5b: #F97316; --h5f: #1C0A02;
  --fondo-pagina: var(--bg); --sombra: none; --desenfoque: none;
}
html[data-tema="claro"] {
  color-scheme: light;
  --bg: #F4F5F7; --nav: #111418; --hero: #111418; --surface: #FFFFFF; --soft: #F7F8FA; --soft2: #F1F3F5; --soft3: #E2E8F0;
  --seg: #E9ECF0; --pillon: #FFFFFF; --idle: #CBD5E1; --ink: #111418; --muted: #5B6470; --primary: #111418; --onprimary: #FFFFFF;
  --line: #E3E6EA; --line2: #D5DAE0; --line3: #EEF0F3; --blue: #1D4ED8; --bluebg: #1D4ED8; --bluedeep: #1E3A8A; --bluehover: #1E3A8A;
  --chart1: #1E3A8A; --chart2: #60A5FA; --chart3: #93C5FD; --chart4: #DBEAFE; --orange: #C2410C; --orangebg: #C2410C; --orange2: #9A3412;
  --warnbg: #FFF7ED; --warnbd: #FED7AA; --warnfg: #9A3412; --warnfg2: #7C2D12; --infobg: #EFF6FF; --infobd: #BFDBFE;
  --okbg: #DCFCE7; --okbd: #BBF7D0; --ok: #15803D; --okbar: #15803D; --ok2: #166534; --violet: #5B21B6;
  --nav-ink: #F4F5F7; --nav-muted: #9AA3AE; --nav-activo: #23272E; --error: #B91C1C; --errorbg: #FEF2F2;
  --h1b: #FFEDD5; --h1f: #7C2D12; --h2b: #FDBA74; --h2f: #431407; --h3b: #F97316; --h3f: #1C0A02; --h4b: #C2410C; --h4f: #FFFFFF; --h5b: #7C2D12; --h5f: #FFFFFF;
  --fondo-pagina: var(--bg);
}
html[data-tema="glass"] {
  color-scheme: dark;
  --bg: #141726; --nav: rgba(10, 12, 24, 0.38); --hero: rgba(255, 255, 255, 0.1); --surface: rgba(22, 24, 38, 0.38);
  --soft: rgba(255, 255, 255, 0.08); --soft2: rgba(255, 255, 255, 0.12); --soft3: rgba(255, 255, 255, 0.16);
  --seg: rgba(255, 255, 255, 0.1); --pillon: rgba(255, 255, 255, 0.26); --idle: rgba(255, 255, 255, 0.3);
  --ink: #FFFFFF; --muted: rgba(255, 255, 255, 0.9); --primary: #FFFFFF; --onprimary: #111418;
  --line: rgba(255, 255, 255, 0.16); --line2: rgba(255, 255, 255, 0.26); --line3: rgba(255, 255, 255, 0.1);
  --blue: #BFDBFE; --bluebg: #3B82F6; --bluedeep: #DBEAFE; --bluehover: #FFFFFF;
  --chart1: #BFDBFE; --chart2: #60A5FA; --chart3: #3B82F6; --chart4: rgba(255, 255, 255, 0.2);
  --orange: #FDBA74; --orangebg: #F97316; --orange2: #EA580C;
  --warnbg: rgba(249, 115, 22, 0.25); --warnbd: rgba(253, 186, 116, 0.5); --warnfg: #FED7AA; --warnfg2: #FFEDD5;
  --infobg: rgba(59, 130, 246, 0.25); --infobd: rgba(191, 219, 254, 0.4); --okbg: rgba(34, 197, 94, 0.22); --okbd: rgba(134, 239, 172, 0.4);
  --ok: #86EFAC; --okbar: #22C55E; --ok2: #BBF7D0; --violet: #DDD6FE;
  --nav-ink: #FFFFFF; --nav-muted: rgba(255, 255, 255, 0.72); --nav-activo: rgba(255, 255, 255, 0.18); --error: #FECACA; --errorbg: rgba(239, 68, 68, 0.28);
  --fondo-pagina: linear-gradient(180deg, #121A33 0%, #27285A 30%, #5B3F78 52%, #B66A7A 70%, #E8A374 82%, #3A2A3A 100%);
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 40px rgba(5, 6, 15, 0.35);
  --desenfoque: blur(28px) saturate(160%);
}

/* Glass liviano en celular y pantallas tactiles: sin desenfoque de fondo (pesado para el GPU) y con superficies mas opacas para que se lea igual */
@media (max-width: 760px), (pointer: coarse) {
  html[data-tema="glass"] {
    --desenfoque: none; --surface: rgba(22, 24, 38, 0.78); --nav: rgba(10, 12, 24, 0.86);
    --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}