/* RifApp · estilo Rifas Kit (cargar DESPUÉS de styles.css). Skin por defecto: naranja del kit */
:root{--bg:#f6f5f1;--card:#fff;--ink:#1d1d1b;--mut:#6b6a64;--pri:#d9480f;--on:#fff;--ok:#2b8a3e;--line:#e3e1d9;--sold:#d8d6cd}
@media(prefers-color-scheme:dark){:root{--bg:#161615;--card:#222220;--ink:#f1efe8;--mut:#a09e94;--pri:#ff8a4c;--on:#161615;--ok:#69db7c;--line:#363632;--sold:#3a3a36}}
/* Skins */
:root[data-skin=rosa]{--pri:#e0245e;--on:#fff}:root[data-skin=verde]{--pri:#2b8a3e;--on:#fff}
:root[data-skin=azul]{--pri:#1971c2;--on:#fff}:root[data-skin=morado]{--pri:#7048e8;--on:#fff}:root[data-skin=rojo]{--pri:#e03131;--on:#fff}
@media(prefers-color-scheme:dark){
:root[data-skin=rosa]{--pri:#ff5c8a;--on:#1a0610}:root[data-skin=verde]{--pri:#69db7c;--on:#0b1a0f}
:root[data-skin=azul]{--pri:#74c0fc;--on:#07121e}:root[data-skin=morado]{--pri:#b197fc;--on:#120b26}:root[data-skin=rojo]{--pri:#ff8787;--on:#1a0606}}
/* Forma del kit: tipografía del sistema, bordes finos, sin punteados ni muescas */
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h2,h3{font-family:inherit;font-weight:700;letter-spacing:0}
h2{font-size:20px}
header{border-bottom:1px solid var(--line)}
header b{font:800 24px system-ui,-apple-system,"Segoe UI",sans-serif}
header button,.chip,.ghost,input,select,textarea{border-width:1px}
nav{border-top:1px solid var(--line)}
.card{border-radius:14px;box-shadow:none;border:1px solid var(--line)}
.body{border-top:1px solid var(--line)}.body:before,.body:after{display:none}
.card .img{background:var(--bg)}
.box{border:1px solid var(--line);box-shadow:none;border-radius:14px}
.btn{border-radius:10px;font-weight:600}
input,select,textarea{background:var(--bg);border-radius:10px}
.nums{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.n{font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;height:auto;padding:10px 0;border-width:1px;background:var(--bg)}
.n.taken{background:var(--sold);color:var(--mut)}
.ev{border-bottom:1px solid var(--line)}
/* Boletos */
.win{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--pri);color:var(--on);font-weight:700}
.ticket{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
/* Bombo */
.ov{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.65)}
.ov .box{width:100%;max-width:420px;text-align:center}
.bombo{width:100%;max-width:380px;display:block;margin:0 auto}
.big{font-size:44px;font-weight:800;color:var(--pri);min-height:56px;line-height:1.2}
/* Cuadrícula de compra más clara */
.nums .n{font-size:16px;padding:13px 0}
.lg{display:inline-block;margin-right:10px}.lg i{display:inline-block;width:16px;height:16px;padding:0;vertical-align:middle;margin-right:4px;border-radius:4px;cursor:default}
/* Zona para subir fotos */
.pick{position:relative;display:grid;place-items:center;gap:6px;padding:18px;border:2px dashed var(--line);border-radius:12px;background:var(--bg);color:var(--ink);text-align:center;cursor:pointer;font-size:16px}
.pick .pt{font-weight:700}.pick small{color:var(--mut);font-size:13px}
.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pick img{max-width:100%;max-height:220px;border-radius:8px}
.pick.ok{border-style:solid;border-color:var(--ok)}
/* Compra por pasos */
.steps{display:flex;gap:6px;margin:12px 0}
.steps .s{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--mut);font-weight:600}
.steps .s b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--ink);font-size:12px}
.steps .s.on{border-color:var(--pri);color:var(--ink)}.steps .s.on b{background:var(--pri);color:var(--on)}.steps .s.done b{background:var(--ok);color:#fff}
.paybox{text-align:center;border:2px solid var(--pri)}
.amt{font-size:40px;font-weight:800;color:var(--pri);line-height:1.1}
.tks{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.sbar{position:fixed;left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;background:var(--ink);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.sbar .btn{width:auto;margin:0;padding:10px 18px}
.more{margin:12px 0}.more summary{cursor:pointer;font-weight:600;padding:8px 0}
.hero0{height:140px;display:grid;place-items:center;font-size:56px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.n{transition:transform .12s}.n.sel{transform:scale(1.1)}
@media(prefers-reduced-motion:reduce){.n{transition:none}.n.sel{transform:none}}
/* Letras y botones más grandes, pantallas más vivas */
body{font-size:17px}h2{font-size:26px}
.ttl{font-size:28px;font-weight:800;line-height:1.15;margin:.4em 0 .2em}
.hero0{height:190px;font-size:76px;border:0;color:#fff;background:var(--pri) linear-gradient(135deg,transparent,rgba(0,0,0,.28))}
.hero{max-height:260px;margin-top:8px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.pill{padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:15px}
.pill.pr{background:var(--pri);color:var(--on);border-color:var(--pri)}
.bar{height:12px}
.nums{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.nums .n{font-size:19px;padding:15px 0}
.chip.big{font-size:16px;padding:10px 18px}
.sbar{font-size:17px}.sbar .btn{font-size:17px;padding:12px 20px}
.amt{font-size:52px}
.okbig{text-align:center}.okbig .bigico{font-size:48px;line-height:1.2}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pri)}100%{box-shadow:0 0 0 12px transparent}}
.sbar .btn.cta{animation:pulse 2s infinite}
@media(prefers-reduced-motion:reduce){.sbar .btn.cta{animation:none}}
/* Ventana flotante para elegir números */
.mdl{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.sheet{width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;background:var(--bg);border-radius:20px 20px 0 0;animation:up .22s ease-out}
@media(min-width:700px){.mdl{align-items:center}.sheet{border-radius:20px;max-height:86vh}}
.sh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px 16px 8px}
.ttl2{font-size:22px}
.sb{overflow:auto;padding:0 16px 8px;flex:1}
.sf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
@media(min-width:700px){.sf{border-radius:0 0 20px 20px}}
.sf .btn{width:auto;margin:0;padding:12px 22px;font-size:17px}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media(prefers-reduced-motion:reduce){.sheet{animation:none}}
/* Sorteo en vivo */
.ov.dk{background:rgba(0,0,0,.92)}
.live{display:inline-block;font-weight:800;color:#ff4d4d;margin-bottom:6px;animation:p 1.4s infinite}
@media(prefers-reduced-motion:reduce){.live{animation:none}}
/* Confeti */
.cf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.cf i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media(prefers-reduced-motion:reduce){.cf{display:none}}