/* =====================================================================
   Free Lotty — Modo Casino (tema oscuro)
   Paleta basada en psicología del color en juegos de azar:
   negro = autoridad y lujo · DORADO = riqueza y recompensa (acento dominante)
   rojo = urgencia, en dosis pequeñas · verde paño = estabilidad
   Se activa con <html data-theme="casino">.
   ===================================================================== */
html[data-theme="casino"] {
  color-scheme: dark;
  --ink: #fbf4e6;
  --muted: #b9afa1;
  --paper: #15121a;
  --ground: #0a080d;
  --line: #2e2836;
  --gold: #ffcf33;
  --gold-deep: #c98d08;
  --gold-soft: #ffe58a;
  --gold-light: #3a2a08;          /* fondos "dorado tenue" sobre negro */
  --gold-ink: #241a00;
  --gold-button: linear-gradient(180deg, #ffe27a 0%, #ffc81f 55%, #e0a10c 100%);
  --gold-button-hover: linear-gradient(180deg, #fff0a8 0%, #ffd43b 55%, #e8ae12 100%);
  --green: #e3b117;               /* el "color de marca" pasa a dorado en estados activos */
  --green-dark: #c98d08;
  --mint: #2a2010;
  --red: #e5323f;                  /* solo urgencia: cuenta atrás, insignias */
  --felt: #0f6b3f;
  --felt-dark: #073b21;
  --ct: #ffffff12;
}
html[data-theme="casino"] body { background: var(--ground) radial-gradient(circle at 50% -10%, #2a1d05 0%, transparent 50%) fixed; }

html[data-theme="casino"] .brand-word { fill: var(--gold); }

/* ---------- Superficies ---------- */
html[data-theme="casino"] .site-header,
html[data-theme="casino"] .mobile-nav,
html[data-theme="casino"] .skip-link,
html[data-theme="casino"] .latest-preview,
html[data-theme="casino"] .play-section,
html[data-theme="casino"] #entries, html[data-theme="casino"] #results, html[data-theme="casino"] #rewards,
html[data-theme="casino"] #account, html[data-theme="casino"] #faq,
html[data-theme="casino"] dialog,
html[data-theme="casino"] .result-item,
html[data-theme="casino"] .result-filters button,
html[data-theme="casino"] .faq-search,
html[data-theme="casino"] .faq.rules .faq-list details,
html[data-theme="casino"] .steps-nav button,
html[data-theme="casino"] .step-visual,
html[data-theme="casino"] .lang-switch,
html[data-theme="casino"] .sound-toggle,
html[data-theme="casino"] .theme-toggle,
html[data-theme="casino"] select, html[data-theme="casino"] input[type='text'], html[data-theme="casino"] #profile-name { background: var(--paper); color: var(--ink); border-color: var(--line); }
html[data-theme="casino"] .latest-preview, html[data-theme="casino"] .play-section,
html[data-theme="casino"] #entries, html[data-theme="casino"] #results, html[data-theme="casino"] #rewards,
html[data-theme="casino"] #account, html[data-theme="casino"] #faq { box-shadow: inset 0 1px 0 #ffffff0d, 0 0 0 1px #ffcf3314; }
html[data-theme="casino"] .site-header { border-bottom-color: #ffcf3340; box-shadow: 0 1px 0 #ffcf3318; }
html[data-theme="casino"] .sidebar { border-right-color: var(--line); }
html[data-theme="casino"] .sidebar nav > a:hover { background: var(--ct); }
/* "Jugar ahora" en rojo también en modo casino (el dorado marca la sección seleccionada) */
html[data-theme="casino"] .sidebar nav > a.nav-play, html[data-theme="casino"] .sidebar nav > a.nav-play[aria-current] { background: linear-gradient(180deg, #f0505b 0%, #d92633 55%, #b0141f 100%); color: #fff; box-shadow: 0 6px 18px #e5323f55, 0 0 0 1px #ff8a9233, inset 0 1px 0 #ffffff4d; }
html[data-theme="casino"] .sidebar nav > a.nav-play:hover { background: linear-gradient(180deg, #ff6670 0%, #e8323f 55%, #c01a26 100%); box-shadow: 0 10px 24px #e5323f80, 0 0 18px #e5323f40, inset 0 1px 0 #ffffff4d; }
html[data-theme="casino"] .nav-caption { color: var(--muted); }
html[data-theme="casino"] .steps-nav button[aria-selected="true"],
html[data-theme="casino"] .result-item[aria-pressed="true"] { background: var(--mint); border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
html[data-theme="casino"] .results-layout .lotti-says p,
html[data-theme="casino"] .lotti-bubble { background: #fff7d6; color: #241a00; }
html[data-theme="casino"] .lotti-bubble::after { border-top-color: #fff7d6; }
html[data-theme="casino"] .celebrate-toast { background: var(--paper); color: var(--ink); }
html[data-theme="casino"] dialog::backdrop { background: #000000cc; }

/* ---------- Boleto gratis (barra lateral): oro sobre negro ---------- */
html[data-theme="casino"] .sidebar-how { background: radial-gradient(120% 90% at 100% 0%, #3d2b06, #1f1604 55%, #15121a 100%); border-color: #ffcf3355; box-shadow: inset 0 1px 0 #ffcf3333, 0 12px 30px #00000080, 0 0 40px #ffcf3318; }
html[data-theme="casino"] .sidebar-how h3 { color: var(--gold-soft); }
html[data-theme="casino"] .sidebar-how p { color: #d8ccb4; }
html[data-theme="casino"] .sidebar-how a { color: var(--gold); border-top-color: #ffcf3333; }
html[data-theme="casino"] .sidebar-how .free-ticket-art { filter: drop-shadow(0 0 18px #ffcf3366) drop-shadow(0 10px 16px #00000080); }

/* ---------- Botones: dorado = recompensa ---------- */
html[data-theme="casino"] .primary-button, html[data-theme="casino"] .submit-button, html[data-theme="casino"] .signup {
  background: var(--gold-button); color: var(--gold-ink); font-weight: 800;
  box-shadow: 0 4px 0 #a86f03, 0 10px 26px #ffcf3355;
}
html[data-theme="casino"] .primary-button:hover, html[data-theme="casino"] .submit-button:not(:disabled):hover, html[data-theme="casino"] .signup:hover { background: var(--gold-button-hover); }
html[data-theme="casino"] .submit-button:disabled, html[data-theme="casino"] #submit-entry:disabled { background: #26212c; color: #7a7284; box-shadow: none; }
html[data-theme="casino"] .secondary-button { background: #1d1822; color: var(--gold); border-color: #8d6a0f; }
html[data-theme="casino"] .secondary-button:hover { background: var(--mint); border-color: var(--gold); }
html[data-theme="casino"] .latest-preview .secondary-button, html[data-theme="casino"] .draw-card .secondary-button { background: var(--red-button); color: #fff; border: 0; box-shadow: 0 3px 0 #7d0819, 0 8px 22px #e5323f66; }
html[data-theme="casino"] .latest-preview .secondary-button:hover, html[data-theme="casino"] .draw-card .secondary-button:hover { background: var(--red-button-hover); }
html[data-theme="casino"] .text-button, html[data-theme="casino"] .text-link, html[data-theme="casino"] .my-tickets a, html[data-theme="casino"] dialog .eyebrow { color: var(--gold); }
html[data-theme="casino"] .desktop-nav a[aria-current] { color: var(--gold); border-bottom-color: var(--gold); }
html[data-theme="casino"] .sidebar nav > a[aria-current] { background: var(--gold-button); color: var(--gold-ink); box-shadow: 0 6px 18px #ffcf3344; }
html[data-theme="casino"] .sidebar nav > a[aria-current] .nav-count { background: #241a00; color: var(--gold); }

/* ---------- Hero: negro profundo con destello dorado ---------- */
html[data-theme="casino"] .portal-hero { background: radial-gradient(120% 150% at 88% 15%, #5a3d05 0%, #2a1a04 38%, #0e0a10 100%); box-shadow: inset 0 0 90px #00000080, 0 18px 40px #00000080, 0 0 0 1px #ffcf3322; }
html[data-theme="casino"] .portal-hero { background-color: #1a1038; }
html[data-theme="casino"] .hero-copy > p:not(.eyebrow), html[data-theme="casino"] .hero-prize span { color: #ffe3e7; }
html[data-theme="casino"] .hero-copy .eyebrow { color: var(--gold); }
html[data-theme="casino"] .hero-signup { color: #ffe3e7; }
html[data-theme="casino"] .hero-signup b { color: var(--gold); }
html[data-theme="casino"] .portal-hero h2 em { color: var(--gold); text-shadow: 0 0 24px #ffcf3366, 0 2px 10px #00000080; }
html[data-theme="casino"] .prize-ribbon { background: #050308; border-bottom-color: #ffcf3340; }
html[data-theme="casino"] .prize-ribbon::before { background: linear-gradient(90deg, #050308, transparent); }
html[data-theme="casino"] .prize-ribbon::after { background: linear-gradient(-90deg, #050308, transparent); }

/* ---------- Tarjetas de sorteo: color saturado por tipo, premio en grande ---------- */
html[data-theme="casino"] .draw-card { --draw-color: #0d3d22; --draw-ink: #ffffff; --draw-accent: var(--gold); border-color: #2fbf5a99; box-shadow: inset 0 1px 0 #ffffff1f, 0 14px 30px #00000066; }
html[data-theme="casino"] .draw-card[data-kind="weekly"]  { border-color: #4d7cff99; --draw-accent: #ffffff; }
html[data-theme="casino"] .draw-card[data-kind="monthly"] { border-color: #ff5c6e99; --draw-accent: var(--gold); }
html[data-theme="casino"] .draw-card[data-kind="yearly"]  { border-color: #ffcf33aa; --draw-accent: #ffffff; }
html[data-theme="casino"] .draw-card::after { background: linear-gradient(90deg, transparent, #ffffff33, transparent); }
html[data-theme="casino"] .draw-card .card-prize img { filter: drop-shadow(0 16px 22px #00000099) drop-shadow(0 0 24px #ffffff22); }
html[data-theme="casino"] .draw-card.soon { box-shadow: 0 0 0 2px #ffcf33, 0 14px 30px #ffcf3344; }

/* ---------- Selector de números: fichas negras, oro al elegir ---------- */
html[data-theme="casino"] .lotto-number { background: #201a27; border-color: #3a3244; color: var(--ink); }
html[data-theme="casino"] .lotto-number:hover:not(:disabled) { border-color: var(--gold); background: #2a2232; box-shadow: 0 6px 14px #ffcf3333; }
html[data-theme="casino"] .lotto-number.selected { background: radial-gradient(circle at 35% 30%, #fff6c2 0%, #ffcf33 50%, #c98d08 100%); border-color: #fff0a8; color: var(--gold-ink); box-shadow: 0 3px 0 #a86f03, 0 8px 18px #ffcf3366; }
html[data-theme="casino"] .lotto-number:disabled:not(.selected) { background: #15111b; color: #5b5266; border-color: #241e2d; }
html[data-theme="casino"] .ticket-panel { background: #100d14; }
html[data-theme="casino"] .status-tag { background: var(--gold-light); color: var(--gold); }
html[data-theme="casino"] .status-tag.confirmed { color: var(--gold-ink); }
html[data-theme="casino"] .quota-message, html[data-theme="casino"] .storage-message { background: #2a1f08; color: #ffe6a6; border-color: #8d6a0f; }
html[data-theme="casino"] .daily-quota.full { color: #ff8a52; }
html[data-theme="casino"] .quota-ticket { border-color: #4a4056; color: #7d7387; }
html[data-theme="casino"] .reward-card { background: #100d14; border-color: var(--line); box-shadow: inset 0 1px 0 #ffffff0d, 0 14px 30px #00000066; }
html[data-theme="casino"] .status-tag.soon { background: #2a1a4a; color: #c3a1ff; }
html[data-theme="casino"] .step-ticket { background: #2a1f08; border-color: #c89a1a; }
html[data-theme="casino"] .results-layout td, html[data-theme="casino"] .results-layout th { border-bottom-color: var(--line); }

/* ---------- Resultados: paño verde, estabilidad ---------- */
html[data-theme="casino"] .result-card { background: radial-gradient(circle at 25% 0%, #1b8a52, var(--felt-dark) 72%); box-shadow: inset 0 0 0 1px #ffffff1a, 0 16px 40px #00000080; }
html[data-theme="casino"] .next-draw { background: linear-gradient(135deg, #3d2b06, #15121a); box-shadow: inset 0 0 0 1px #ffcf3333; }
html[data-theme="casino"] .next-draw .eyebrow { color: var(--gold); }
html[data-theme="casino"] .next-count, html[data-theme="casino"] .rules-hero p:last-child { color: #ffd9de; }
html[data-theme="casino"] .rules-hero::before { background: linear-gradient(90deg, #4a0612f2 0%, #4a0612cc 38%, #4a061233 62%, transparent 80%); }
html[data-theme="casino"] .result-filters button[aria-pressed="true"] { background: var(--gold-button); border-color: var(--gold-deep); color: var(--gold-ink); }
html[data-theme="casino"] .result-mine { background: var(--gold-light); color: var(--gold); }

/* ---------- Controles de cabecera y móvil ---------- */
html[data-theme="casino"] .header-tickets { color: var(--gold); }
html[data-theme="casino"] .lang-switch button[aria-pressed="true"] { background: var(--mint); }
html[data-theme="casino"] .sound-toggle:hover, html[data-theme="casino"] .theme-toggle:hover { background: var(--mint); }
html[data-theme="casino"] .theme-toggle { box-shadow: 0 0 0 2px #ffcf3366, 0 6px 16px #ffcf3333; }
html[data-theme="casino"] .site-header, html[data-theme="casino"] .tab-bar { background: #15121aeb; border-color: var(--line); }
html[data-theme="casino"] .tab-bar a { color: var(--muted); }
html[data-theme="casino"] .tab-bar a[aria-current] { color: var(--gold); }
html[data-theme="casino"] .tab-play-icon { box-shadow: 0 6px 16px #b07a0566, 0 0 0 4px var(--paper); }
html[data-theme="casino"] .tab-badge { background: var(--red); }
html[data-theme="casino"] #submit-entry { box-shadow: 0 4px 0 #a86f03, 0 10px 26px #ffcf3355; }
html[data-theme="casino"] .mobile-nav a[aria-current] { background: var(--mint); color: var(--gold); }
html[data-theme="casino"] .lotto-ticket { --cut: var(--paper); }



/* ---------- Bolas en todas las listas ---------- */
html[data-theme="casino"] .mini-balls span { box-shadow: inset -4px -6px 10px #00000055, inset 2px 3px 6px #ffffff99, 0 6px 12px #000000aa; }

/* ---------- Reglas y ayuda / Mis boletos ---------- */
html[data-theme="casino"] .step-panel { background: linear-gradient(135deg, #1d1428, #0e0b14); border-color: #ffcf3340; box-shadow: inset 0 1px 0 #ffffff14; }
html[data-theme="casino"] .step-visual { background: #07060a; box-shadow: inset 0 0 0 1px #ffffff14; }
html[data-theme="casino"] .step-copy .eyebrow { color: var(--gold); }
html[data-theme="casino"] .step-copy h4 { color: var(--ink); }
html[data-theme="casino"] .steps-nav button span { background: #2a2233; color: var(--ink); }
html[data-theme="casino"] .steps-nav button[aria-selected="true"] { color: var(--gold); }
html[data-theme="casino"] .step-dots span { background: #3a3244; }
html[data-theme="casino"] .step-dots span.on { background: var(--gold); }
html[data-theme="casino"] .rules-card { background: #100d14; border-color: var(--line); border-top-color: var(--gold); }
html[data-theme="casino"] .rules-card th, html[data-theme="casino"] .rules-card td { border-bottom-color: var(--line); }
html[data-theme="casino"] .faq.rules .faq-list details[open] { border-color: var(--gold); box-shadow: 0 6px 18px #ffcf3318; }
html[data-theme="casino"] .faq.rules .faq-list summary::after { background: var(--gold-light); color: var(--gold); }
html[data-theme="casino"] .faq-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px #ffcf3333; }
html[data-theme="casino"] .entry-list .lotto-ticket { --cut: var(--paper); box-shadow: 0 1px 0 #e6d6a8, 0 14px 30px #00000080; }
html[data-theme="casino"] .entry-actions .secondary-button { background: #1d1822; }
html[data-theme="casino"] .theme-toggle { color: var(--gold); }

@media (max-width: 640px) { html[data-theme="casino"] .portal-hero { background: radial-gradient(120% 150% at 88% 15%, #ff2d4a 0%, #9c0a23 40%, #1a0409 100%); } html[data-theme="casino"] .portal-hero::before { background: repeating-conic-gradient(from 0deg, #ffcf3318 0 7deg, transparent 7deg 15deg); } }

html[data-theme="casino"] .previous-result { background: #100d14; border-color: var(--line); }

html[data-theme="casino"] .method-option { background: #1d1822; border-color: var(--line); }
html[data-theme="casino"] .method-option:hover { border-color: var(--gold); }

/* Transición suave al cambiar de tema */
html.theme-switching, html.theme-switching * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }