/* YAYIKA — Sistema de temas claro/oscuro
   Incluir en todas las páginas: <link rel="stylesheet" href="/theme.css">
   El toggle llama a: document.body.classList.toggle('light')
*/

/* ── Toggle button (esquina superior derecha en todas las páginas) ── */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  background: rgba(250,246,240,0.08);
  border: 0.5px solid rgba(250,246,240,0.12);
  border-radius: 100px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cream3, rgba(250,246,240,0.5));
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  font-family: 'Outfit', sans-serif;
}
.theme-toggle:hover { background: rgba(250,246,240,0.14); color: var(--cream, #FAF6F0); }
.theme-toggle svg   { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

body.light .theme-toggle {
  background: rgba(26,15,46,0.06);
  border-color: rgba(26,15,46,0.12);
  color: #5B4F72;
}
body.light .theme-toggle:hover { background: rgba(26,15,46,0.1); color: #1A0F2E; }

/* ── Variables tema CLARO ── */
body.light {
  --ink:    #F5F0FF;
  --ink2:   #EDE8FA;
  --ink3:   #E5DFFA;
  --cream:  #1A0F2E;
  --cream2: #2D1F4A;
  --cream3: #5B4F72;
  --cream4: rgba(26,15,46,0.05);
  --borde:  rgba(26,15,46,0.1);
  --borde2: rgba(26,15,46,0.08);
  --rosa:   #C7005A;
  --rosa-l: rgba(199,0,90,0.08);
  --lila:   #6B21D4;
  --oro:    #8B6914;

  background: #F5F0FF;
  color: #1A0F2E;
}

/* Fondos principales */
body.light .dash-screen,
body.light #dashScreen { background: #F5F0FF; }

body.light .sidebar    { background: #EDE8FA; border-color: rgba(26,15,46,0.08); }
body.light .main-area  { background: #F5F0FF; }

/* Cards */
body.light .dcard,
body.light .rank-card,
body.light .rn-promo,
body.light .modal-box  { background: #fff; border-color: rgba(26,15,46,0.08); }

/* Nav */
body.light .top-nav    { background: rgba(245,240,255,0.9); border-color: rgba(26,15,46,0.08); }
body.light .nav-av     { background: linear-gradient(135deg,#C7005A,#6B21D4); }

/* Sidebar items */
body.light .ds-item         { color: #5B4F72; }
body.light .ds-item:hover,
body.light .ds-item.active  { background: rgba(199,0,90,0.08); color: #C7005A; }
body.light .ds-section      { color: rgba(26,15,46,0.35); }

/* Texto general */
body.light h1, body.light h2, body.light h3 { color: #1A0F2E; }
body.light p, body.light span               { color: #2D1F4A; }

/* Inputs */
body.light .form-input,
body.light .modal-select,
body.light .modal-textarea {
  background: rgba(26,15,46,0.04);
  border-color: rgba(26,15,46,0.12);
  color: #1A0F2E;
}
body.light .form-input::placeholder,
body.light .modal-textarea::placeholder { color: #9B8FB2; }

/* XP bar */
body.light .xp-bar-bg { background: rgba(26,15,46,0.08); }

/* Botones outline */
body.light .btn-outline,
body.light .modal-btn-cancel {
  border-color: rgba(26,15,46,0.2);
  color: #5B4F72;
}

/* Checkout específico */
body.light .cl-left   { background: linear-gradient(135deg, #EDE8FA 0%, #F5F0FF 100%); }
body.light .cr-card   { background: #fff; border-color: rgba(26,15,46,0.08); }
body.light .stripe-element { background: rgba(26,15,46,0.04); border-color: rgba(26,15,46,0.12); }

/* Módulos / contenido */
body.light .mod-header   { background: linear-gradient(135deg,#EDE8FA,#F5F0FF); }
body.light .lesson-card  { background: #fff; border-color: rgba(26,15,46,0.08); }
body.light .lesson-card:hover { border-color: rgba(199,0,90,0.3); }