/* Registro con código de correo y recuperar contraseña. Archivo propio: no modifica styles.css.
   Usa los tokens y componentes del panel (.field, .stack, .button, .form-error). Sin estilos en línea (CSP). */

.auth-links{display:grid;gap:8px;justify-items:start;margin:10px 0 0}
.auth-links .button{justify-self:stretch}
.auth-alt{margin:12px 0 0;color:var(--muted);font-size:.84rem}
.auth-link{background:none;border:0;padding:10px 2px;min-height:44px;color:var(--brand);font:600 .86rem/1.2 inherit;cursor:pointer;border-radius:8px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.auth-link:hover{text-decoration-color:currentColor}
.auth-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-link.muted{color:var(--muted);font-weight:500}

.auth-flow{padding:26px 0 0}
.auth-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 6px 8px 0;min-height:44px;color:var(--muted);font:600 .84rem/1 inherit;cursor:pointer;border-radius:8px}
.auth-back:hover{color:var(--brand)}
.auth-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-step{display:grid;gap:16px}
@media (prefers-reduced-motion:no-preference){.auth-step{animation:auth-in .22s ease-out}}
@keyframes auth-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-head h2{font-size:1.55rem;line-height:1.15;letter-spacing:-.03em;margin:8px 0 8px;outline:none}
.auth-head p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.auth-head p strong{color:var(--text);overflow-wrap:anywhere}
.auth-stepper{display:flex;gap:6px;margin:0 0 4px}
.auth-stepper i{display:block;height:4px;flex:1;border-radius:4px;background:var(--line)}
.auth-stepper i.on{background:var(--brand)}

.auth-hint{margin:2px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.auth-field-error{margin:2px 0 0;color:var(--danger);font-size:.8rem;line-height:1.5}
.field.invalid input{border-color:var(--danger)}

.auth-pass{position:relative;display:block}
.auth-pass input{padding-right:84px}
.auth-pass-toggle{position:absolute;top:0;right:0;height:100%;min-width:76px;padding:0 14px;background:none;border:0;border-radius:0 var(--r-md) var(--r-md) 0;color:var(--brand);font:600 .8rem/1 inherit;cursor:pointer}
.auth-pass-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Código de 6 dígitos: un solo campo (el pegado y el autocompletado de SMS/correo funcionan nativos). */
.auth-code{width:100%;text-align:center;font:700 clamp(1.7rem,9vw,2.2rem)/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.38em;padding:14px 10px 14px calc(10px + .38em)!important;min-height:64px!important;color:var(--brand);background:var(--brand-50)!important;border-color:var(--line-strong);font-variant-numeric:tabular-nums}
.auth-code::placeholder{color:#a9c5bd;letter-spacing:.38em}

.auth-resend{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}
.auth-resend .auth-link{padding:8px 2px}
.auth-resend .auth-link[disabled]{color:var(--faint);cursor:default;text-decoration:none}
.auth-count{font-variant-numeric:tabular-nums}

.auth-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important}
.auth-ok{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600);font-size:.86rem;line-height:1.55}