@font-face { font-family: Inter; src: url(/fonts/inter-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root { --navy: #050c1d; --navy2: #0b1630; --cyan: #20aada; --blue: #0496ff; --ink: #0b1630; --muted: #5b6785; --line: #dfe5f0; --bg: #f4f7fb; --ok: #12a150; --warn: #d98e04; --bad: #d64545; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 Inter, system-ui, sans-serif; color: var(--ink); background: radial-gradient(ellipse at 70% 0%, #0f2a52 0%, var(--navy) 60%); min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caja { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 34px 30px 28px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.caja.ancha { width: min(560px, 100%); }
.logo { display: block; height: 44px; margin: 0 0 22px; }
h1 { font: 700 24px/1.2 Montserrat, Inter, sans-serif; margin: 0 0 6px; }
p.sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin: 14px 0 6px; }
input { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; color: var(--ink); }
input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(32, 170, 218, .2); }
input.codigo { letter-spacing: .4em; font-size: 20px; text-align: center; }
button { width: 100%; margin-top: 22px; font: 600 15px Inter, sans-serif; color: #fff; background: var(--blue); border: 0; border-radius: 10px; padding: 13px; cursor: pointer; }
button:hover { background: #0382e0; }
button[disabled] { opacity: .6; cursor: wait; }
.msg { min-height: 20px; margin: 14px 0 0; font-size: 14px; color: var(--bad); }
.msg.ok { color: var(--ok); }
.pie { margin-top: 20px; font-size: 12px; color: var(--muted); text-align: center; }
.qr { display: grid; place-items: center; margin: 12px 0; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }
code.secreto { display: block; text-align: center; font-size: 13px; background: var(--bg); padding: 8px; border-radius: 8px; word-break: break-all; }
ol.pasos { padding-left: 18px; color: var(--muted); font-size: 14px; }
ol.pasos li { margin: 4px 0; }
.oculto { display: none; }