/* =============================================================
   themes.css — Esquemas de color del portal
   -------------------------------------------------------------
   El tema por defecto ("Oscuro") es el estilo actual. Los demás
   temas (90s, 80s, 70s, 60s) se activan añadiendo el atributo
   data-theme al elemento <html> (lo hace themes.js). La elección
   se conserva en sessionStorage: persiste al navegar dentro de la
   pestaña y se borra al cerrarla. No usa cookies ni localStorage.

   Las variables se definen en :root (tema por defecto) y se
   sobrescriben para cada década en html[data-theme="..."]. Las
   reglas de "pintado" solo se aplican cuando hay un data-theme,
   para no alterar el aspecto original del tema oscuro.
   ============================================================= */

:root {
  --bg: #0b1020;
  --glow1: rgba(99, 102, 241, .35);
  --glow2: rgba(14, 165, 233, .28);
  --text: #e2e8f0;
  --heading: #f8fafc;
  --muted: #94a3b8;
  --dim: #64748b;
  --accent-light: #c7d2fe;
  --accent-soft: #a5b4fc;
  --surface-rgb: 17, 24, 39;
  --soft-rgb: 255, 255, 255;
  --border-rgb: 255, 255, 255;
  --drawer-rgb: 15, 23, 42;
  --overlay: rgba(5, 8, 18, .85);
  --a1: #6366f1;
  --a2: #22d3ee;
  --a3: #34d399;
  --a1l: #818cf8;
  --a1-rgb: 99, 102, 241;
  --a2-rgb: 34, 211, 238;
  --a3-rgb: 52, 211, 153;
  --on-accent: #06121f;
  --good: #34d399;
  --good-rgb: 52, 211, 153;
  --good-text: #a7f3d0;
  --bad: #f87171;
  --bad-rgb: 248, 113, 113;
  --bad-text: #fecaca;
  --grad: linear-gradient(135deg, var(--a1), var(--a2));
  --grad3: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
}

/* ---------- Paletas por década ---------- */

html[data-theme="90s"] {
  --bg: #e8ecf1;
  --glow1: rgba(0, 128, 128, .26);
  --glow2: rgba(153, 50, 204, .20);
  --text: #24303d;
  --heading: #16222e;
  --muted: #566a7c;
  --dim: #8596a6;
  --accent-light: #0f766e;
  --accent-soft: #8b2fb5;
  --surface-rgb: 255, 255, 255;
  --soft-rgb: 42, 54, 68;
  --border-rgb: 94, 114, 134;
  --drawer-rgb: 245, 248, 251;
  --overlay: rgba(22, 34, 46, .55);
  --a1: #008080;
  --a2: #7c3aed;
  --a3: #2563eb;
  --a1l: #0fa6a6;
  --a1-rgb: 0, 128, 128;
  --a2-rgb: 124, 58, 237;
  --a3-rgb: 37, 99, 235;
  --on-accent: #ffffff;
  --good: #2f8f46;
  --good-rgb: 47, 143, 70;
  --good-text: #155e2e;
  --bad: #c0392b;
  --bad-rgb: 192, 57, 43;
  --bad-text: #7f1d1d;
}

html[data-theme="80s"] {
  --bg: #fdf2f6;
  --glow1: rgba(236, 72, 153, .28);
  --glow2: rgba(45, 212, 191, .26);
  --text: #3b2a3a;
  --heading: #2a1a2e;
  --muted: #7d5a74;
  --dim: #a2839c;
  --accent-light: #be185d;
  --accent-soft: #c026d3;
  --surface-rgb: 255, 255, 255;
  --soft-rgb: 96, 44, 76;
  --border-rgb: 140, 88, 122;
  --drawer-rgb: 253, 244, 248;
  --overlay: rgba(56, 30, 50, .55);
  --a1: #db2777;
  --a2: #0d9488;
  --a3: #7c3aed;
  --a1l: #ec4899;
  --a1-rgb: 219, 39, 119;
  --a2-rgb: 13, 148, 136;
  --a3-rgb: 124, 58, 237;
  --on-accent: #fff6fa;
  --good: #2f8f46;
  --good-rgb: 47, 143, 70;
  --good-text: #155e2e;
  --bad: #c0392b;
  --bad-rgb: 192, 57, 43;
  --bad-text: #7f1d1d;
}

html[data-theme="70s"] {
  --bg: #f3ead7;
  --glow1: rgba(230, 126, 34, .30);
  --glow2: rgba(154, 126, 49, .28);
  --text: #3b2f1e;
  --heading: #2b2015;
  --muted: #7a6a4f;
  --dim: #9c8b6f;
  --accent-light: #8a5a1e;
  --accent-soft: #a46a1f;
  --surface-rgb: 255, 250, 235;
  --soft-rgb: 90, 66, 30;
  --border-rgb: 120, 90, 45;
  --drawer-rgb: 250, 242, 224;
  --overlay: rgba(43, 32, 21, .58);
  --a1: #c46a1f;
  --a2: #d4a017;
  --a3: #6b8e23;
  --a1l: #d98a2b;
  --a1-rgb: 196, 106, 31;
  --a2-rgb: 212, 160, 23;
  --a3-rgb: 107, 142, 35;
  --on-accent: #fff8ec;
  --good: #2f8f46;
  --good-rgb: 47, 143, 70;
  --good-text: #155e2e;
  --bad: #c0392b;
  --bad-rgb: 192, 57, 43;
  --bad-text: #7f1d1d;
}

html[data-theme="60s"] {
  --bg: #f6ecdd;
  --glow1: rgba(232, 93, 4, .35);
  --glow2: rgba(0, 150, 136, .30);
  --text: #3a2b1c;
  --heading: #291b0e;
  --muted: #7a5e45;
  --dim: #a0865f;
  --accent-light: #c2410c;
  --accent-soft: #d97706;
  --surface-rgb: 255, 246, 232;
  --soft-rgb: 110, 60, 15;
  --border-rgb: 130, 80, 35;
  --drawer-rgb: 252, 244, 230;
  --overlay: rgba(40, 28, 16, .58);
  --a1: #ea580c;
  --a2: #0d9488;
  --a3: #db2777;
  --a1l: #f97316;
  --a1-rgb: 234, 88, 12;
  --a2-rgb: 13, 148, 136;
  --a3-rgb: 219, 39, 119;
  --on-accent: #fff6ec;
  --good: #2f8f46;
  --good-rgb: 47, 143, 70;
  --good-text: #155e2e;
  --bad: #c0392b;
  --bad-rgb: 192, 57, 43;
  --bad-text: #7f1d1d;
}

/* ---------- Reglas de pintado (solo cuando hay tema de década) ---------- */

html[data-theme] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 20% 0%, var(--glow1), transparent 45%),
    radial-gradient(circle at 80% 100%, var(--glow2), transparent 45%);
  color: var(--text);
}

/* Textos */
html[data-theme] .hero h1,
html[data-theme] .tool-card h2,
html[data-theme] .modal h2,
html[data-theme] .sentence { color: var(--heading); }

html[data-theme] .title p,
html[data-theme] .hero .lead,
html[data-theme] .tool-card p,
html[data-theme] .hud-label,
html[data-theme] .bank-total,
html[data-theme] .modal .sub,
html[data-theme] .back-link,
html[data-theme] .category-title,
html[data-theme] .filters-head h2,
html[data-theme] .placeholder,
html[data-theme] .filter span { color: var(--muted); }

html[data-theme] .tag,
html[data-theme] .filter-note,
html[data-theme] .opt .key,
html[data-theme] .modal .stat .l,
html[data-theme] .footer,
html[data-theme] #poolInfo,
html[data-theme] .category-title .count,
html[data-theme] .hero .lead-en { color: var(--dim); }

html[data-theme] .hud-value,
html[data-theme] .bank-head h2,
html[data-theme] .modal .stat .n,
html[data-theme] .bank-total b { color: var(--accent-light); }

html[data-theme] .blank,
html[data-theme] .prep-count,
html[data-theme] .hero .h1-en { color: var(--accent-soft); }

html[data-theme] .opt,
html[data-theme] .prep-word { color: var(--text); }

html[data-theme] .back-link:hover { color: var(--text); }

/* Superficies */
html[data-theme] .card,
html[data-theme] .tool-card {
  background-color: rgba(var(--surface-rgb), .72);
  border-color: rgba(var(--border-rgb), .1);
}

html[data-theme] .bank,
html[data-theme] .placeholder {
  background-color: rgba(var(--surface-rgb), .6);
  border-color: rgba(var(--border-rgb), .1);
}

html[data-theme] .modal {
  background-color: rgba(var(--surface-rgb), .98);
  border-color: rgba(var(--border-rgb), .14);
}

html[data-theme] .filters,
html[data-theme] .hud-item,
html[data-theme] .prep-chip,
html[data-theme] .modal .stat,
html[data-theme] .eyebrow {
  background-color: rgba(var(--soft-rgb), .05);
  border-color: rgba(var(--border-rgb), .1);
}

html[data-theme] .filter span {
  background-color: rgba(var(--soft-rgb), .04);
  border-color: rgba(var(--border-rgb), .16);
}

html[data-theme] .opt,
html[data-theme] .btn-ghost {
  background-color: rgba(var(--soft-rgb), .06);
  border-color: rgba(var(--border-rgb), .16);
}

html[data-theme] .prep-count,
html[data-theme] .category-title .count {
  background-color: rgba(var(--soft-rgb), .12);
}

html[data-theme] .category-title .count { border-color: rgba(var(--border-rgb), .1); }

html[data-theme] .btn-ghost { color: var(--text); }

html[data-theme] .feedback-drawer {
  background-color: rgba(var(--drawer-rgb), .99);
  border-color: rgba(var(--border-rgb), .14);
}

html[data-theme] .overlay { background-color: var(--overlay); }

/* Acentos (gradientes y textos) */
html[data-theme] .tool-card::before,
html[data-theme] .card::before,
html[data-theme] .category-title::before { background: var(--grad3); }

html[data-theme] .cta,
html[data-theme] .start-btn,
html[data-theme] .btn-primary,
html[data-theme] .feedback-launcher {
  background: var(--grad);
  color: var(--on-accent);
}

html[data-theme] .title h1 {
  background: var(--grad3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme] .hero h1 span,
html[data-theme] .modal .big {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme] .tool-card:hover { border-color: rgba(var(--a1-rgb), .6); }
html[data-theme] .opt:hover {
  background-color: rgba(var(--a1-rgb), .25);
  border-color: var(--a1l);
}
html[data-theme] .blank:hover { background-color: rgba(var(--a1-rgb), .15); }
html[data-theme] .prep-chip::before {
  background: linear-gradient(90deg, rgba(var(--a1-rgb), .4), rgba(var(--a2-rgb), .16));
}

html[data-theme] .blank { border-bottom-color: var(--a1); }
html[data-theme] .blank.active {
  background-color: rgba(var(--a2-rgb), .16);
  border-bottom-color: var(--a2);
  color: var(--a2);
}

html[data-theme] .filter input:checked + span {
  background: linear-gradient(135deg, rgba(var(--a1-rgb), .35), rgba(var(--a2-rgb), .35));
  border-color: rgba(var(--a2-rgb), .75);
  color: var(--heading);
}

/* Colores semánticos (correcto / incorrecto) */
html[data-theme] .blank.ok {
  border-bottom-color: var(--good);
  color: var(--good-text);
  background-color: rgba(var(--good-rgb), .13);
}
html[data-theme] .blank.bad {
  border-bottom-color: var(--bad);
  color: var(--bad-text);
  background-color: rgba(var(--bad-rgb), .13);
}
html[data-theme] .fix { color: var(--good); }

html[data-theme] .feedback.good {
  background-color: rgba(var(--good-rgb), .11);
  border-color: rgba(var(--good-rgb), .4);
  color: var(--good-text);
}
html[data-theme] .feedback.bad {
  background-color: rgba(var(--bad-rgb), .11);
  border-color: rgba(var(--bad-rgb), .4);
  color: var(--bad-text);
}
html[data-theme] .error-box {
  background-color: rgba(var(--bad-rgb), .12);
  border-color: rgba(var(--bad-rgb), .45);
  color: var(--bad-text);
}

/* ---------- Selector de tema ---------- */

.theme-switcher {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(var(--drawer-rgb), .82);
  border: 1px solid rgba(var(--border-rgb), .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
}

.theme-toggle {
  display: none;
}

.theme-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-label {
  flex: 0 0 auto;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px 0 6px;
}

.theme-opt {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.theme-opt:hover {
  background: rgba(var(--soft-rgb), .12);
  color: var(--text);
}

.theme-opt[aria-pressed="true"] {
  background: var(--grad);
  color: var(--on-accent);
  box-shadow: 0 6px 16px -6px var(--a1);
}

.theme-opt:focus-visible {
  outline: 2px solid var(--a2);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .theme-switcher {
    top: 12px;
    right: 12px;
    gap: 0;
    padding: 0;
    max-width: none;
    overflow: visible;
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }

  .theme-toggle svg {
    width: 20px;
    height: 20px;
  }

  .theme-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(var(--drawer-rgb), .97);
    border: 1px solid rgba(var(--border-rgb), .16);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
    min-width: 136px;
  }

  .theme-switcher.is-open .theme-menu {
    display: flex;
  }

  .theme-label {
    display: block;
    flex: none;
    padding: 6px 12px;
  }

  .theme-opt {
    text-align: left;
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: .8rem;
  }
}