/* ===== Tema claro / oscuro =====
   Oscuro es el tema por defecto (definido en cada página). Aquí solo van las
   sobrescrituras del modo claro y el botón de cambio. Se carga el último, así
   sus variables (:root[data-theme="light"]) ganan a las de cada página. */

:root[data-theme="light"]{
  --bg:#f7f8fb; --bg-soft:#eceff4;
  --surface:rgba(12,20,38,0.035);
  --surface-2:rgba(12,20,38,0.06);
  --surface-hover:rgba(12,20,38,0.06);
  --border:rgba(12,20,38,0.10);
  --border-strong:rgba(12,20,38,0.20);
  --ink:#0f1626;
  --ink-secondary:#4b5568;
  --ink-tertiary:#7a8296;
  /* Degradados: mismos que en oscuro (solo un pelín más profundos para contraste sobre claro) */
  --grad-text:linear-gradient(135deg,#0891b2 0%,#2563eb 50%,#059669 100%);
  --glow-violet:0 8px 30px rgba(37,99,235,.16);
}

/* Fondo y superficies base */
:root[data-theme="light"] body{ background:var(--bg); color:var(--ink); }

/* Barra de navegación (algunas páginas la fijan en oscuro con valor literal) */
:root[data-theme="light"] .nav{ background:rgba(247,248,251,.82)!important; }
:root[data-theme="light"] header.site{ background:rgba(247,248,251,.82); }

/* Grano y velo oscuros no encajan en claro. */
:root[data-theme="light"] .grain,
:root[data-theme="light"] .grain-light,
:root[data-theme="light"] .veil{ display:none; }
/* El shader de cintas (#bgfx) ahora es transparente y con color → se ve igual en claro */
/* Las esferas WebGL usan mezcla aditiva: sobre blanco son invisibles → ocultas en claro */
:root[data-theme="light"] canvas.hero-blob,
:root[data-theme="light"] canvas.wheel-sphere,
:root[data-theme="light"] canvas.hero-sphere{ display:none; }
:root[data-theme="light"] .bg-decor .blob{ opacity:.6; }

/* Tarjetas con fondo oscuro literal */
:root[data-theme="light"] .kit-in,
:root[data-theme="light"] .pack-in{ background:rgba(255,255,255,.92); }

/* Halo del centro de la rueda: en claro, un anillo limpio visible */
:root[data-theme="light"] .orbit-center::after{ background:var(--bg-soft); }

/* ===== Botón de cambio de tema (flotante, abajo a la izquierda) ===== */
.theme-toggle{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--surface);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink-secondary); cursor:pointer;
  transition:color .2s, background .2s, transform .2s, border-color .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.theme-toggle:hover{ color:var(--ink); transform:translateY(-2px); border-color:var(--ink-tertiary); }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle .i-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:inline-block; }
@media (max-width:640px){ .theme-toggle{ width:40px; height:40px; left:14px; bottom:14px; } }
@media print{ .theme-toggle{ display:none; } }