/* ============================================================
   theme.css — Capa de compatibilidad sobre landing-theme.css
   ============================================================
   Páginas como rental.html, pago.html, espera.html, recargar.html,
   numeros.html, soporte.html fueron escritas con su propio set
   de variables (--accent, --glass, --border, --text, --text-dim…).

   En lugar de reescribir cada página, este archivo MAPEA esas
   variables al sistema unificado de landing-theme.css. Resultado:
   todas las páginas comparten la misma paleta (acento indigo
   #3b56f7) sin tocar HTML.

   IMPORTANTE: cada página que cargue theme.css debe cargar también
   landing-theme.css (o vía el @import de abajo).
   ============================================================ */

@import url('/landing-theme.css');

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

/* ---------- Modo OSCURO (default) ---------- */
:root[data-theme="dark"] {
  /* Backgrounds */
  --bg:           var(--c-bg);           /* #0a0b10 */
  --bg-elev:      var(--c-bg-soft);      /* #11131a */
  --bg-card:      var(--c-bg-soft);
  --surface:      var(--c-bg-soft);
  --surface-2:    var(--c-bg-mute);      /* #1a1c25 */

  /* Texto */
  --text:         var(--c-text);         /* #f5f5f7 */
  --text-dim:     var(--c-text-2);       /* #a3a4b0 */
  --text-faint:   var(--c-text-3);       /* #5a5a66 */

  /* Glass (tarjetas translúcidas con backdrop-filter) */
  --glass:        rgba(255,255,255,.05);
  --glass-bg:     rgba(255,255,255,.06);
  --glass-hover:  rgba(255,255,255,.09);
  --glass-border: var(--c-border);

  /* Bordes */
  --border:        var(--c-border);
  --border-strong: var(--c-border-2);
  --border-soft:   rgba(255,255,255,.05);

  /* Nav / action bars */
  --nav-bg:        rgba(10,11,16,.82);
  --action-bar:    rgba(10,11,16,.88);

  /* Componentes específicos */
  --code-bg:       rgba(255,255,255,.05);
  --code-border:   var(--c-border);
  --copy-bg:       rgba(255,255,255,.09);
  --copy-border:   var(--c-border-2);
  --btn-back-bg:   rgba(255,255,255,.08);
  --btn-back-border: var(--c-border-2);
  --bot-bubble:    rgba(255,255,255,.08);
  --admin-bubble:  var(--c-accent-s);
  --badge-bg:      rgba(255,255,255,.05);
  --badge-border:  var(--c-border);
  --empty-border:  var(--c-border);
  --drawer-bg:     rgba(0,0,0,.25);
  --active-row:    var(--c-accent-s);
  --timer-bg:      rgba(255,255,255,.06);
  --timer-border:  var(--c-border);

  /* Acentos — UNIFICADOS con landing-theme */
  --accent:        var(--c-accent);       /* indigo */
  --accent-text:   #ffffff;               /* texto sobre acento */
  --accent-2:      #7c3aed;               /* morado secundario */
  --success:       var(--c-success);
  --warn:          var(--c-warn);
  --danger:        var(--c-danger);
  --danger-bg:     var(--c-danger-s);
  --info:          var(--c-accent);

  /* Theme toggle button */
  --theme-toggle-bg:     rgba(255,255,255,.08);
  --theme-toggle-fg:     var(--c-text);
  --theme-toggle-border: var(--c-border-2);
}

/* ---------- Modo CLARO ---------- */
:root[data-theme="light"] {
  /* Backgrounds */
  --bg:           var(--c-bg);            /* #ffffff */
  --bg-elev:      var(--c-bg-soft);
  --bg-card:      var(--c-bg);
  --surface:      var(--c-bg);
  --surface-2:    var(--c-bg-mute);

  /* Texto */
  --text:         var(--c-text);          /* #0e0e10 */
  --text-dim:     var(--c-text-2);
  --text-faint:   var(--c-text-3);

  /* Glass — en modo claro: blanco semi-opaco con sombra */
  --glass:        rgba(255,255,255,.72);
  --glass-bg:     rgba(255,255,255,.72);
  --glass-hover:  rgba(255,255,255,.92);
  --glass-border: var(--c-border);

  /* Bordes */
  --border:        var(--c-border);
  --border-strong: var(--c-border-2);
  --border-soft:   rgba(15,23,42,.06);

  /* Nav / action bars */
  --nav-bg:        rgba(255,255,255,.85);
  --action-bar:    rgba(255,255,255,.92);

  /* Componentes */
  --code-bg:       rgba(15,23,42,.04);
  --code-border:   var(--c-border);
  --copy-bg:       rgba(15,23,42,.05);
  --copy-border:   var(--c-border);
  --btn-back-bg:   rgba(15,23,42,.05);
  --btn-back-border: var(--c-border);
  --bot-bubble:    var(--c-bg-mute);
  --admin-bubble:  var(--c-accent-s);
  --badge-bg:      var(--c-bg-soft);
  --badge-border:  var(--c-border);
  --empty-border:  var(--c-border);
  --drawer-bg:     rgba(15,23,42,.04);
  --active-row:    var(--c-accent-s);
  --timer-bg:      rgba(15,23,42,.04);
  --timer-border:  var(--c-border);

  /* Acentos UNIFICADOS */
  --accent:        var(--c-accent);
  --accent-text:   #ffffff;
  --accent-2:      #7c3aed;
  --success:       var(--c-success);
  --warn:          var(--c-warn);
  --danger:        var(--c-danger);
  --danger-bg:     var(--c-danger-s);
  --info:          var(--c-accent);

  --theme-toggle-bg:     rgba(15,23,42,.06);
  --theme-toggle-fg:     var(--c-text);
  --theme-toggle-border: var(--c-border-2);
}

/* ============================================================
   Overrides para inline-styles antiguos con colores literales
   ============================================================ */

/* El fondo old-dark (#020209 / #0a0a0a) → adaptarlo al theme */
html[data-theme="light"] body {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
}
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: var(--c-bg) !important;
}

/* Botón flotante toggle */
[data-theme-toggle="floating"]:hover {
  background: var(--theme-toggle-bg) !important;
  filter: brightness(1.1);
}
[data-theme-toggle="floating"] svg { display: block; }

/* Scrollbars en modo claro (WebKit) */
html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 8px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* Selección de texto — unificada al acento indigo */
::selection {
  background: var(--c-accent);
  color: #ffffff;
}