/* ARCHIVO: estilos.css · tema espacial compartido por las pantallas del celular */
:root{--fondo:#070A17;--panel:#0F1530;--cian:#5CE1E6;--naranja:#FF7A2F;--texto:#E8ECFF;--suave:#B4BEE3;--tenue:#7C88B2}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:'Space Grotesk',system-ui,sans-serif;color:var(--texto);background-color:var(--fondo);
background-image:radial-gradient(1px 1px at 24px 36px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 90px,#cfe8ff,transparent),radial-gradient(1px 1px at 200px 180px,#fff,transparent),radial-gradient(1px 1px at 310px 60px,#ffd9b8,transparent),radial-gradient(1.5px 1.5px at 70px 230px,#fff,transparent),radial-gradient(1px 1px at 260px 270px,#cfe8ff,transparent);background-size:340px 300px}
a{color:inherit;text-decoration:none}
.pantalla{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.contenido{flex:1;padding:24px;display:flex;flex-direction:column;justify-content:center}
.mono{font-family:'Space Mono',monospace}
.etiqueta{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--suave)}
h1{margin:0;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.02}
.campo{margin-top:8px;width:100%;height:68px;border:1.5px solid rgba(92,225,230,.5);border-radius:16px;background:var(--panel);color:var(--cian);text-align:center;font-family:'Space Mono',monospace;font-size:26px;font-weight:700;padding:0 12px}
.campo:focus{outline:3px solid rgba(92,225,230,.45);outline-offset:2px}
.campo::placeholder{color:var(--tenue);font-weight:400}
.boton{margin-top:24px;width:100%;height:56px;border:0;border-radius:14px;background:var(--naranja);color:var(--fondo);font:700 18px 'Space Grotesk',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.boton:disabled,.boton[aria-disabled="true"]{background:#2A3258;color:var(--tenue);cursor:not-allowed}
.boton-borde{background:transparent;border:1.5px solid var(--cian);color:var(--cian)}
.error{margin-top:14px;min-height:22px;color:#FF9A9A;font-size:15px;text-align:center}
.cuenta{font-family:'Space Mono',monospace;font-size:54px;font-weight:700;color:var(--cian);letter-spacing:.04em;text-shadow:0 0 18px rgba(92,225,230,.5)}
.puntos{display:flex;gap:6px}
.punto{width:12px;height:12px;border-radius:50%;border:2px solid var(--cian)}
.punto.lleno{background:var(--cian)}
.barra{height:72px;border-top:1px solid rgba(140,170,255,.2);display:flex;background:rgba(7,10,23,.9);position:sticky;bottom:0}
.barra a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9AA6CF;font-size:12px;font-weight:700}
.barra a.activa{color:var(--cian)}
/* Cupón */
.cupon{border-radius:24px;color:var(--fondo);overflow:hidden;animation:aparece .5s ease-out}
.cupon .cab{padding:16px 22px;font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.1em;font-size:14px}
.cupon .corte{position:relative;height:0;margin:0 18px;border-top:3px dashed rgba(7,10,23,.45)}
.cupon .corte::before,.cupon .corte::after{content:"";position:absolute;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--fondo)}
.cupon .corte::before{left:-32px}.cupon .corte::after{right:-32px}
.cupon .cuerpo{padding:24px 22px 26px}
.cupon .texto{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.02em;word-wrap:break-word}
.cupon .pie{margin-top:16px;font-family:'Space Mono',monospace;font-size:13px;opacity:.75}
.cita{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(7,10,23,.12);border:1.5px dashed rgba(7,10,23,.45);font-size:19px;font-weight:500}
.boton-oscuro{margin-top:14px;width:100%;height:50px;border:0;border-radius:12px;background:var(--fondo);color:var(--texto);font:700 16px 'Space Grotesk',sans-serif;cursor:pointer}
@keyframes aparece{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes parp{0%,49%{opacity:1}50%,100%{opacity:.15}}
.parp{animation:parp 1.2s linear infinite}.parp2{animation:parp 1.2s linear infinite;animation-delay:.6s}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* Lista (ranking / mis papelitos) */
.fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);margin-top:8px}
.fila .barrita{flex:none;width:6px;align-self:stretch;border-radius:3px}