/* ============================================================
   Modo claro / oscuro — variables compartidas para SMS Renta
   ============================================================
   - Cada página define sus propias :root vars (heterogéneo).
   - Aquí redefinimos las MÁS comunes en [data-theme="light"].
   - También aplicamos overrides directos para páginas que usan
     colores literales (#020209, rgba(255,255,255,...)).
   ============================================================ */

:root {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* ---------- Variables: tema oscuro (defaults — solo si no las define la página) ---------- */
:root[data-theme="dark"] {
  --bg: #020209;
  --text: #f5f5f7;
  --text-dim: rgba(245,245,247,0.55);
  --text-faint: rgba(245,245,247,0.32);

  --glass: rgba(255,255,255,0.055);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-hover: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.10);

  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-soft: rgba(255,255,255,0.07);

  --surface: #13141b;
  --surface-2: #1c1d27;
  --bg-elev: #141414;
  --bg-card: #1a1a1a;

  --nav-bg: rgba(2,2,9,0.8);
  --action-bar: rgba(2,2,9,0.85);

  --code-bg: rgba(255,255,255,0.055);
  --code-border: rgba(255,255,255,0.09);
  --copy-bg: rgba(255,255,255,0.09);
  --copy-border: rgba(255,255,255,0.12);
  --btn-back-bg: rgba(255,255,255,0.09);
  --btn-back-border: rgba(255,255,255,0.13);
  --bot-bubble: rgba(255,255,255,0.09);
  --admin-bubble: rgba(100,160,255,0.18);
  --badge-bg: rgba(255,255,255,0.05);
  --badge-border: rgba(255,255,255,0.08);
  --empty-border: rgba(255,255,255,0.10);
  --drawer-bg: rgba(0,0,0,0.25);
  --active-row: rgba(212,255,58,0.07);

  --accent: #d4ff3a;
  --accent-text: #000;
  --accent-2: #9b58ff;
  --success: #30d158;
  --warn: #ff9f0a;
  --danger: #ff453a;
  --danger-bg: rgba(255,69,58,0.15);
  --info: #0a84ff;

  --theme-toggle-bg: rgba(255,255,255,0.08);
  --theme-toggle-fg: #f5f5f7;
  --theme-toggle-border: rgba(255,255,255,0.16);
}

/* ---------- Variables: tema claro ---------- */
:root[data-theme="light"] {
  --bg: #f2f2f7;
  --text: #1d1d1f;
  --text-dim: rgba(29,29,31,0.62);
  --text-faint: rgba(29,29,31,0.42);

  --glass: rgba(255,255,255,0.72);
  --glass-bg: rgba(255,255,255,0.72);
  --glass-hover: rgba(255,255,255,0.92);
  --glass-border: rgba(0,0,0,0.10);

  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.20);
  --border-soft: rgba(0,0,0,0.06);

  --surface: #ffffff;
  --surface-2: #f3f4f8;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;

  --nav-bg: rgba(255,255,255,0.85);
  --action-bar: rgba(242,242,247,0.92);

  --code-bg: rgba(0,0,0,0.04);
  --code-border: rgba(0,0,0,0.10);
  --copy-bg: rgba(0,0,0,0.05);
  --copy-border: rgba(0,0,0,0.10);
  --btn-back-bg: rgba(0,0,0,0.05);
  --btn-back-border: rgba(0,0,0,0.10);
  --bot-bubble: rgba(0,0,0,0.06);
  --admin-bubble: rgba(60,100,200,0.12);
  --badge-bg: rgba(255,255,255,0.6);
  --badge-border: rgba(0,0,0,0.08);
  --empty-border: rgba(0,0,0,0.10);
  --drawer-bg: rgba(0,0,0,0.04);
  --active-row: rgba(74,124,0,0.07);

  --accent: #4a7c00;
  --accent-text: #ffffff;
  --accent-2: #7c3aed;
  --success: #248a3d;
  --warn: #b25800;
  --danger: #cc2222;
  --danger-bg: rgba(204,34,34,0.10);
  --info: #0a84ff;

  --theme-toggle-bg: rgba(0,0,0,0.06);
  --theme-toggle-fg: #1d1d1f;
  --theme-toggle-border: rgba(0,0,0,0.14);
}

/* ============================================================
   Overrides agresivos para páginas con colores literales
   (login, registro, comprar viejo, cuenta, etc.)
   Solo aplican en modo claro.
   ============================================================ */

html[data-theme="light"] body {
  background: #f2f2f7 !important;
  color: #1d1d1f !important;
}

/* Fondos oscuros literales → claros */
html[data-theme="light"] [style*="background:#020209"],
html[data-theme="light"] [style*="background: #020209"],
html[data-theme="light"] [style*="background:#0a0a0a"],
html[data-theme="light"] [style*="background: #0a0a0a"],
html[data-theme="light"] [style*="background:#06070b"],
html[data-theme="light"] [style*="background: #06070b"] {
  background: #f2f2f7 !important;
}

/* Cuando el tema claro re-define variables, el resto del sitio
   las hereda automáticamente. No hace falta más reglas
   genéricas — los overrides específicos por página se hacen
   inline en cada HTML. */

/* Botón flotante de toggle (común a todas las páginas) */
[data-theme-toggle="floating"]:hover {
  background: var(--theme-toggle-bg) !important;
  filter: brightness(1.1);
}
[data-theme-toggle="floating"] svg {
  display: block;
}

/* Mejorar legibilidad de scrollbars en modo claro (WebKit) */
html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* Selección de texto */
html[data-theme="light"] ::selection { background: rgba(74,124,0,0.20); color: #1d1d1f; }