/* ============================================================
   Luis El De Los Carros — Temas de vista previa (2 ejes)
   Se carga DESPUÉS de landing.css + app-premium.css.

   Eje 1 · FONDO  →  html[data-bg="..."]   (5 claros + 5 oscuros)
       define superficie + texto + glass + hairline + ghost + sombra
       (los bloques OSCUROS además invierten border-soft/strong a hairline claro)
   Eje 2 · BOTÓN  →  html[data-accent="..."] (6)
       define accent / accent-rgb / accent-strong / text-on-accent
       (border/glow/soft se derivan solos vía las fórmulas de :root)

   Default (sin atributos) = Nieve (claro) + Azul → vive en :root de landing.css.
   ============================================================ */

/* Menos "tecnológico": fuera la cuadrícula; glow radial suave */
.ambient::before { display: none; }
.ambient::after  { opacity: 0.45; }

/* ============================================================
   EJE 1 · FONDOS CLAROS
   (heredan hairline/ghost/shadow/border claros de :root; solo ajustan superficie + texto)
   ============================================================ */
html[data-bg="nieve"] {
  --bg-deep: #EAF0F7; --bg-base: #F5F8FC; --bg-elevated: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.72);
  --text: #16202B; --text-muted: #51637A; --text-dim: #7C8DA1;
}
html[data-bg="hueso"] {
  --bg-deep: #EFE8DC; --bg-base: #F7F3EC; --bg-elevated: #FFFDF9;
  --glass: rgba(255, 253, 249, 0.74);
  --text: #2A2118; --text-muted: #6B5E4E; --text-dim: #968873;
}
html[data-bg="acero"] {
  --bg-deep: #E4E8EE; --bg-base: #EFF1F4; --bg-elevated: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.74);
  --text: #1A2430; --text-muted: #52606E; --text-dim: #7A8794;
}
html[data-bg="lino"] {
  --bg-deep: #ECE7E6; --bg-base: #F5F2F1; --bg-elevated: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.74);
  --text: #221C1B; --text-muted: #6A5F5D; --text-dim: #978C8A;
}
html[data-bg="blanco"] {
  --bg-deep: #F1F1F1; --bg-base: #FAFAFA; --bg-elevated: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.80);
  --text: #18181B; --text-muted: #5A5A60; --text-dim: #8A8A90;
}

/* ============================================================
   EJE 1 · FONDOS OSCUROS
   (invierten hairline/ghost/shadow + border a versiones claras
    para que se vean con CUALQUIER acento, incluso uno oscuro)
   ============================================================ */
html[data-bg="negro"],
html[data-bg="medianoche"],
html[data-bg="pizarra"],
html[data-bg="cafe"],
html[data-bg="petroleo"] {
  --hairline:      rgba(255, 255, 255, 0.08);
  --ghost-bg:      rgba(255, 255, 255, 0.04);
  --shadow-color:  rgba(0, 0, 0, 0.60);
  --border-soft:   rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
}
html[data-bg="negro"] {
  --bg-deep: #08090C; --bg-base: #0E1014; --bg-elevated: #16181E;
  --glass: rgba(22, 24, 30, 0.60);
  --text: #ECEEF2; --text-muted: #9AA0AB; --text-dim: #6B7280;
}
html[data-bg="medianoche"] {
  --bg-deep: #07111C; --bg-base: #0C1A2A; --bg-elevated: #102338;
  --glass: rgba(15, 30, 48, 0.60);
  --text: #E8F0FB; --text-muted: #8AA2BC; --text-dim: #5A728D;
}
html[data-bg="pizarra"] {
  --bg-deep: #12161B; --bg-base: #1A1F26; --bg-elevated: #232932;
  --glass: rgba(28, 34, 42, 0.60);
  --text: #E7EBF0; --text-muted: #9BA6B3; --text-dim: #6B7682;
}
html[data-bg="cafe"] {
  --bg-deep: #120E0B; --bg-base: #1A1512; --bg-elevated: #241D18;
  --glass: rgba(38, 30, 24, 0.60);
  --text: #F1EAE2; --text-muted: #B6A998; --text-dim: #837567;
  --ghost-bg: rgba(255, 255, 255, 0.05);
}
html[data-bg="petroleo"] {
  --bg-deep: #081210; --bg-base: #0E1A18; --bg-elevated: #152422;
  --glass: rgba(18, 30, 28, 0.60);
  --text: #E6F0EC; --text-muted: #8FA8A0; --text-dim: #5E726B;
  --ghost-bg: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   EJE 2 · ACENTO / BOTONES
   (border-soft/strong, accent-soft y accent-glow se derivan solos
    de --accent-rgb vía las fórmulas de :root)
   ============================================================ */
html[data-accent="azul"] {
  --accent: #1763B6; --accent-rgb: 23, 99, 182; --accent-strong: #0F4C8F; --text-on-accent: #FFFFFF;
}
html[data-accent="cobre"] {
  --accent: #C2410C; --accent-rgb: 194, 65, 12; --accent-strong: #9A3412; --text-on-accent: #FFFFFF;
}
html[data-accent="grafito"] {
  --accent: #334E68; --accent-rgb: 51, 78, 104; --accent-strong: #243B52; --text-on-accent: #FFFFFF;
}
html[data-accent="rojo"] {
  --accent: #D32F2F; --accent-rgb: 211, 47, 47; --accent-strong: #B71C1C; --text-on-accent: #FFFFFF;
}
html[data-accent="carbon"] {
  --accent: #1F2937; --accent-rgb: 31, 41, 55; --accent-strong: #111827; --text-on-accent: #FFFFFF;
}
html[data-accent="ambar"] {
  --accent: #E08A1E; --accent-rgb: 224, 138, 30; --accent-strong: #B66E12; --text-on-accent: #1A1208;
}

/* ============================================================
   Widget flotante de vista previa (2 toggles: fondo + botones)
   Siempre oscuro (control de overlay), independiente del tema.
   Se quita al promover la versión final.
   ============================================================ */
.theme-switch {
  position: fixed; z-index: 200;
  left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 18px;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 44px -16px #000;
  max-width: calc(100vw - 18px);
}
.ts-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: flex-start;
}
.ts-label {
  width: 92px; flex: none; text-align: right; padding-right: 6px;
  color: #9fb0c4; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.ts-btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent; color: #e8eef6;
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-body); transition: all 0.16s ease;
}
.ts-btn:hover { border-color: rgba(255, 255, 255, 0.36); }
.ts-btn.is-on {
  background: var(--accent); color: var(--text-on-accent);
  border-color: var(--accent);
}
@media (max-width: 600px) {
  .ts-label { width: 100%; text-align: center; padding: 2px 0 0; }
  .ts-row { justify-content: center; }
}