/* ============================================================
   GVenue — Theme overrides (claro / oscuro / blue-cut)
   Cargar DESPUÉS de tokens.css. Oscuro = default (tokens :root).
   Solo se sobreescriben superficies, tinta y líneas; los acentos
   (signal/violet/status) se mantienen salvo ajuste de legibilidad.
   ============================================================ */

/* ---- CLARO (fondo blanco, tinta oscura) ---- */
:root[data-theme="light"] {
  --bg:           #F7F7F4;
  --bg-deep:      #ECECE7;
  --surface:      #FFFFFF;
  --surface-2:    #F2F2ED;
  --surface-3:    #E8E8E1;
  --line:         #DCDCD3;
  --line-soft:    #E6E6DF;
  --line-strong:  #C4C4B9;

  --ink:          #15151A;
  --ink-soft:     #3A3A42;
  --ink-mute:     #62626C;
  --ink-fade:     #9A9AA2;

  /* teal más oscuro: legible como texto Y como fondo de botón (texto #001813) */
  --signal:       #0E9C88;
  --signal-soft:  #0E9C8818;
  --signal-line:  #0E9C8855;
  --violet:       #6E47E0;

  --shadow-1: 0 1px 0 rgba(0,0,0,.02) inset, 0 1px 2px rgba(0,0,0,.10);
  --shadow-2: 0 1px 0 rgba(0,0,0,.03) inset, 0 8px 24px rgba(0,0,0,.12);
  --glow-signal: 0 0 0 1px var(--signal-line);
  --glow-violet: 0 0 0 1px #6E47E055;
}

/* ---- BLUE CUT (navy profundo, descansa la vista de noche) ---- */
:root[data-theme="blue"] {
  --bg:           #0A1020;
  --bg-deep:      #070B16;
  --surface:      #111A2E;
  --surface-2:    #16213A;
  --surface-3:    #1E2B48;
  --line:         #243353;
  --line-soft:    #1A2540;
  --line-strong:  #324466;

  --ink:          #EAF0FB;
  --ink-soft:     #BDC8DE;
  --ink-mute:     #8290AC;
  --ink-fade:     #545F78;
}

/* ============================================================
   Switcher flotante (inyectado por theme.js). Usa las variables
   activas → se ve bien en los 3 temas.
   ============================================================ */
#gv-theme {
  position: fixed; right: 14px; bottom: 14px; z-index: 9999;
  display: flex; gap: 2px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); box-shadow: var(--shadow-2);
  font-family: var(--font-mono); font-size: 11px;
}
#gv-theme button {
  all: unset; cursor: pointer; padding: 6px 11px; border-radius: var(--r-full);
  color: var(--ink-mute); line-height: 1; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 5px;
}
#gv-theme button:hover { color: var(--ink-soft); }
#gv-theme button[aria-pressed="true"] {
  background: var(--signal); color: #001813; font-weight: 600;
}
/* Desktop (PC): switcher PLEGADO en la esquina inferior IZQUIERDA, arriba del
   FAB de Venu. Por defecto se ve SOLO el tema activo (como ícono, sin marco);
   al pasar el mouse (o con foco de teclado) se despliega en vertical con los 3
   temas y sus nombres. Así se "mete para adentro" y no pisa el texto. El activo
   queda pinneado abajo (order) y los demás aparecen hacia arriba, sin saltos.
   En mobile no aplica: queda abajo-derecha, horizontal (regla de más abajo). */
@media (min-width: 601px) {
  #gv-theme {
    left: 14px; right: auto; bottom: 72px;
    flex-direction: column; align-items: stretch; gap: 3px;
    border-radius: 16px;
    /* plegado: sin marco, solo el botón del tema activo */
    background: transparent; border-color: transparent; box-shadow: none; padding: 0;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, padding .2s ease;
  }
  #gv-theme button { justify-content: flex-start; gap: 0; }
  #gv-theme button[aria-pressed="true"] { order: 2; }   /* activo SIEMPRE abajo, pegado a Venu */
  /* nombre de cada tema: colapsado por defecto */
  #gv-theme .gv-th-lbl {
    max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; white-space: nowrap;
    transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
  }
  /* temas NO activos: ocultos hasta pasar el mouse */
  #gv-theme button:not([aria-pressed="true"]) {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
    overflow: hidden; pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
  }
  /* hover / foco → desplegar el panel completo */
  #gv-theme:hover, #gv-theme:focus-within {
    background: var(--surface-2); border-color: var(--line-strong);
    box-shadow: var(--shadow-2); padding: 4px;
  }
  #gv-theme:hover button:not([aria-pressed="true"]),
  #gv-theme:focus-within button:not([aria-pressed="true"]) {
    max-height: 44px; opacity: 1; padding-top: 6px; padding-bottom: 6px; pointer-events: auto;
  }
  #gv-theme:hover .gv-th-lbl, #gv-theme:focus-within .gv-th-lbl {
    max-width: 90px; opacity: 1; margin-left: 6px;
  }
}
/* Inputs/controles: usar la superficie de control (no el fondo de página) en TODAS las
   pantallas → así no quedan desfasados sobre las tarjetas (sobre todo en tema claro). El
   selector `body X` gana a las reglas `input{background:var(--bg)}` inline de cada página
   sin !important; los inputs con estilo propio (clase o inline) quedan intactos. */
body input, body select, body textarea { background: var(--surface-2); }

@media print { #gv-theme { display: none; } }
/* Mobile: achicar el switcher y dejar aire bajo el pie para que no tape el texto del footer. */
@media (max-width: 600px) {
  #gv-theme { bottom: 10px; right: 10px; padding: 3px; font-size: 10px; }
  #gv-theme button { padding: 5px 9px; }
  footer { padding-bottom: 60px; }
}

/* ============================================================
   Vidriera (landing.css) — puntos con color OSCURO hardcodeado que
   no salen de las variables. Solo overrides para claro/blue; el dark
   default queda intacto (riesgo cero sobre el look actual de prod).
   ============================================================ */
:root[data-theme="light"] .lp-nav { background: rgba(247,247,244,0.85); }
:root[data-theme="light"] .lp-price.featured { background: linear-gradient(180deg, #E6FAF4 0%, var(--surface) 60%); }
:root[data-theme="light"] .lp-final { background: linear-gradient(180deg, #E6FAF4 0%, #F0F0EA 100%); }
:root[data-theme="light"] .lp-preview-bar .dots i { background: #C6C6BC; }

:root[data-theme="blue"] .lp-nav { background: rgba(10,16,32,0.85); }
:root[data-theme="blue"] .lp-price.featured { background: linear-gradient(180deg, #0E2138 0%, var(--surface) 60%); }
:root[data-theme="blue"] .lp-final { background: linear-gradient(180deg, #0E2138 0%, #070B16 100%); }
:root[data-theme="blue"] .lp-preview-bar .dots i { background: #324466; }

/* ============================================================
   "← Volver" sitewide: ~40 pantallas duplican `a.back{color:...;
   text-decoration:none}` inline (texto plano). En vez de tocar cada
   archivo, se pisa acá con !important — botón píldora consistente
   con .btn.ghost.sm, cero riesgo de romper layout por página.
   ============================================================ */
a.back {
  all: unset !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 13px !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--ink-mute) !important;
  cursor: pointer !important;
  border: 1px solid var(--line-strong) !important; border-radius: var(--r-md, 10px) !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
a.back:hover { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--ink-fade) !important; }
.nav a.back, .topbar a.back { margin-left: auto; }