:root{--fondo:#f2f4f1;--tarjeta:#fff;--texto:#16302a;--suave:#5f7068;--campo:#eef1ec;--accion:#2f5d3a;--accion-texto:#fff;--secundario:#e9eee7;--error:#9a3a34;--ok:#2f6b3f;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;font-size:16px;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){:root{--fondo:#0f1513;--tarjeta:#161e1b;--texto:#eef3ef;--suave:#a3b1aa;--campo:#202a26;--accion:#8fc79a;--accion-texto:#0f1513;--secundario:#222c28;--error:#f0a39d;--ok:#9ed6a9}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--fondo)}
main{width:100%;max-width:420px;background:var(--tarjeta);border-radius:28px;padding:36px 28px 24px;box-shadow:0 20px 60px rgba(22,48,42,.08)}
header{margin-bottom:32px}.brand{display:block;height:40px;width:auto}
h1{font-size:30px;line-height:1.12;letter-spacing:-.6px;margin:0 0 10px;font-weight:700}
.intro{color:var(--suave);line-height:1.55;margin:0 0 24px}
label{display:block;font-size:13px;font-weight:600;color:var(--suave);margin:0 0 8px}
input{width:100%;font:inherit;font-size:17px;padding:15px 16px;border:0;border-radius:14px;background:var(--campo);color:var(--texto);outline:none;transition:box-shadow .2s cubic-bezier(.45,.05,.25,1)}
input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accion) 35%,transparent)}
#codigo{font-size:26px;letter-spacing:10px;text-align:center;font-variant-numeric:tabular-nums}
button{font:inherit;font-weight:600;border:0;border-radius:14px;min-height:52px;width:100%;cursor:pointer;margin-top:12px;transition:transform .15s cubic-bezier(.45,.05,.25,1),opacity .2s}
button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:default}
.primary{background:var(--accion);color:var(--accion-texto);margin-top:16px}
.secondary{background:var(--secundario);color:var(--texto)}
.enlace{background:none;color:var(--accion);min-height:40px;width:auto;padding:0 4px;margin:8px 0 0}
.fila{display:flex;justify-content:space-between;gap:12px}
.nota{font-size:13px;color:var(--suave);line-height:1.5;margin:16px 0 0}
.icono{width:64px;height:64px;border-radius:20px;background:var(--secundario);color:var(--accion);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
#aviso{min-height:22px;margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--suave)}
#aviso.error{color:var(--error)}#aviso.ok{color:var(--ok)}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;font-size:13px}
footer a{color:var(--suave);text-decoration:none}footer a:hover{text-decoration:underline}
[hidden]{display:none!important}
.boton{display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;border-radius:14px;min-height:52px;margin-top:16px}