/* ============================================
   Innovate Academy — Modo Oscuro / Claro
   No modifica styles.css: solo redefine sus
   propias variables (--bg, --panel, --ink, etc.)
   para que TODO lo construido con var(...) se
   adapte solo al modo oscuro.
   ============================================ */

html[data-tema="claro"] { color-scheme: light; }

html[data-tema="oscuro"] {
  color-scheme: dark;

  --bg: #0B0D12;
  --panel: #13161E;
  --ink: #ECEEF3;
  --muted: #98A0B3;
  --line: rgba(255, 255, 255, 0.09);

  --azul: #5C82FF;
  --azul-fuerte: #7DA0FF;
  --azul-suave: rgba(92, 130, 255, 0.14);

  --oro: #E3AE57;
  --oro-suave: rgba(227, 174, 87, 0.14);

  --vivo: #45E08B;
  --err: #FF6B6B;
}

/* Textura sutil del fondo, ahora en versión clara para que se note sobre oscuro */
html[data-tema="oscuro"] body {
  background-image: repeating-linear-gradient(to bottom, transparent 0 43px, rgba(255, 255, 255, 0.035) 43px 44px);
  transition: background-color .35s ease, color .35s ease;
}

/* La barra usa un rgba fijo (no variable) para el blur, hay que adaptarlo aparte */
html[data-tema="oscuro"] .barra {
  background: rgba(11, 13, 18, 0.82);
}

/* ---------- Piezas que están "quemadas" a un color fijo y no a variables ---------- */

/* Ventana de código: siempre oscura por diseño, en claro usa var(--ink).
   Si no la fijamos, con --ink ya claro quedaría blanca e ilegible. */
html[data-tema="oscuro"] .ventana-codigo {
  background: #05070B;
}

/* Aviso de cookies: mismo caso, usa var(--ink) como fondo siempre-oscuro */
html[data-tema="oscuro"] .aviso-cookies {
  background: #12151C;
  border-color: rgba(255, 255, 255, 0.1);
}
/* Su botón principal es un botón "invertido" (fondo blanco, texto var(--ink));
   si no fijamos el texto, con --ink ya claro se volvería invisible. */
html[data-tema="oscuro"] .aviso-cookies .boton-principal {
  color: #16181D;
}

/* <option> del <select> nativo: el navegador ignora el blur/variables del padre
   y styles.css les pone background:#fff a mano — hay que oscurecerlas o el
   texto (ya claro) queda invisible sobre blanco. */
html[data-tema="oscuro"] .moneda select option,
html[data-tema="oscuro"] .campo select option {
  background: var(--panel);
  color: var(--ink);
}

/* Insignia "15% de ahorro": con --oro ahora más claro, el texto blanco pierde
   contraste. Se ve mejor con texto oscuro sobre el dorado. */
html[data-tema="oscuro"] .pack-ahorro {
  color: #1B140A;
}

/* Scrollbar a juego */
html[data-tema="oscuro"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-tema="oscuro"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }

/* Avisos de formulario un poco más visibles sobre fondo oscuro */
html[data-tema="oscuro"] .form-aviso.ok { background: rgba(69, 224, 139, 0.1); }
html[data-tema="oscuro"] .form-aviso.error { background: rgba(255, 107, 107, 0.1); }

/* ============================================
   Botón de tema (sol / luna)
   ============================================ */

.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--line, rgba(0, 0, 0, 0.12));
  background: var(--panel, rgba(0, 0, 0, 0.03));
  color: var(--muted, inherit);
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.boton-tema:hover {
  transform: translateY(-2px);
  border-color: var(--azul);
  color: var(--azul);
}
.boton-tema:active { transform: scale(0.92); }
.boton-tema .icono { width: 18px; height: 18px; }

.boton-tema.girando .icono {
  animation: t-giro-tema .45s cubic-bezier(.68, -0.4, .32, 1.4);
}
@keyframes t-giro-tema {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(0.55); }
  100% { transform: rotate(360deg) scale(1); }
}

html[data-tema="oscuro"] .boton-tema { color: #E3AE57; }
html[data-tema="oscuro"] .boton-tema:hover {
  border-color: #E3AE57;
  color: #E3AE57;
  box-shadow: 0 0 0 4px rgba(227, 174, 87, 0.14);
}
html[data-tema="claro"] .boton-tema:hover {
  box-shadow: 0 0 0 4px var(--azul-suave, rgba(31, 58, 147, 0.08));
}

@media (prefers-reduced-motion: reduce) {
  .boton-tema.girando .icono { animation: none !important; }
}