:root { --azul: #1f4e79; --gris: #5b6770; --borde: #d5dbe0; --fondo: #f3f5f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1c2227; background: var(--fondo); }
.tarjeta { width: 100%; max-width: 30rem; background: #fff; border: 1px solid var(--borde); border-radius: 12px;
           padding: 1.75rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.marca { margin: 0 0 1rem; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
h2 { margin: 0 0 .75rem; font-size: 1.35rem; }
label { display: block; margin: 0 0 1rem; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=password] { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem;
       border: 1px solid #b8c1c8; border-radius: 8px; font: inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #8ab4dc; outline-offset: 1px; }
button, .boton { display: inline-block; padding: .65rem 1.1rem; border: 0; border-radius: 8px; background: var(--azul);
       color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
a { color: var(--azul); }
.pie { margin: 1rem 0 0; font-size: .875rem; color: var(--gris); }
.mensaje { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 8px; background: #eaf2fa; }
.mensaje.error { background: #fdecea; color: #8a1c14; }
.mensaje.ok { background: #e8f5ea; color: #1d5a2a; }
.mensaje.aviso { background: #fff4de; color: #6d4a00; }
.lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0;
            border-bottom: 1px solid var(--borde); }
.lista small { color: var(--gris); word-break: break-all; }
.lista form { margin: 0; }
.qr { width: 14rem; max-width: 100%; margin: 1rem auto; }
.qr svg { display: block; width: 100%; height: auto; }
.secreto { display: block; padding: .5rem; background: var(--fondo); border-radius: 6px; word-break: break-all; }
.codigos { columns: 2; list-style: none; padding: 0; margin: 1rem 0; font-size: 1.05rem; }
.codigos li { margin-bottom: .35rem; }
.salir { margin-top: 1.25rem; }