/* ==========================================================================
   THEMES & COLOR PALETTES
   Personalización visual en tiempo real para iOS y Android
   ========================================================================== */

:root {
  /* Tema 1: Rosa Romántico (Default) */
  --primary: #f43f5e;
  --primary-light: #fda4af;
  --primary-dark: #be123c;
  --primary-glow: rgba(244, 63, 94, 0.45);
  
  --secondary: #fb7185;
  --accent: #f59e0b;
  --accent-gold: #fde047;
  
  --bg-top: #fff1f2;
  --bg-mid: #ffe4e6;
  --bg-bottom: #fecdd3;
  --text-main: #881337;
  --text-muted: #9f1239;
  --text-light: #fff;
  
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(244, 63, 94, 0.22);
  --card-shadow: 0 10px 30px -5px rgba(225, 29, 72, 0.18);
  
  --petal-color-1: #f43f5e;
  --petal-color-2: #fb7185;
  --petal-color-3: #fda4af;
}

/* Tema 2: Jardín Sakura (Flor de Cerezo) */
body[data-theme="sakura"] {
  --primary: #ec4899;
  --primary-light: #fbcfe8;
  --primary-dark: #9d174d;
  --primary-glow: rgba(236, 72, 153, 0.45);
  
  --secondary: #f472b6;
  --accent: #e879f9;
  --accent-gold: #fef08a;
  
  --bg-top: #fdf2f8;
  --bg-mid: #fce7f3;
  --bg-bottom: #fbcfe8;
  --text-main: #701a75;
  --text-muted: #86198f;
  --text-light: #fff;
  
  --card-bg: rgba(255, 255, 255, 0.82);
  --card-border: rgba(236, 72, 153, 0.25);
  --card-shadow: 0 10px 30px -5px rgba(219, 39, 119, 0.18);
  
  --petal-color-1: #f472b6;
  --petal-color-2: #fbcfe8;
  --petal-color-3: #fff1f2;
}

/* Tema 3: Girasol Radiante (Calidez y Alegría) */
body[data-theme="sunflower"] {
  --primary: #d97706;
  --primary-light: #fde68a;
  --primary-dark: #92400e;
  --primary-glow: rgba(217, 119, 6, 0.45);
  
  --secondary: #f59e0b;
  --accent: #eab308;
  --accent-gold: #fef08a;
  
  --bg-top: #fffbeb;
  --bg-mid: #fef3c7;
  --bg-bottom: #fde68a;
  --text-main: #78350f;
  --text-muted: #92400e;
  --text-light: #fff;
  
  --card-bg: rgba(255, 255, 255, 0.84);
  --card-border: rgba(217, 119, 6, 0.25);
  --card-shadow: 0 10px 30px -5px rgba(180, 83, 9, 0.18);
  
  --petal-color-1: #f59e0b;
  --petal-color-2: #fbbf24;
  --petal-color-3: #fef08a;
}

/* Tema 4: Lavanda Ensueño (Paz y Ternura) */
body[data-theme="lavender"] {
  --primary: #8b5cf6;
  --primary-light: #ddd6fe;
  --primary-dark: #5b21b6;
  --primary-glow: rgba(139, 92, 246, 0.45);
  
  --secondary: #a78bfa;
  --accent: #c084fc;
  --accent-gold: #fde047;
  
  --bg-top: #f5f3ff;
  --bg-mid: #ede9fe;
  --bg-bottom: #ddd6fe;
  --text-main: #4c1d95;
  --text-muted: #5b21b6;
  --text-light: #fff;
  
  --card-bg: rgba(255, 255, 255, 0.82);
  --card-border: rgba(139, 92, 246, 0.25);
  --card-shadow: 0 10px 30px -5px rgba(109, 40, 217, 0.18);
  
  --petal-color-1: #a78bfa;
  --petal-color-2: #c084fc;
  --petal-color-3: #e9d5ff;
}

/* Tema 5: Noche Mágica Estrellada (Elegante & Celestial) */
body[data-theme="midnight"] {
  --primary: #818cf8;
  --primary-light: #c7d2fe;
  --primary-dark: #3730a3;
  --primary-glow: rgba(129, 140, 248, 0.45);
  
  --secondary: #6366f1;
  --accent: #facc15;
  --accent-gold: #fef08a;
  
  --bg-top: #0a0d18;
  --bg-mid: #141233;
  --bg-bottom: #240e4f;
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-light: #ffffff;
  
  --card-bg: rgba(25, 22, 64, 0.88);
  --card-border: rgba(129, 140, 248, 0.35);
  --card-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6);
  
  --petal-color-1: #818cf8;
  --petal-color-2: #facc15;
  --petal-color-3: #c7d2fe;
}

/* ====================================================================
   GARANTÍA DE CONTRASTE Y LEGIBILIDAD WCAG AA / AAA
   Asegura contraste óptimo en títulos, badges, subtítulos y targets
   en las 6 paletas (rose, sakura, sunflower, lavender, midnight, mint).
   ==================================================================== */
/* En todos los temas claros, el nombre del destinatario usa primary-dark para contraste >= 5.5:1 */
.recipient-name-target {
  color: var(--primary-dark) !important;
  font-weight: 800;
}

.hero-subtitle {
  color: var(--primary-dark) !important;
}

/* Optimización exhaustiva WCAG AA / AAA para Tema Midnight (Modo Oscuro Celestial) */
body[data-theme="midnight"] .hero-title,
body[data-theme="midnight"] .cake-header h2,
body[data-theme="midnight"] .section-title,
body[data-theme="midnight"] .flower-name,
body[data-theme="midnight"] .letter-header h3,
body[data-theme="midnight"] .theme-item-name,
body[data-theme="midnight"] .cake-instructions strong {
  color: #f8fafc !important;
  text-shadow: 0 0 16px rgba(129, 140, 248, 0.45) !important;
}

body[data-theme="midnight"] .recipient-name-target {
  color: #c7d2fe !important;
  text-shadow: 0 0 14px rgba(129, 140, 248, 0.6) !important;
}

body[data-theme="midnight"] .hero-subtitle {
  color: #a5f3fc !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

body[data-theme="midnight"] .hero-message,
body[data-theme="midnight"] .section-subtitle,
body[data-theme="midnight"] .flower-meaning,
body[data-theme="midnight"] .theme-item-meaning,
body[data-theme="midnight"] .cake-header p,
body[data-theme="midnight"] .desktop-shortcut-hint {
  color: #cbd5e1 !important;
}

body[data-theme="midnight"] .user-badge {
  background: rgba(25, 22, 64, 0.92) !important;
  border-color: rgba(129, 140, 248, 0.45) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.25) !important;
}

body[data-theme="midnight"] .user-badge span {
  color: #f8fafc !important;
}

body[data-theme="midnight"] .cake-instructions {
  background: rgba(25, 22, 64, 0.92) !important;
  border-color: rgba(129, 140, 248, 0.4) !important;
  color: #f8fafc !important;
}

/* Tema 6: Menta & Melocotón (Fresco y Dulce) */
body[data-theme="mint"] {
  --primary: #10b981;
  --primary-light: #a7f3d0;
  --primary-dark: #065f46;
  --primary-glow: rgba(16, 185, 129, 0.45);
  
  --secondary: #fb923c;
  --accent: #fdba74;
  --accent-gold: #fef08a;
  
  --bg-top: #ecfdf5;
  --bg-mid: #f0fdf4;
  --bg-bottom: #ffedd5;
  --text-main: #064e3b;
  --text-muted: #047857;
  --text-light: #fff;
  
  --card-bg: rgba(255, 255, 255, 0.82);
  --card-border: rgba(16, 185, 129, 0.25);
  --card-shadow: 0 10px 30px -5px rgba(5, 150, 105, 0.16);
  
  --petal-color-1: #34d399;
  --petal-color-2: #fb923c;
  --petal-color-3: #fed7aa;
}

/* ====================================================================
   ESTILOS Y RESPLANDORES TEMÁTICOS PARA LOS PASTELES DE CUMPLEAÑOS
   ==================================================================== */
.cake-svg.cake-theme-floral {
  filter: drop-shadow(0 15px 30px rgba(244, 63, 94, 0.18));
}

.cake-svg.cake-theme-cosmic {
  filter: drop-shadow(0 18px 40px rgba(6, 182, 212, 0.32));
}

.cake-svg.cake-theme-vintage_letter {
  filter: drop-shadow(0 16px 35px rgba(180, 83, 9, 0.26));
}

.cake-svg.cake-theme-cinema {
  filter: drop-shadow(0 18px 40px rgba(234, 179, 8, 0.28));
}

.cake-svg.cake-theme-pirate {
  filter: drop-shadow(0 16px 35px rgba(120, 53, 15, 0.32));
}

.cake-svg.cake-theme-candy {
  filter: drop-shadow(0 16px 35px rgba(244, 63, 94, 0.25));
}

.cake-svg.cake-theme-arcade {
  filter: drop-shadow(0 18px 40px rgba(34, 211, 238, 0.35));
}

.cake-svg.cake-theme-arcade rect,
.cake-svg.cake-theme-arcade polygon {
  shape-rendering: crispEdges;
}

/* ====================================================================
   COMPATIBILIDAD TEMÁTICA PARA MÓDULOS DELUXE VIP & PERSONALIZACIÓN
   Garantiza que Rasca y Gana, Vales, Cassette y widgets VIP adopten
   armoniosamente las 6 paletas: rose, sakura, sunflower, lavender,
   midnight y mint.
   ==================================================================== */
.deluxe-vip-header-card {
  border-color: var(--primary) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px var(--primary-glow) !important;
}

.deluxe-vip-header-card::before {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary-light), var(--primary), var(--primary-dark)) !important;
}

.deluxe-tab-btn.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #ffffff !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.deluxe-tab-btn:hover:not(.active) {
  border-color: var(--primary) !important;
  background: var(--primary-glow) !important;
}

/* 1. Rasca y Gana Theme-Aware */
.scratch-card-container {
  border-color: var(--primary) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px var(--primary-glow) !important;
}

.scratch-stage {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px var(--primary-glow) !important;
}

.scratch-badge {
  color: var(--primary) !important;
}

.scratch-progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--secondary, #fde047)) !important;
}

.scratch-progress-label strong {
  color: var(--primary-light, #fde047) !important;
}

/* 2. Cuponera de Vales Theme-Aware */
.vouchers-showcase-container {
  border-color: var(--primary) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px var(--primary-glow) !important;
}

.voucher-ticket {
  border-color: var(--primary-light, #ca8a04) !important;
}

.voucher-stub {
  border-right-color: var(--primary) !important;
}

.voucher-stub::before,
.voucher-stub::after {
  border-color: var(--primary) !important;
}

.voucher-stub-code {
  color: var(--primary-light, #facc15) !important;
}

.voucher-badge {
  color: var(--primary-dark) !important;
}

.btn-redeem-voucher:not(.redeemed-whatsapp) {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 3px 10px var(--primary-glow) !important;
}

/* 3. Cassette Retro Theme-Aware */
.cassette-showcase-container {
  border-color: var(--primary) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px var(--primary-glow) !important;
}

.cassette-body {
  border-color: var(--primary) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 15px var(--primary-glow) !important;
}

.cassette-sticker {
  border-color: var(--primary) !important;
}

.cassette-sticker-header {
  color: var(--primary-dark) !important;
}

.cassette-brand {
  color: var(--primary) !important;
}

.eq-bar {
  background: var(--primary) !important;
  box-shadow: 0 0 6px var(--primary-glow) !important;
}

.btn-cassette-action {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 3px 12px var(--primary-glow) !important;
}

/* 4. Calculador y Subcards VIP */
.calc-pricing-card {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px -5px var(--primary-glow) !important;
}

.vip-subcard-highlighted {
  border-color: var(--primary) !important;
  box-shadow: 0 6px 20px var(--primary-glow) !important;
}

/* 5. Candado Secreto / Mini Quiz ("Secret Love Lock") Theme-Aware */
.secret-lock-card {
  border-color: var(--card-border) !important;
  box-shadow: 0 12px 36px -6px var(--primary-glow) !important;
}

.lock-icon-halo {
  background: radial-gradient(circle, var(--primary-glow) 0%, rgba(255, 255, 255, 0.02) 70%) !important;
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 20px var(--primary-glow) !important;
}

.quiz-q-badge {
  color: var(--primary) !important;
}

.btn-quiz-unlock {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.quiz-secret-message-box {
  border-left-color: var(--primary) !important;
}

/* 6. Reloj de Amor en Vivo ("Love & Moments Counter") Theme-Aware */
.counter-main-card {
  border-color: var(--card-border) !important;
  box-shadow: 0 12px 36px -6px var(--primary-glow) !important;
}

.counter-num-display {
  color: var(--primary) !important;
  text-shadow: 0 2px 10px var(--primary-glow) !important;
}

.counter-unit-box {
  border-color: var(--card-border) !important;
}

.counter-header-tag {
  color: var(--text-main) !important;
}

.counter-since-tag,
.counter-unit-lbl,
.counter-quote-footer {
  color: var(--text-muted) !important;
}

/* 7. Reproductor de Música Personalizado Theme-Aware */
.custom-music-player-box {
  border-color: var(--card-border) !important;
  box-shadow: 0 8px 24px var(--primary-glow, rgba(0, 0, 0, 0.08)) !important;
}

.btn-player-mini:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* 8. Souvenir Físico Imprimible Theme-Aware */
.keepsake-ticket {
  box-shadow: 0 16px 40px -10px var(--primary-glow, rgba(180, 83, 9, 0.28)), inset 0 0 20px rgba(254, 240, 138, 0.4) !important;
}

.ticket-stars-row {
  color: var(--accent, #d97706) !important;
}

/* 9. Cápsula Cósmica & Galaxia Theme-Aware */
.galaxy-orbits-bg .galaxy-orbit-ring {
  border-color: var(--primary-glow) !important;
}

.galaxy-constellation-tag {
  border-color: var(--primary-light) !important;
  background: rgba(15, 23, 42, 0.75) !important;
}

.constellation-star-name {
  color: var(--primary-light, #fde047) !important;
  text-shadow: 0 0 10px var(--primary-glow) !important;
}

.constellation-coords {
  color: var(--accent-gold, #fef08a) !important;
  font-size: 0.75rem;
  font-family: monospace;
  margin-left: 6px;
  opacity: 0.9;
}

/* ====================================================================
   OPTIMIZACIONES ESPECÍFICAS PARA CADA UNA DE LAS 6 PALETAS
   ==================================================================== */

/* Paleta 1: Rose (Romántico Clásico) */
body[data-theme="rose"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
}

/* Paleta 2: Sakura (Flor de Cerezo) */
body[data-theme="sakura"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #ec4899 0%, #9d174d 100%) !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35) !important;
}
body[data-theme="sakura"] .counter-num-display {
  color: #ec4899 !important;
  text-shadow: 0 2px 10px rgba(236, 72, 153, 0.35) !important;
}

/* Paleta 3: Sunflower (Girasol Radiante / Oro) */
body[data-theme="sunflower"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}
body[data-theme="sunflower"] .calc-tier-chip.active {
  border-color: #d97706 !important;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(245, 158, 11, 0.22) 100%) !important;
}
body[data-theme="sunflower"] .counter-num-display {
  color: #d97706 !important;
  text-shadow: 0 2px 10px rgba(217, 119, 6, 0.35) !important;
}

/* Paleta 4: Lavender (Lavanda Ensueño) */
body[data-theme="lavender"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
}
body[data-theme="lavender"] .counter-num-display {
  color: #8b5cf6 !important;
  text-shadow: 0 2px 10px rgba(139, 92, 246, 0.35) !important;
}

/* Paleta 5: Midnight (Noche Mágica Estrellada / Modo Oscuro) */
body[data-theme="midnight"] .secret-lock-card,
body[data-theme="midnight"] .counter-main-card,
body[data-theme="midnight"] .custom-music-player-box,
body[data-theme="midnight"] .calc-pricing-card,
body[data-theme="midnight"] .vip-subcard {
  background: rgba(25, 22, 64, 0.94) !important;
  border-color: rgba(129, 140, 248, 0.38) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 20px rgba(129, 140, 248, 0.25) !important;
}

body[data-theme="midnight"] .calc-heading,
body[data-theme="midnight"] .calc-price-val,
body[data-theme="midnight"] .counter-header-tag,
body[data-theme="midnight"] .quiz-question-text,
body[data-theme="midnight"] .quiz-revealed-heading,
body[data-theme="midnight"] .vip-subcard-header strong {
  color: #f8fafc !important;
}

body[data-theme="midnight"] .calc-subheading,
body[data-theme="midnight"] .calc-feature-name,
body[data-theme="midnight"] .calc-tier-subtitle,
body[data-theme="midnight"] .counter-since-tag,
body[data-theme="midnight"] .counter-unit-lbl,
body[data-theme="midnight"] .counter-quote-footer,
body[data-theme="midnight"] .vip-field-label,
body[data-theme="midnight"] .vip-subcard-desc,
body[data-theme="midnight"] .player-tag {
  color: #cbd5e1 !important;
}

body[data-theme="midnight"] .counter-unit-box {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(129, 140, 248, 0.3) !important;
}

body[data-theme="midnight"] .counter-num-display {
  color: #c7d2fe !important;
  text-shadow: 0 0 14px rgba(129, 140, 248, 0.6) !important;
}

body[data-theme="midnight"] .vip-voucher-item-box {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(129, 140, 248, 0.28) !important;
}

body[data-theme="midnight"] .vip-voucher-item-title strong {
  color: #f8fafc !important;
}

body[data-theme="midnight"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45) !important;
}

body[data-theme="midnight"] .keepsake-ticket {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(250, 204, 21, 0.35) !important;
}

/* Paleta 6: Mint (Menta & Melocotón Fresco) */
body[data-theme="mint"] .btn-calc-live-preview {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
body[data-theme="mint"] .counter-num-display {
  color: #10b981 !important;
  text-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}
body[data-theme="mint"] .calc-tier-chip.active {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(251, 146, 60, 0.18) 100%) !important;
}