/* ===== Calculadora de la Lotería de Navidad ===== */
.lt { background:
    radial-gradient(800px 380px at 88% -8%, rgba(242,177,52,.30), transparent 60%),
    radial-gradient(640px 360px at -8% 105%, rgba(255,90,90,.18), transparent 60%),
    linear-gradient(160deg, #06372D 0%, #0A5A48 55%, #0B7A63 100%); }
.lt::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 58% 22%, rgba(255,236,170,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(2px 2px at 92% 34%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 42%, rgba(255,236,170,.6), transparent 60%);
  animation: lt-twinkle 5s ease-in-out infinite alternate; }
@keyframes lt-twinkle { from { opacity: .45; } to { opacity: 1; } }

.lt-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.6rem; align-items: center; padding: .6rem 0 1.6rem; }
.lt-top .hero { padding: 0; }
.lt-count { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; align-items: center; }
.lt-count span { color: #CFE9E0; font-size: .85rem; font-weight: 600; margin-right: .2rem; }
.lt-count b { display: grid; place-items: center; min-width: 3.6rem; padding: .45rem .5rem .35rem; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 700 1.35rem/1 var(--num); }
.lt-count b small { display: block; font: 600 .62rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #A9D2C5; margin-top: .3rem; }

/* Décimo */
.lt-ticket { position: relative; transform: rotate(-3deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: lt-float 6s ease-in-out infinite; }
@keyframes lt-float { 50% { transform: rotate(-1.5deg) translateY(-8px); } }
.lt-paper { position: relative; border-radius: 14px; overflow: hidden; color: #4A2A00;
  background:
    repeating-radial-gradient(circle at 20% 50%, transparent 0 9px, rgba(180,120,20,.07) 9px 10px),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(180,120,20,.05) 6px 7px),
    linear-gradient(135deg, #FFF8E6 0%, #FCEBC2 100%);
  display: grid; grid-template-columns: 2.4rem 1fr; }
.lt-stub { background: linear-gradient(180deg, #C62828, #8E1B1B); display: grid; place-items: center; border-right: 2px dashed rgba(255,255,255,.55); }
.lt-stub span { writing-mode: vertical-rl; transform: rotate(180deg); color: #FFE7A3; font: 800 .7rem var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.lt-body { padding: .9rem 1.1rem 1rem; }
.lt-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9A5B00; }
.lt-num { display: flex; gap: .35rem; margin: .55rem 0 .5rem; }
.lt-num i { flex: 1; display: grid; place-items: center; aspect-ratio: 3 / 4; max-width: 3.4rem; border-radius: 9px; background: #fff; border: 2px solid #E6B85C; font: 700 clamp(1.5rem, 4vw, 2.1rem)/1 var(--num); font-style: normal; color: #B3261E; box-shadow: inset 0 -3px 0 rgba(230,184,92,.35); }
.lt-num i.roll { animation: lt-roll .5s cubic-bezier(.2,.8,.3,1.2); }
@keyframes lt-roll { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.lt-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700; color: #7A4A00; }
.lt-foot em { font-style: normal; background: #B3261E; color: #FFE7A3; border-radius: 999px; padding: .15rem .6rem; font-family: var(--num); }
.lt-stamp { position: absolute; right: -10px; bottom: -16px; transform: rotate(12deg); background: var(--gold); color: var(--gold-ink); font: 800 .78rem var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: .5rem .8rem; border-radius: 10px; border: 2px dashed rgba(90,59,0,.4); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); }
.lt-ball { position: absolute; top: -22px; right: 18%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 700 .95rem var(--num); color: #4A2A00;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, #FFE7A3 30%, #F2B134 70%, #B77A0A 100%); box-shadow: 0 10px 18px -6px rgba(0,0,0,.45); animation: lt-bounce 3.2s ease-in-out infinite; }
@keyframes lt-bounce { 50% { transform: translateY(-10px) rotate(20deg); } }

/* Premios */
.lt-prizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.lt-prizes label { cursor: pointer; }
.lt-prizes input { position: absolute; opacity: 0; pointer-events: none; }
.lt-prizes span { display: block; height: 100%; padding: .55rem .7rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel-2); transition: border-color .15s, background .15s, transform .15s; }
.lt-prizes span b { display: block; font-size: .86rem; color: var(--ink); }
.lt-prizes span small { font: 700 .8rem var(--num); color: var(--mute); }
.lt-prizes label:hover span { border-color: #9CCFC0; }
.lt-prizes input:checked + span { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.lt-prizes input:checked + span small { color: var(--accent); }
.lt-prizes input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.lt-prizes .is-gordo span { background: linear-gradient(135deg, #FFF3D6, #FFE2A0); border-color: #E6B85C; }
.lt-prizes .is-gordo input:checked + span { border-color: #B77A0A; background: linear-gradient(135deg, #FFE7A3, #F2B134); }
.lt-prizes .is-gordo span small { color: var(--gold-ink); }
#otroWrap[hidden] { display: none; }

/* Resultado */
.lt .result .big.lt-win { background: linear-gradient(160deg, rgba(242,177,52,.28), rgba(255,255,255,.06)); border-color: rgba(242,177,52,.55); }
.lt .result .big.lt-win .value { text-shadow: 0 2px 28px rgba(242,177,52,.55); }
.lt-split { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); margin: .9rem 0 .5rem; }
.lt-split i { display: block; height: 100%; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.lt-split .s-tu { background: linear-gradient(90deg, #5EE0B8, #10B981); }
.lt-split .s-exento { background: repeating-linear-gradient(45deg, #5EE0B8 0 6px, #34C79A 6px 12px); }
.lt-split .s-hac { background: linear-gradient(90deg, #F2B134, #F97362); }
.lt-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: #CFE9E0; }
.lt-legend span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--c); }

.lt-table td.neto { color: var(--accent); font-weight: 700; }
.lt-table td.hac { color: var(--danger); }
.lt-table tr.gordo td { background: var(--gold-soft); }

@media (max-width: 820px) {
  .lt-top { grid-template-columns: 1fr; }
  .lt-ticket { max-width: 420px; margin: .6rem auto 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lt::after, .lt-ticket, .lt-ball, .lt-num i.roll { animation: none; }
}