/* ═══════════════════════════════════════════════════════
   TEMAS DEL QUIZ · base común
   Otra piel para el mismo quiz: mismas pantallas, textos, lógica y tracking.
   index.html no cambia; esto se carga encima solo si hay tema (?tema= o TEMA en Railway).
   Cada tema (marca.css, noche.css, editorial.css) define las variables --t-* y sus detalles.
   Todo va bajo html[data-tema] para ganarle a las clases de Tailwind por especificidad.
   ═══════════════════════════════════════════════════════ */

html[data-tema] body{
  background: var(--t-page); color: var(--t-text); font-family: var(--t-font-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html[data-tema] #quiz-container{ background: var(--t-fondo, var(--t-bg)); min-height: 100vh; min-height: 100dvh; }

/* ── textos ── */
html[data-tema] .text-gray-900{ color: var(--t-ink); }
html[data-tema] .text-gray-800,
html[data-tema] .text-gray-700{ color: var(--t-text); }
html[data-tema] .text-gray-600,
html[data-tema] .text-gray-500{ color: var(--t-muted); }
html[data-tema] .text-gray-400,
html[data-tema] .text-gray-300{ color: var(--t-faint); }
html[data-tema] .text-\[\#8800A3\],
html[data-tema] .hover\:text-\[\#8800A3\]:hover{ color: var(--t-accent); }
html[data-tema] .text-\[\#d93025\]{ color: var(--t-alert); }
html[data-tema] span.bg-yellow-200{ background: var(--t-mark-bg); color: var(--t-mark-ink); box-shadow: var(--t-mark-shadow, none); }

html[data-tema] #content-area h1,
html[data-tema] #content-area h2,
html[data-tema] #popup-question{
  font-family: var(--t-font-head) !important;   /* el título de la lectura trae Cinzel en línea */
  font-weight: var(--t-head-weight); letter-spacing: var(--t-head-tracking, 0); line-height: var(--t-head-leading, 1.15);
}
html[data-tema] #content-area h1.text-2xl,
html[data-tema] #content-area h2.text-2xl{ font-size: var(--t-h1, 1.5rem); }
html[data-tema] #content-area h1.text-3xl,
html[data-tema] #content-area h2.text-3xl{ font-size: var(--t-h1-grande, 1.875rem); }

/* ── encabezado: título de sección, contador y barra ── */
html[data-tema] #section-title{ color: var(--t-faint); font-size: 11px; letter-spacing: .16em; font-weight: 500; }
html[data-tema] #header .rounded-full.bg-\[\#FEF5FF\]{ background: var(--t-pill-bg); color: var(--t-pill-ink); box-shadow: var(--t-pill-borde, none); }
html[data-tema] #header .bg-gray-100{ background: var(--t-track); height: var(--t-barra, 6px); }
html[data-tema] #progress-fill{ background: var(--t-progress, var(--t-primary)); }
html[data-tema] #back-btn{ color: var(--t-faint); }

/* ── botón principal (Continuar, Sí, el de la lectura) ── */
html[data-tema] .bg-\[\#8800A3\]{ background: var(--t-primary); }
html[data-tema] .bg-\[\#FEF5FF\]{ background: var(--t-surface); }   /* lilas sueltos: renglones del precheckout */
html[data-tema] .hover\:bg-\[\#700085\]:hover{ background: var(--t-primary-hover); }
html[data-tema] button.bg-\[\#8800A3\]{
  color: var(--t-on-primary); border-radius: var(--t-btn-radius); box-shadow: var(--t-btn-shadow);
  font-family: var(--t-font-btn, var(--t-font-ui)); font-weight: var(--t-btn-weight, 600);
  letter-spacing: var(--t-btn-tracking, 0); text-transform: var(--t-btn-case, none);
}
html[data-tema] #carousel-dots button{ border-radius: 9999px; box-shadow: none; }
html[data-tema] #carousel-dots .bg-gray-300{ background: var(--t-track); }

/* ── opciones de una sola respuesta ── */
html[data-tema] .btn-option{
  background: var(--t-surface) !important; border: var(--t-opt-borde) !important;
  border-radius: var(--t-radius) !important; box-shadow: var(--t-opt-shadow) !important;
}
html[data-tema] .btn-option:hover{ background: var(--t-surface-hover) !important; transform: translateY(-1px); }
html[data-tema] .btn-option .label-text{ color: var(--t-ink); font-size: var(--t-opt-size, 1.0625rem); font-weight: var(--t-opt-weight, 500); line-height: 1.3; }
html[data-tema] .btn-option > div:first-child{             /* el emoji, en su círculo */
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--t-icon-radius, 9999px);
  background: var(--t-icon-bg); box-shadow: var(--t-icon-borde, none);
  display: flex; align-items: center; justify-content: center; font-size: 22px; filter: none;
}
html[data-tema] .btn-option.btn-selected{
  background: var(--t-selected-bg) !important; border-color: var(--t-primary) !important; box-shadow: var(--t-selected-shadow) !important;
}
html[data-tema] .btn-option.btn-selected .label-text{ color: var(--t-selected-ink) !important; }

/* ── opciones de varias respuestas (pantalla 7) ── */
html[data-tema] .btn-purple-fill{
  background: var(--t-surface); border: var(--t-opt-borde); border-radius: var(--t-radius) !important;
  box-shadow: var(--t-opt-shadow) !important;
}
html[data-tema] .btn-purple-fill:hover{ background: var(--t-surface-hover); }
html[data-tema] .btn-purple-fill .label-text{ color: var(--t-ink); font-weight: var(--t-opt-weight, 500); font-size: var(--t-opt-size, 1.0625rem); }
html[data-tema] .btn-purple-fill.selected{
  background: var(--t-primary) !important; border-color: var(--t-primary) !important; box-shadow: var(--t-selected-shadow) !important;
}
html[data-tema] .btn-purple-fill.selected .label-text{ color: var(--t-on-primary) !important; }
html[data-tema] .check-circle{ background: transparent; border-color: var(--t-line); }
html[data-tema] .btn-purple-fill.selected .check-circle{ background: var(--t-on-primary); border-color: var(--t-on-primary); }
html[data-tema] .check-mark{ color: var(--t-primary); }

/* ── signos (pantalla 4) ── */
html[data-tema] #z-grid > button{
  background: var(--t-surface); border: var(--t-opt-borde) !important; border-radius: var(--t-radius);
  box-shadow: var(--t-opt-shadow); padding: 14px 8px;
}
html[data-tema] #z-grid > button:hover,
html[data-tema] #z-grid > button[data-picked]{ border-color: var(--t-primary) !important; }
html[data-tema] #z-grid > button[data-picked]{ background: var(--t-selected-bg); }
html[data-tema] #z-grid > button > span:first-child{
  color: var(--t-accent); font-variant-emoji: text; font-size: 28px; line-height: 1.1;
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
}
html[data-tema] #z-grid > button > span:last-child{ color: var(--t-ink); font-weight: 500; }

/* ── pantallas de pausa (6 y 12) ── */
html[data-tema] #content-area .rounded-full.bg-white{ background: var(--t-surface); border-color: var(--t-line); box-shadow: var(--t-burbuja-shadow, 0 20px 40px -12px rgba(0,0,0,.15)); }
html[data-tema] #carousel-track{ border-color: var(--t-line); border-radius: var(--t-radius); }

/* ── análisis (16) ── */
html[data-tema] #ring-fill{ stroke: var(--t-primary); stroke-linecap: round; }
html[data-tema] .progress-ring circle:first-child{ stroke: var(--t-track); }
html[data-tema] #pct-text{ color: var(--t-accent); font-family: var(--t-font-head); font-weight: var(--t-head-weight); }
html[data-tema] .status-icon{ background: var(--t-bg) !important; border-color: var(--t-line) !important; }
html[data-tema] .task-active{ background: var(--t-selected-bg) !important; }
html[data-tema] .task-active .status-icon{ border-color: var(--t-primary) !important; animation: t-pulso 2s infinite; }
html[data-tema] .task-active span{ color: var(--t-accent) !important; }
html[data-tema] .task-completed .status-icon{ background: var(--t-primary) !important; border-color: var(--t-primary) !important; color: var(--t-on-primary) !important; }
@keyframes t-pulso{ 0%,100%{ box-shadow: 0 0 0 0 var(--t-glow); } 50%{ box-shadow: 0 0 0 8px transparent; } }

html[data-tema] #popup-overlay{ background: var(--t-overlay); }
html[data-tema] #popup-overlay > div{ background: var(--t-bg); border-color: var(--t-line); border-radius: var(--t-popup-radius, 24px); }
html[data-tema] #popup-overlay .bg-gray-100{ background: var(--t-surface); color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-line); }
html[data-tema] #popup-overlay .bg-purple-100{ background: var(--t-glow); }
html[data-tema] #popup-close{ color: var(--t-faint); }

/* ── la mini lectura (17) ── */
html[data-tema] .reading-text{ font-family: var(--t-font-read); color: var(--t-text); }
html[data-tema] .reading-text p{ color: var(--t-text); }
html[data-tema] .reading-text strong{ color: var(--t-ink); }
html[data-tema] .handwritten-signoff{ font-family: var(--t-font-head); color: var(--t-accent) !important; }

/* ── las cartas: el dorso (abanico) y el frente ── */
html[data-tema] .tarot-front,
html[data-tema] .tarot-back{ border: var(--t-card-canto); outline: var(--t-card-outline); }
html[data-tema] .tarot-front{ background: var(--t-card-dorso); }
html[data-tema] .tarot-front::after{
  background: var(--t-card-dorso-arte); opacity: 1; inset: 5px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--t-card-dorso-linea);
}
html[data-tema] .tarot-back,
html[data-tema] .static-card-display{ background: var(--t-card-frente); }
html[data-tema] .static-card-display{ border: var(--t-card-canto); outline: var(--t-card-outline); box-shadow: var(--t-card-shadow); }
html[data-tema] .card-inner-border{ border: var(--t-card-marco); background: transparent; }
html[data-tema] .card-title{ color: var(--t-card-titulo); }
html[data-tema] .card-roman,
html[data-tema] .card-keywords{ color: var(--t-card-suave); }
html[data-tema] .card-info{ border-top-color: var(--t-card-linea); }
html[data-tema] .tarot-card-inner{ box-shadow: var(--t-card-sombra-abanico, -2px 2px 6px rgba(0,0,0,.25)); }
@media (hover:hover){
  html[data-tema] .tarot-card-container:not(.clicked):hover .tarot-card-inner{ box-shadow: 0 10px 24px var(--t-glow); }
}
html[data-tema] .tarot-card-container.clicked .tarot-card-inner{ box-shadow: 0 0 44px var(--t-glow); }

/* ── pantalla 18: página de venta (PRECHECKOUT=1) y video de venta (VSL=1) ── */
html[data-tema] .pc{ color: var(--t-text); }
html[data-tema] .pc-sec.lila{ background: var(--t-franja); }
html[data-tema] .pc-h2{ color: var(--t-ink); font-family: var(--t-font-head); font-weight: var(--t-head-weight); font-size: 1.6rem; }
html[data-tema] .pc-cinzel{ color: var(--t-accent); font-family: var(--t-font-head); }
html[data-tema] .pc-item,
html[data-tema] .pc-faq{ background: var(--t-surface); border-color: var(--t-line); box-shadow: none; }
html[data-tema] .pc-ico,
html[data-tema] .pc-ico[style]{ background: var(--t-icon-bg) !important; color: var(--t-accent); box-shadow: var(--t-icon-borde, none); }
html[data-tema] .pc-faq summary{ color: var(--t-ink); }
html[data-tema] .pc-faq p{ color: var(--t-muted); }
html[data-tema] .pc .bg-white{ background: var(--t-surface); }
html[data-tema] .pc .border-\[\#E9C9F0\]{ border-color: var(--t-line); }
html[data-tema] .pc .border-gray-100{ border-color: var(--t-line); }
html[data-tema] .pc-video{ background: var(--t-card-dorso); }
html[data-tema] .vsl{ background: transparent; color: var(--t-ink); font-family: var(--t-font-ui); }
html[data-tema] .vsl-titulo{ font-family: var(--t-font-head); font-weight: var(--t-head-weight); }
html[data-tema] .vsl-aire{ background: transparent; }
html[data-tema] body.vsl-on #logo-bar{ border-bottom-color: var(--t-line); }