/* ================================================================
   PUENTE DE TEMAS PARA LAS SUB-APLICACIONES
   ----------------------------------------------------------------
   El sitio principal usa variables --pl-*, que themes.css reescribe
   según el tema. Pero el Engine y el reproductor usan --engine-*, y
   el diccionario y el constructor de crucigramas usan --bg/--accent/…
   Como son nombres distintos, themes.css no les afectaba en absoluto.

   Este archivo traduce cada tema a esos dos vocabularios, para que el
   selector de temas funcione en todo el sitio sin tener que reescribir
   las hojas de estilo de cada sub-aplicación.

   Cárgalo DESPUÉS de la hoja propia de cada sub-app.
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   TEMA DARK (azules fríos)
   ════════════════════════════════════════════════════════════════ */
body.theme-dark {
  --engine-bg:         #050d17;
  --engine-panel:      rgba(5, 16, 30, 0.9);
  --engine-panel-soft: rgba(64, 196, 255, 0.06);
  --engine-line:       rgba(64, 196, 255, 0.18);
  --engine-text:       #ddeeff;
  --engine-muted:      #6a9fcf;
  --engine-cyan:       #40c4ff;
  --engine-blue:       #2979ff;
  --engine-violet:     #7c4dff;
  --engine-pink:       #ffab40;
  --engine-grad:       linear-gradient(135deg, #40c4ff 0%, #2979ff 25%, #7c4dff 60%, #ffab40 100%);
  --engine-shadow:     0 22px 54px rgba(0, 0, 0, 0.5);

  --bg:           #050d17;
  --panel-bg:     #0d1829;
  --panel-border: rgba(64, 196, 255, 0.18);
  --cell-bg:      #101f33;
  --cell-border:  rgba(64, 196, 255, 0.24);
  --cell-text:    #ddeeff;
  --text-main:    #ddeeff;
  --text-muted:   #6a9fcf;
  --text-dim:     #3f6a94;
  --accent:       #40c4ff;
  --accent-dim:   rgba(64, 196, 255, 0.18);
  --accent-glow:  rgba(64, 196, 255, 0.3);
  --accent2:      #7c4dff;
  --accent2-dim:  rgba(124, 77, 255, 0.16);
  --error:        #ff5470;
  --error-glow:   rgba(255, 84, 112, 0.22);
  --gold:         #ffc94a;
}

/* ════════════════════════════════════════════════════════════════
   TEMA LIGHT (fondo claro: hay que invertir textos y paneles)
   ════════════════════════════════════════════════════════════════ */
body.theme-light {
  --engine-bg:         #f8fafc;
  --engine-panel:      rgba(255, 255, 255, 0.92);
  --engine-panel-soft: rgba(15, 23, 42, 0.04);
  --engine-line:       rgba(15, 23, 42, 0.12);
  --engine-text:       #0f172a;
  --engine-muted:      #475569;
  --engine-cyan:       #0ea5e9;
  --engine-blue:       #6366f1;
  --engine-violet:     #8b5cf6;
  --engine-pink:       #ec4899;
  --engine-grad:       linear-gradient(135deg, #0ea5e9 0%, #6366f1 28%, #8b5cf6 62%, #ec4899 100%);
  --engine-shadow:     0 18px 44px rgba(15, 23, 42, 0.14);

  --bg:           #f8fafc;
  --panel-bg:     #ffffff;
  --panel-border: rgba(15, 23, 42, 0.12);
  --cell-bg:      #f1f5f9;
  --cell-border:  rgba(15, 23, 42, 0.16);
  --cell-text:    #0f172a;
  --text-main:    #0f172a;
  --text-muted:   #475569;
  --text-dim:     #7d8da3;
  --accent:       #6366f1;
  --accent-dim:   rgba(99, 102, 241, 0.14);
  --accent-glow:  rgba(99, 102, 241, 0.24);
  --accent2:      #0ea5e9;
  --accent2-dim:  rgba(14, 165, 233, 0.14);
  --error:        #dc2626;
  --error-glow:   rgba(220, 38, 38, 0.14);
  /* Sobre blanco, el dorado de los temas oscuros no se lee: se baja a
     un ámbar con contraste suficiente. */
  --gold:         #b45309;
}

/* En claro, los fondos y sombras pensados para oscuro se ven sucios */
body.theme-light .engine-bg,
body.theme-light .engine-blob { opacity: 0.35; }
body.theme-light .engine-grid { opacity: 0.12; }

/* Los botones oscuros del reproductor necesitan texto legible */
body.theme-light .ghost-btn { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
body.theme-light .panel-card,
body.theme-light .leaderboard-panel { background: rgba(255, 255, 255, 0.92); }

/* ════════════════════════════════════════════════════════════════
   TEMA PIXEL (verde fósforo, sin curvas ni desenfoques)
   ════════════════════════════════════════════════════════════════ */
body.theme-pixel {
  --engine-bg:         #010801;
  --engine-panel:      rgba(0, 20, 2, 0.94);
  --engine-panel-soft: rgba(0, 255, 65, 0.06);
  --engine-line:       rgba(0, 255, 65, 0.45);
  --engine-text:       #e0ffe0;
  --engine-muted:      #55aa55;
  --engine-cyan:       #00ff41;
  --engine-blue:       #33cc44;
  --engine-violet:     #aaff00;
  --engine-pink:       #ff8c00;
  --engine-grad:       linear-gradient(135deg, #00ff41 0%, #33cc44 33%, #aaff00 66%, #ff8c00 100%);
  --engine-shadow:     6px 6px 0 rgba(0, 160, 30, 0.5);

  --bg:           #010801;
  --panel-bg:     #0a1a0a;
  --panel-border: rgba(0, 255, 65, 0.45);
  --cell-bg:      #041404;
  --cell-border:  rgba(0, 255, 65, 0.4);
  --cell-text:    #e0ffe0;
  --text-main:    #e0ffe0;
  --text-muted:   #55aa55;
  --text-dim:     #2f7a34;
  --accent:       #00ff41;
  --accent-dim:   rgba(0, 255, 65, 0.16);
  --accent-glow:  rgba(0, 255, 65, 0.3);
  --accent2:      #aaff00;
  --accent2-dim:  rgba(170, 255, 0, 0.16);
  --error:        #ff5555;
  --error-glow:   rgba(255, 85, 85, 0.22);
  --gold:         #ff8c00;
}

/* El tema pixel no usa esquinas redondeadas en ningún sitio */
body.theme-pixel .panel-card,
body.theme-pixel .ghost-btn,
body.theme-pixel .primary-btn,
body.theme-pixel .quiz-card,
body.theme-pixel .cw-cell,
body.theme-pixel .field input,
body.theme-pixel .field textarea { border-radius: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   SELECTOR FLOTANTE
   Lo inyecta theme-switcher.js en las páginas que no traen el suyo
   dentro del <nav>.
   ════════════════════════════════════════════════════════════════ */
.theme-picker.is-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 930;
}

.theme-picker.is-floating .theme-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.16));
  background: var(--pl-panel, rgba(17, 10, 26, 0.82));
  backdrop-filter: blur(12px);
  color: var(--pl-soft, #d8c9ff);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.theme-picker.is-floating .theme-picker-btn:hover {
  border-color: var(--pl-lilac, #a96ae7);
  transform: translateY(-2px);
}

.theme-picker.is-floating .theme-dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: 14px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.16));
  background: var(--pl-deep, #15071f);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.theme-picker.is-floating .theme-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-picker.is-floating .theme-option {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--pl-soft, #d8c9ff);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-picker.is-floating .theme-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pl-text, #f8f2ff);
}

.theme-picker.is-floating .theme-option.is-active {
  color: var(--pl-cyan, #8deeff);
  font-weight: 800;
}

body.theme-light .theme-picker.is-floating .theme-dropdown { background: #fff; }
body.theme-pixel .theme-picker.is-floating .theme-picker-btn,
body.theme-pixel .theme-picker.is-floating .theme-dropdown,
body.theme-pixel .theme-picker.is-floating .theme-option { border-radius: 0; }

/* Transición suave al cambiar de tema */
body.is-theme-changing,
body.is-theme-changing * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

@media (max-width: 640px) {
  .theme-picker.is-floating { top: auto; bottom: 1rem; right: 1rem; }
  .theme-picker.is-floating .theme-dropdown { top: auto; bottom: calc(100% + 0.45rem); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-theme-changing, body.is-theme-changing * { transition: none; }
}

/* ══════════════ FICHAS DE MIEMBROS (--wiki-*) ══════════════ */

body.theme-dark {
  --wiki-bg:        #050d17;
  --wiki-surface:   #0d1829;
  --wiki-surface-2: #132338;
  --wiki-text:      #ddeeff;
  --wiki-muted:     #6a9fcf;
  --wiki-border:    rgba(64,196,255,0.22);
  --wiki-accent:    #40c4ff;
  --wiki-accent-2:  #7c4dff;
  --wiki-link:      #7cc4ff;
}

body.theme-light {
  --wiki-bg:        #f8fafc;
  --wiki-surface:   #ffffff;
  --wiki-surface-2: #f1f5f9;
  --wiki-text:      #0f172a;
  --wiki-muted:     #475569;
  --wiki-border:    rgba(15,23,42,0.12);
  --wiki-accent:    #8b5cf6;
  --wiki-accent-2:  #0ea5e9;
  --wiki-link:      #4f46e5;
}

body.theme-pixel {
  --wiki-bg:        #010801;
  --wiki-surface:   #0a1a0a;
  --wiki-surface-2: #0f2410;
  --wiki-text:      #e0ffe0;
  --wiki-muted:     #55aa55;
  --wiki-border:    rgba(0,255,65,0.45);
  --wiki-accent:    #00ff41;
  --wiki-accent-2:  #aaff00;
  --wiki-link:      #7cff7c;
}

/* ════════════════════════════════════════════════════════════════
   LEGIBILIDAD EN TEMA CLARO PARA LAS SUB-APLICACIONES
   ----------------------------------------------------------------
   Muchos componentes del Engine, el reproductor y los crucigramas se
   diseñaron con texto blanco sobre paneles oscuros (color: #fff, fondos
   rgba(255,255,255,…)). En claro ese texto queda invisible. Aquí van
   los arreglos: cada regla usa `body.theme-light` para no tocar los
   temas oscuros. Todas las páginas app cargan esta hoja.
   ════════════════════════════════════════════════════════════════ */

/* ── Desplegables <select> ── (en oscuro se fuerza lista oscura) */
body.theme-light option,
body.theme-light optgroup {
  background-color: #ffffff;
  color: #0f172a;
}

/* ── REPRODUCTOR DE QUIZ (engine/styles.css) ── */
/* Los botones de respuesta eran blanco sobre blanco: lo más grave. */
body.theme-light .answer-btn {
  color: var(--engine-text, #0f172a);
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.14);
}
body.theme-light .answer-btn:hover:not(:disabled) {
  border-color: rgba(15, 23, 42, 0.30);
}
/* Sin esto, la regla de arriba (más específica que .answer-btn.is-correct)
   borraría el tinte de acierto/error al calificar. */
body.theme-light .answer-btn.is-correct {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.55);
}
body.theme-light .answer-btn.is-wrong {
  background: rgba(236, 72, 153, 0.14);
  border-color: rgba(236, 72, 153, 0.55);
}
body.theme-light .player-feedback.is-good { color: #0f766e; }
body.theme-light .player-feedback.is-bad  { color: #be123c; }
body.theme-light .inline-status.is-error   { color: #be123c; }
body.theme-light .inline-status.is-success { color: #0f766e; }

/* Píldora "Quiz/Crucigrama" del topbar (leaderboard.css la deja lila
   claro sobre lila pálido → ilegible en claro). */
body.theme-light .engine-topbar .engine-brand-mini {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.40);
}

/* ── ENGINE / CONSTRUCTOR (engine/styles.css) ── */
body.theme-light .mode-switch-btn:not(.active) {
  color: var(--engine-text, #0f172a);
  background: rgba(15, 23, 42, 0.04);
}
body.theme-light .audio-summary { color: var(--engine-text, #0f172a); }
body.theme-light .output-label,
body.theme-light .output-block code,
body.theme-light .json-preview {
  color: var(--engine-text, #0f172a);
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.10);
}

/* ── REPRODUCTOR DE CRUCIGRAMA (crossword/play.html) ── */
body.theme-light .cw-board-wrap { background: rgba(15, 23, 42, 0.04); }
body.theme-light .cw-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
}
body.theme-light .cw-cell { background: var(--cell-bg, #f1f5f9); }
body.theme-light .cw-input { color: var(--cell-text, #0f172a); }
body.theme-light .cw-clue-list li b { color: var(--engine-text, #0f172a); }
body.theme-light .cw-clue-group.v h4 { color: #0f766e; }
body.theme-light .cw-clue-group.d h4 { color: #b45309; }
body.theme-light .cw-cell.correct .cw-input { color: #0f766e; }
body.theme-light .cw-win { color: #0f766e; }

/* ── CONSTRUCTOR DE CRUCIGRAMA (crossword/builder.html): dorado de las
   pistas diagonales, ilegible sobre el panel blanco en claro ── */
body.theme-light #group-d .panel-section-label,
body.theme-light #group-d .clue-num { color: #b45309; }

/* ── GALERÍA / "MIS PUZZLES" (play/index.html) ── */
/* El nombre de la actividad era color:#fff en el cuerpo claro de la
   tarjeta → invisible. Lo pintamos oscuro en claro. */
body.theme-light .quiz-title { color: #0f172a; }
body.theme-light .quiz-desc  { color: #334155; }
/* Botón "Sorpréndeme" dorado */
body.theme-light .surprise-btn {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(255, 204, 51, 0.16);
}
body.theme-light .surprise-btn:hover { background: rgba(255, 204, 51, 0.26); }

/* ── PERFIL PÚBLICO (profile-view.html): píldoras de rol ── */
body.theme-light .pv-role.moderator {
  color: #be185d; background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.40);
}
body.theme-light .pv-role.creator {
  color: #6d28d9; background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.40);
}
body.theme-light .pv-role.player {
  color: #0369a1; background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.40);
}

/* ── MODERACIÓN (moderation.html): etiquetas y mensajes ── */
body.theme-light .md-tag.level  { color: #7c3aed; }
body.theme-light .md-tag.banned { color: #dc2626; }

/* ── Mensajes de estado (error/ok) legibles en claro ── */
body.theme-light .md-msg.is-error,
body.theme-light .md-bc-msg.is-error,
body.theme-light .pf-msg.is-error,
body.theme-light .auth-msg.is-error { color: #be123c; }
body.theme-light .md-msg.is-ok,
body.theme-light .md-bc-msg.is-ok,
body.theme-light .pf-msg.is-ok,
body.theme-light .auth-msg.is-ok { color: #0f766e; }