:root { --bg: #0b1220; --fg: #f5f7fa; --verde: #16a34a; --rojo: #dc2626; --ambar: #d97706; --azul: #2563eb; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
main { min-height: 100vh; max-width: 480px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
h1 { font-size: 1.3rem; margin: 0 0 20px; }
label { display: block; margin-bottom: 8px; opacity: .8; }
/* 16 px o más en los campos: evita el zoom automático en iPhone */
input { width: 100%; font-size: 2rem; padding: 14px; border-radius: 12px; border: 2px solid #334155;
  background: #111b2e; color: var(--fg); text-align: center; letter-spacing: .15em; text-transform: uppercase; }
#codigo { font-size: 1.1rem; letter-spacing: normal; text-transform: none; }
button { width: 100%; margin-top: 14px; font-size: 1.3rem; padding: 16px; border: 0; border-radius: 12px;
  background: var(--azul); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; }
.enlace { background: none; color: #94a3b8; font-size: .95rem; text-decoration: underline; margin-top: 28px; }
.aviso { color: #fbbf24; min-height: 1.2em; }
#cargando { text-align: center; }
.spinner { width: 54px; height: 54px; margin: 28px auto 10px; border: 6px solid #334155;
  border-top-color: var(--azul); border-radius: 50%; animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.resultado { margin-top: 24px; padding: 32px 18px; border-radius: 18px; text-align: center; }
.resultado.verde { background: var(--verde); }
.resultado.rojo { background: var(--rojo); animation: parpadeo 1s ease-in-out 3; }
.resultado.ambar { background: var(--ambar); }
.res-titulo { font-size: 2.1rem; font-weight: 800; line-height: 1.15; }
.res-detalle { margin-top: 12px; font-size: 1.1rem; }
@keyframes parpadeo { 50% { filter: brightness(1.4); } }