/* Estilos compartidos por todas las páginas. Solo var(--…) de tokens.css: nada de #hex aquí. */
.wrap{max-width:960px;margin:0 auto;padding:0 1.1rem}
header.top{position:sticky;top:0;z-index:20;background:var(--superficie);border-bottom:1px solid var(--linea)}
header.top .wrap{display:flex;align-items:center;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--display);color:var(--tinta);text-decoration:none;margin-right:auto}
.brand img{border-radius:9px}
nav.links{display:flex;gap:1.4rem}
nav.links a{color:var(--tinta-2);text-decoration:none;font-weight:600;padding:.4rem 0}
nav.links a[aria-current]{color:var(--marca)}
.menu-btn{display:none;background:none;border:0;padding:.5rem;border-radius:10px;min-width:44px;min-height:44px}
.menu-btn:hover{background:var(--fondo)}
@media (max-width:640px){
  nav.links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--superficie);flex-direction:column;padding:5rem 1.4rem 1.4rem;transform:translateX(100%);transition:transform .25s ease;box-shadow:-12px 0 30px rgba(0,0,0,.12)}
  nav.links.open{transform:translateX(0)}
  nav.links a{font-size:1.1rem;padding:.7rem 0;border-bottom:1px solid var(--linea)}
  .menu-btn{display:block}
}
main.wrap{padding-top:1.6rem;padding-bottom:4rem;min-height:60dvh}
h1{font:800 var(--t-1)/1.08 var(--display);margin:0 0 .5rem;text-wrap:balance}
h2{font:800 var(--t-2)/1.15 var(--display);margin:2.2rem 0 .9rem}
h3{font:700 var(--t-3)/1.2 var(--display);margin:0 0 .4rem}
p{margin:0 0 .8rem;color:var(--tinta-2)}
a{color:var(--marca)}
code{word-break:break-all}
.hero{padding:2.4rem 0 1rem;text-align:center}
.hero p{font-size:1.15rem;max-width:36rem;margin-inline:auto}
.hero .actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.3rem;border-radius:999px;border:0;background:var(--marca);color:var(--sobre-marca);font:700 1rem var(--sans);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--marca-hover)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--tinta);border:1.5px solid var(--linea)}
.btn.ghost:hover{background:var(--fondo)}
.btn.chico{min-height:40px;padding:0 1rem;font-size:.9rem}
.btn.bloque{width:100%}
.btn.acento{background:var(--acento);color:var(--sobre-acento)}
.btn.peligro{background:var(--error);color:#fff}

/* Tarjetas y listas */
.card{display:block;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:1.2rem;box-shadow:var(--sombra);text-decoration:none;color:inherit}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:1.2rem 0}
.cards .card h3{margin:0 0 .3rem}
.cards .card>p{margin:0}
.cards .card>p+p{margin-top:.3rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:var(--marca-suave);color:var(--marca);font:700 .8rem var(--sans)}
.chip.ok{background:color-mix(in srgb,var(--ok) 14%,#fff);color:var(--ok)}
.chip.aviso{background:color-mix(in srgb,var(--aviso) 14%,#fff);color:var(--aviso)}
.barra{height:10px;border-radius:999px;background:var(--linea);overflow:hidden;margin:.5rem 0}
.barra i{display:block;height:100%;background:var(--acento)}

/* Formularios */
.campo{display:grid;gap:.35rem;margin-bottom:1rem}
.campo label{font-weight:700;font-size:.92rem}
.campo input,.campo select,.campo textarea{min-height:48px;padding:0 .9rem;border:1.5px solid var(--linea);border-radius:10px;background:var(--superficie);font:inherit;color:var(--tinta)}
.campo textarea{padding:.7rem .9rem;min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--marca)}
.campo small{color:var(--tinta-2);font-size:.82rem}
fieldset{border:0;padding:0;margin:0 0 1.2rem}
.radios{display:flex;gap:1rem;flex-wrap:wrap}
.radios label{display:flex;align-items:center;gap:.4rem;font-weight:600}
.aviso-corto{font-size:.85rem;color:var(--tinta-2);background:var(--fondo);border-radius:10px;padding:.7rem .9rem}
label.consentimiento{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--tinta-2);margin:.6rem 0}
label.consentimiento input{margin-top:.2rem;min-width:20px;min-height:20px}

/* Tablero de números */
.tablero{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.5rem;margin:1.2rem 0}
.numero{aspect-ratio:1;border-radius:12px;border:1.5px solid var(--linea);background:var(--superficie);display:flex;align-items:center;justify-content:center;font:700 1rem var(--sans);cursor:pointer;min-height:44px}
.numero.libre:hover{border-color:var(--marca)}
.numero.apartado{background:var(--marca-suave);color:var(--marca);border-color:transparent;cursor:default}
.numero.pagado{background:var(--ok);color:#fff;border-color:transparent;cursor:default}
.numero.ganador{background:var(--acento);color:var(--sobre-acento);border-color:transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 40%,transparent)}
.leyenda{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.85rem;color:var(--tinta-2);margin-bottom:.6rem}
.leyenda span{display:inline-flex;align-items:center;gap:.4rem}
.leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block}
.leyenda .li{background:var(--superficie);border:1.5px solid var(--linea)}
.leyenda .ap{background:var(--marca-suave)}
.leyenda .pa{background:var(--ok)}

/* Diálogos (patrón de encabezado fijo del mando) */
dialog{border:0;border-radius:var(--radio);padding:0;max-width:480px;width:calc(100% - 2.2rem);box-shadow:var(--sombra)}
dialog::backdrop{background:rgba(22,21,26,.45)}
.dlg-head{position:sticky;top:0;background:var(--superficie);display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.2rem;border-bottom:1px solid var(--linea)}
.dlg-head h3{margin:0}
.dlg-body{padding:1.2rem}
.dlg-cerrar{background:none;border:0;font-size:1.4rem;line-height:1;min-width:44px;min-height:44px;border-radius:10px;cursor:pointer}
.dlg-cerrar:hover{background:var(--fondo)}

/* Avisos y estados */
.error{color:var(--error);font-size:.9rem;min-height:1.3rem}
.exito{color:var(--ok);font-size:.9rem}
.vacio{text-align:center;padding:2.4rem 1rem;color:var(--tinta-2)}
.toasts{position:fixed;left:0;right:0;bottom:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:60;pointer-events:none}
.toast{background:var(--tinta);color:#fff;padding:.75rem 1.1rem;border-radius:999px;font-size:.9rem;box-shadow:var(--sombra);max-width:90vw}

/* Compartir / viral */
.compartir{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.compartir.centro{justify-content:center}
.card-ganador{max-width:420px;margin:0 auto 1.4rem}
.crea-la-tuya{margin-top:2.6rem;padding:1.6rem;text-align:center;background:var(--marca-suave);border-radius:var(--radio)}
.crea-la-tuya h2{margin-top:0}
.demo-cinta{background:var(--acento);color:var(--sobre-acento);text-align:center;font-weight:700;font-size:.88rem;padding:.5rem 1rem}

/* Sesión del organizador */
.sesion{display:flex;align-items:center;gap:.7rem;background:var(--fondo);border-radius:12px;padding:.8rem 1rem;margin-bottom:1.2rem}
.sesion .acciones{margin-left:auto;display:flex;gap:.6rem}
.llave{font:700 1.1rem/1.4 ui-monospace,monospace;letter-spacing:.03em;background:var(--fondo);border:1px dashed var(--linea);border-radius:10px;padding:.8rem 1rem;text-align:center}
.llave-input{font-family:ui-monospace,monospace;text-transform:uppercase}
.ml-chico{margin-left:.5rem}
.linea-flex{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem}
.linea-flex-chica{display:flex;gap:.6rem}

.pie{border-top:1px solid var(--linea);margin-top:3rem;padding:2rem 0}
.pie .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:var(--tinta-2);font-size:.88rem}
.pie nav{display:flex;gap:1rem}
.pie a{color:var(--tinta-2)}

table.rondas{width:100%;border-collapse:collapse;margin:1rem 0}
table.rondas th,table.rondas td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--linea);font-size:.92rem}
table.rondas tr.mi-ronda{background:var(--marca-suave)}

/* Utilidades — la CSP (style-src 'self', sin unsafe-inline) bloquea CUALQUIER style="" en línea,
   también los que pone JS vía .style.*, así que hasta los ajustes de un solo valor van aquí. */
.m0{margin:0}
.mt0{margin-top:0}
.mt-chico{margin-top:.6rem}
.mt-grande{margin-top:2rem}
.centro{text-align:center}
.centrado{margin-inline:auto}
.hero-compacto{padding-top:.5rem}
.romper-todo{word-break:break-all}
.sin-borde{border:none}
.fila-botones{display:flex;gap:.6rem;flex-wrap:wrap}
.fila-botones.centro{justify-content:center}
.max-220{max-width:220px}
.max-280{max-width:280px}
.max-420{max-width:420px}
.max-520{max-width:520px}
.max-640{max-width:640px}
.foto-premio{max-width:280px;border-radius:var(--radio);margin-bottom:1rem;display:block}
.foto-premio.chica{max-width:220px;border-radius:10px;margin-bottom:.7rem}
.tarjeta-resultado{background:var(--marca-suave);border:none}
.tarjeta-resultado.ok{background:color-mix(in srgb,var(--ok) 10%,#fff)}
.tarjeta-resultado.mal{background:color-mix(in srgb,var(--error) 10%,#fff)}
/* Barra de progreso: 21 anchos fijos (de 5 en 5) en vez de un style="width:" calculado — el mismo
   resultado visual, sin que la CSP lo bloquee. Ver Rifas.pct() en lib.js. */
.barra i.p0{width:0%}.barra i.p5{width:5%}.barra i.p10{width:10%}.barra i.p15{width:15%}
.barra i.p20{width:20%}.barra i.p25{width:25%}.barra i.p30{width:30%}.barra i.p35{width:35%}
.barra i.p40{width:40%}.barra i.p45{width:45%}.barra i.p50{width:50%}.barra i.p55{width:55%}
.barra i.p60{width:60%}.barra i.p65{width:65%}.barra i.p70{width:70%}.barra i.p75{width:75%}
.barra i.p80{width:80%}.barra i.p85{width:85%}.barra i.p90{width:90%}.barra i.p95{width:95%}
.barra i.p100{width:100%}