/* /v11/css/theme.css
   Variables y temas. Colores por programa y ALERTA.
   Ajustes:
   - theme-sunset (sepia amable)
   - theme-cyan (taupe outline más claro, legible y descansado)
   - theme-chess-light / theme-chess-dark (ajedrez claro/oscuro)
   - Sombras / glow por tema (no tocan layout: mismas alturas y bordes).
*/

/* ========== Variables base ========== */
:root {
  --bg-color: #f5f5f5;
  --text-color: #111;
  --accent-color: #000;

  --fg-color: var(--text-color);
  --fg-muted: #444;
  --card-bg: #ffffff;
  --input-bg: #f5f5f5;
  --input-bd: #e1e1e1;
  --btn-bg: #fafafa;
  --btn-bd: #e1e1e1;

  --font-main: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-title: 'Press Start 2P', ui-monospace, monospace;
  --radius: 1rem;

  /* outline por defecto: se mantiene igual en TODOS los temas
     para que NADA se mueva al cambiar de tema */
  --outline-w: 2px;
  --outline-w-current: 2px;

  /* Sombras y glow base (se pueden usar en components.css) */
  --card-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.06);
  --card-shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.10);
  --card-shadow-flat: 0 0 0 rgba(0, 0, 0, 0);

  --glow-soft: 0 0 18px rgba(0, 0, 0, 0.16);
  --glow-strong: 0 0 26px rgba(0, 0, 0, 0.22);
}

/* ========== 1) Light (color original, con sombras suaves) ========== */
.theme-light-colorful {
  --bg-color: #fafafa;
  --text-color: #111;
  --accent-color: #000;

  --fg-color: var(--text-color);
  --fg-muted: #333;
  --card-bg: #ffffff;
  --input-bg: #f5f5f5;
  --input-bd: #e1e1e1;
  --btn-bg: #fafafa;
  --btn-bd: #e1e1e1;

  --card-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.08);
  --card-shadow-hero: 0 18px 46px rgba(0, 0, 0, 0.12);
  --glow-soft: 0 0 18px rgba(0, 0, 0, 0.14);
  --glow-strong: 0 0 26px rgba(0, 0, 0, 0.20);
}

/* ========== 2) Dark (oscuro clásico) ========== */
.theme-dark-colorful,
.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --accent-color: #bdbdbd;

  --fg-color: var(--text-color);
  --fg-muted: #b5b5b5;
  --card-bg: #121212;
  --input-bg: #1a1a1a;
  --input-bd: #2a2a2a;
  --btn-bg: #1a1a1a;
  --btn-bd: #2a2a2a;

  --card-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.55);
  --card-shadow-hero: 0 20px 54px rgba(0, 0, 0, 0.75);
  --glow-soft: 0 0 18px rgba(0, 0, 0, 0.55);
  --glow-strong: 0 0 30px rgba(0, 0, 0, 0.8);
}

/* ========== 3) Sunset – sepia amable ========== */
.theme-sunset {
  --bg-color: #FCF5E7;
  --text-color: #2E261E;
  --accent-color: #E96E4C;

  --fg-color: var(--text-color);
  --fg-muted: #5a4a40;
  --card-bg: #FFFFFF;
  --input-bg: #F8EEE2;
  --input-bd: #F0D8C7;
  --btn-bg: #F8EEE2;
  --btn-bd: #F0D8C7;

  --card-shadow-soft: 0 12px 32px rgba(152, 125, 98, 0.18);
  --card-shadow-hero: 0 18px 48px rgba(152, 125, 98, 0.26);
  --glow-soft: 0 0 20px rgba(233, 110, 76, 0.28);
  --glow-strong: 0 0 30px rgba(233, 110, 76, 0.38);
}

/* ========== 4) Cyan – gris/taupe oscuro ========== */
.theme-cyan {
  --bg-color: #2F2C29;
  --text-color: #F0EEE9;
  --accent-color: #CFC6BC;
  --fg-color: var(--text-color);
  --fg-muted: #C0B8AF;

  --card-bg: #383431;
  --input-bg: #35312E;
  --input-bd: #4A4642;
  --btn-bg: #35312E;
  --btn-bd: #4A4642;

  --outline-bd: #4F4A46;
  --outline-bg-current: #3B3733;

  --card-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.65);
  --card-shadow-hero: 0 22px 56px rgba(0, 0, 0, 0.85);
  --glow-soft: 0 0 22px rgba(207, 198, 188, 0.36);
  --glow-strong: 0 0 32px rgba(207, 198, 188, 0.50);
}

.theme-cyan .program-card {
  background: transparent !important;
  border-color: var(--outline-bd) !important;
  color: var(--text-color) !important;
}

.theme-cyan .program-card.current-program {
  background: var(--outline-bg-current) !important;
}

.theme-cyan .program-card .program-title,
.theme-cyan .program-card .program-desc,
.theme-cyan .program-card .program-meta,
.theme-cyan .program-card a {
  color: var(--text-color) !important;
}

.theme-cyan .footer-info i,
.theme-cyan #streamCircle {
  text-shadow: 0 0 6px color-mix(in oklab, var(--accent-color) 40%, transparent);
}

/* ========== 5) Grayscale (gris claro / NOIR por programa) ========== */
.theme-grayscale {
  --bg-color: #e0e0e0;
  --text-color: #111;
  --accent-color: #333;

  --fg-color: var(--text-color);
  --fg-muted: #333;
  --card-bg: #ffffff;
  --input-bg: #efefef;
  --input-bd: #d8d8d8;
  --btn-bg: #f3f3f3;
  --btn-bd: #d8d8d8;

  --card-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.16);
  --card-shadow-hero: 0 14px 32px rgba(0, 0, 0, 0.24);
  --glow-soft: 0 0 18px rgba(0, 0, 0, 0.20);
  --glow-strong: 0 0 26px rgba(0, 0, 0, 0.28);
}

/* Escala de grises: cada programa con un nivel distinto (excepto ALERTA) */
.theme-grayscale .program-card[data-folder="sp"]:not([data-folder="alert"]) {
  --card-bg: #f2f2f2; /* Sweet Pop — gris más claro */
}
.theme-grayscale .program-card[data-folder="dm"]:not([data-folder="alert"]) {
  --card-bg: #e6e6e6; /* Dimension — gris claro */
}
.theme-grayscale .program-card[data-folder="pg"]:not([data-folder="alert"]) {
  --card-bg: #d9d9d9; /* Plugged — gris medio */
}
.theme-grayscale .program-card[data-folder="bpm"]:not([data-folder="alert"]) {
  --card-bg: #cccccc; /* BPM — gris algo más intenso */
}
.theme-grayscale .program-card[data-folder="ex"]:not([data-folder="alert"]) {
  --card-bg: #bfbfbf; /* Experience — gris más oscuro */
}

/* Fallback para cualquier tarjeta no mapeada explícitamente, sin ALERTA */
.theme-grayscale .program-card:not([data-folder="alert"]) {
  background: var(--card-bg, #cccccc) !important;
  color: #111 !important;
}

/* ========== 6) Chess Light (minimalista, claro) ========== */
.theme-chess-light {
  --bg-color: #f7f7f7;
  --text-color: #111111;
  --accent-color: #111111;

  --fg-color: var(--text-color);
  --fg-muted: #444444;

  --card-bg: #ffffff;
  --input-bg: #f4f4f4;
  --input-bd: #dedede;
  --btn-bg: #f4f4f4;
  --btn-bd: #dedede;

  --card-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.10);
  --card-shadow-hero: 0 18px 40px rgba(0, 0, 0, 0.16);
  --glow-soft: 0 0 18px rgba(0, 0, 0, 0.18);
  --glow-strong: 0 0 28px rgba(0, 0, 0, 0.24);
}

/* Fondo Chess Light: liso */
html.theme-chess-light body {
  background-color: #f7f7f7;
  background-image: none;
}

/* Tarjetas normales, pero NO pisamos ALERTA */
html.theme-chess-light .program-card:not([data-folder="alert"]) {
  background: #ffffff !important;
}

/* ========== 7) Chess Dark (fondo negro, tarjetas claras) ========== */
.theme-chess-dark {
  --bg-color: #000000; /* antes #111111, ahora negro pleno para igualar fondo */
  --text-color: #f5f5f5;
  --accent-color: #f5f5f5;

  --fg-color: var(--text-color);
  --fg-muted: #d0d0d0;

  --card-bg: #181818;
  --input-bg: #181818;
  --input-bd: #303030;
  --btn-bg: #181818;
  --btn-bd: #303030;

  --card-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.70);
  --card-shadow-hero: 0 22px 56px rgba(0, 0, 0, 0.90);
  --glow-soft: 0 0 22px rgba(255, 255, 255, 0.18);
  --glow-strong: 0 0 32px rgba(255, 255, 255, 0.26);
}

/* Fondo Chess Dark: liso */
html.theme-chess-dark body {
  background-color: #000000;
  background-image: none;
}

/* Tarjetas claras SOLO para programas normales.
   ALERTA mantiene su rojo y su estilo. */
html.theme-chess-dark .program-card:not([data-folder="alert"]) {
  background: #f5f5f5 !important;
  color: #111111 !important;
}

/* ========== Fondos por programa (se respeta currentColor para texto) ========== */
.program-card[data-folder="sp"]  { --card-bg: #FFE4E1; } /* Sweet Pop */
.program-card[data-folder="dm"]  { --card-bg: #D6EAF8; } /* Dimension */
.program-card[data-folder="pg"]  { --card-bg: #FAD7A0; } /* Plugged */
.program-card[data-folder="bpm"] { --card-bg: #E8DAEF; } /* BPM */
.program-card[data-folder="ex"]  { --card-bg: #B2DFDB; } /* Experience */

/* ALERTA: fondo consistente (texto se fuerza blanco en components.css) */
.program-card[data-folder="alert"] { --card-bg: #C62828; }

/* Escala de grises: neutraliza tarjetas (excepto ALERTA) — ajustado arriba por programa */
.theme-grayscale .program-card:not([data-folder="alert"]) {
  background: var(--card-bg, #cccccc) !important;
  color: #111 !important;
}