:root{--marino:#00263A;--verde:#66C9BA;--cabecera:#07253a;--gris:#5b6472;--linea:#e2e6ea}
*{box-sizing:border-box}
body{margin:0;background:#f6f8f9;color:#0f172a;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{background:var(--cabecera);padding:14px 16px}
header img{height:26px;width:auto;display:block}
main{max-width:440px;margin:0 auto;padding:20px 16px 40px}
h1{font-size:20px;color:var(--marino);margin:4px 0 14px}
form{display:grid;gap:12px;margin:14px 0}
label{display:grid;gap:4px;font-size:14px;color:var(--gris)}
input{font:inherit;padding:11px 12px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:#0f172a}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
button,.boton{display:inline-block;background:var(--marino);color:#fff;border:0;border-radius:10px;padding:12px 16px;font:inherit;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}
.mal{background:#fdecea;color:#8a1c12;border-radius:10px;padding:10px 12px}
.nota{font-size:13px;color:var(--gris)}
.clave{font:600 18px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.06em;background:#fff;border:1px dashed var(--linea);border-radius:10px;padding:12px;word-break:break-all;user-select:all}
.codigos{font:600 16px/1.9 ui-monospace,Menlo,monospace;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:12px 12px 12px 34px}