:root{
  --bg:#0f0d17;--panel:#1b1826;--panel2:#24202f;--borde:#352f45;--texto:#f3f0fa;--suave:#a8a1ba;
  --acento:#b98cff;--acento2:#7c4dff;--oro:#ffcb45;--ok:#3ddc97;--mal:#ff6b81;--aviso:#ffb347;
  --radio:16px;--sombra:0 8px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--texto);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}
img{max-width:100%}
.contenedor{max-width:980px;margin:0 auto;padding:0 16px}
header.top{position:sticky;top:0;z-index:20;background:rgba(15,13,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
header.top .fila{display:flex;align-items:center;gap:12px;min-height:60px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);font-weight:800;font-size:1.15rem}
.marca svg{width:34px;height:34px}
.marca small{display:block;font-weight:500;font-size:.75rem;color:var(--suave)}
.espacio{flex:1}
nav.menu{display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;scrollbar-width:none}
nav.menu a{white-space:nowrap;text-decoration:none;color:var(--suave);padding:7px 12px;border-radius:999px;border:1px solid var(--borde);font-size:.9rem}
nav.menu a.activo,nav.menu a:hover{color:var(--texto);background:var(--panel2);border-color:var(--acento2)}
main{padding:18px 0 40px}
h1{font-size:1.6rem;margin:.2em 0 .5em}
h2{font-size:1.2rem;margin:1.4em 0 .6em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--acento2),#a35bff);min-height:46px}
.btn.sec{background:var(--panel2);color:var(--acento);border:1px solid var(--borde)}
.btn.ok{background:linear-gradient(135deg,#1fa774,#3ddc97);color:#06281b}
.btn.wa{background:#25d366;color:#05300f}
.btn.mal{background:#3a1d26;color:var(--mal);border:1px solid #5b2a37}
.btn.chico{padding:7px 12px;min-height:34px;font-size:.88rem}
.btn.ancho{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin-bottom:14px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:14px}
.kpi b{display:block;font-size:1.5rem;line-height:1.1}
.kpi span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.kpi.verde{background:#12261e;border-color:#1f4d3a}
.kpi.oro b{color:var(--oro)}
.suave{color:var(--suave)}
.chico{font-size:.85rem}
.aviso{border-radius:12px;padding:12px 14px;margin:10px 0;background:#2b2236;border:1px solid var(--borde)}
.aviso.success{background:#12261e;border-color:#1f4d3a;color:#bff5dd}
.aviso.error{background:#2d1219;border-color:#5b2a37;color:#ffc4cf}
.aviso.warning,.aviso.info{background:#2d2412;border-color:#5b4a2a;color:#ffe3b3}
.demo{background:#3a2a08;color:#ffd98a;text-align:center;font-size:.82rem;padding:6px 12px}
form p{margin:0 0 12px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
input,select,textarea{width:100%;background:#16131f;color:var(--texto);border:1px solid var(--borde);border-radius:12px;padding:12px;font-size:1rem}
input[type=checkbox]{width:auto;margin-right:8px;transform:scale(1.2)}
input:focus,select:focus{outline:2px solid var(--acento2);border-color:transparent}
.helptext{display:block;color:var(--suave);font-size:.8rem;margin-top:4px}
.errorlist{list-style:none;padding:0;margin:4px 0;color:var(--mal);font-size:.85rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:9px 8px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
th{color:var(--suave);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla{overflow-x:auto}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;background:var(--panel2);border:1px solid var(--borde)}
.chip.ok{color:var(--ok);border-color:#1f4d3a}.chip.mal{color:var(--mal);border-color:#5b2a37}.chip.oro{color:var(--oro);border-color:#5b4a2a}
.barra{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--acento2),var(--oro))}
.hero{padding:26px 0 8px;text-align:center}
.hero h1{font-size:2.1rem;line-height:1.1}
.hero p{color:var(--suave);max-width:560px;margin:0 auto 16px}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
@media(max-width:600px){.pasos{grid-template-columns:repeat(2,1fr)}}
.paso{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px;text-align:center}
.paso b{font-size:1.6rem;display:block}
.premios-tabla td:first-child{font-size:1.4rem;width:44px}
footer{border-top:1px solid var(--borde);padding:22px 0 40px;color:var(--suave);font-size:.82rem;text-align:center}
footer .r18{display:inline-block;border:2px solid var(--mal);color:var(--mal);border-radius:50%;width:34px;height:34px;line-height:30px;font-weight:800;margin-bottom:6px}
.copiar{display:flex;gap:8px}.copiar input{flex:1;font-size:.85rem}

/* ----- cartón ----- */
.carton-wrap{max-width:420px;margin:0 auto}
.carton{position:relative;border-radius:22px;padding:14px;background:linear-gradient(160deg,#3b2a7a,#1d1640 60%,#120e26);border:3px solid var(--oro);box-shadow:var(--sombra),inset 0 0 40px rgba(255,203,69,.15)}
.carton .cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.8rem;color:#e6dcff}
.carton .cab b{font-size:1.1rem;color:var(--oro);letter-spacing:.04em}
.zona{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:#f8f1dc;touch-action:none;user-select:none}
.zona .celdas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:8px}
.celda{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff8e6;border-radius:10px;border:1px solid #ecdcae;color:#5b4a2a;font-size:.7rem;font-weight:700}
.celda .e{font-size:2.4rem;line-height:1.1}
.celda.gana{background:#ffe27a;border-color:#e0a800;animation:latido 1s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.06)}}
.zona canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.resultado{margin-top:14px;border-radius:14px;padding:14px;text-align:center;background:#221a3d;border:1px solid #4a3a85}
.resultado.gano{background:linear-gradient(135deg,#3a2c05,#5b4508);border-color:var(--oro)}
.resultado h3{margin:.1em 0;font-size:1.4rem}
.codigo{font:700 1.4rem/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;background:#120e26;border:1px dashed var(--oro);border-radius:10px;padding:10px 14px;display:inline-block;margin:8px 0;color:var(--oro)}
.lista-cartones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mini{display:block;text-decoration:none;color:var(--texto);border-radius:14px;padding:12px;background:linear-gradient(160deg,#3b2a7a,#1d1640);border:2px solid #6b55c8;text-align:center}
.mini.raspado{background:var(--panel);border-color:var(--borde);opacity:.85}
.mini.gano{border-color:var(--oro)}
.mini b{display:block;font-size:1.1rem}
.elegir{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.elegir label{margin:0;display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid var(--borde);border-radius:12px;padding:10px 4px;cursor:pointer;background:var(--panel2);font-weight:800}
.elegir label small{font-weight:500;color:var(--suave);font-size:.65rem}
.elegir input{display:none}
.elegir input:checked+span{color:var(--oro)}
.elegir label:has(input:checked){border-color:var(--oro);background:#2e2610}
#niveles td{padding:6px 4px}#niveles input,#niveles select{padding:8px;font-size:.92rem}

/* ----- aviso de instalación (PWA) ----- */
.instalar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:12px;
  background:var(--panel2);border:1px solid var(--acento2);border-radius:18px;padding:12px 12px 12px 14px;box-shadow:var(--sombra);
  transform:translateY(140%);transition:transform .25s ease;max-width:520px;margin:0 auto}
.instalar.visible{transform:none}
.instalar img{border-radius:12px;flex:none}
.instalar-txt{flex:1;font-size:.88rem;line-height:1.35}
.instalar-txt > b{display:block;font-size:1rem}
[hidden]{display:none!important}
.instalar-x{background:none;border:0;color:var(--suave);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 6px;align-self:flex-start}
.ico-compartir{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;color:var(--acento)}
header.top{padding-top:env(safe-area-inset-top)}