/*
  Marco de las páginas públicas de auth-kit (login, forgot, reset) dentro del sitio.
  Se carga DESPUÉS de /assets/auth.css y de site.css. No toca el kit: sólo sobrescribe sus tokens --u-*
  (el kit toma de ahí todos sus colores y medidas) y acomoda la tarjeta bajo la cabecera del sitio.
  Origen de las partes: src/_frame/{head,header,footer}.html → api/auth-bootstrap.php, clave "frame".
*/
body.auth-framed{
  --u-ink:var(--noche); --u-ink-2:var(--noche); --u-muted:var(--texto-2); --u-muted-2:var(--texto-2);
  --u-accent:var(--medio); --u-accent-ink:var(--medio); --u-accent-soft:#E4EAF1;
  --u-bg:var(--blanco); --u-surface:var(--blanco); --u-border:var(--linea); --u-border-2:#C9CED3;
  --u-font:var(--sans); --u-r:var(--radius); --u-r-lg:var(--radius-lg); --u-r-pill:var(--radius);
  --u-shadow:none;
  --u-err:#B42318;   /* rojo de error del kit (#DC2626) da 4,2:1 sobre su fondo rosado; este da 5,8:1 (AA) */
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:100vh;min-height:100dvh;padding:0;
  font-size:var(--t-base);background:var(--blanco);color:var(--noche);
}
body.auth-framed .auth-card{margin:clamp(2rem,7vw,4.5rem) auto;padding:var(--s-6);width:min(26rem,calc(100% - 2 * var(--s-4)));max-width:none;border-radius:var(--radius-lg)}
body.auth-framed .auth-card h1{font-family:var(--serif);font-weight:400;font-size:var(--t-lg);letter-spacing:0;line-height:var(--lh-snug)}
body.auth-framed .auth-form label{font-size:var(--t-sm)}
body.auth-framed .auth-form input{font-size:var(--t-base)}
body.auth-framed .auth-form button{padding:.8rem 1.15rem;font-size:var(--t-sm);letter-spacing:.02em}
body.auth-framed .auth-form button:hover{background:var(--medio)}
body.auth-framed .auth-form .auth-secondary{background:transparent;color:var(--noche);border:1px solid var(--noche)}
body.auth-framed .auth-form .auth-secondary:hover{background:var(--marfil)}
body.auth-framed :focus-visible{outline:3px solid var(--ring);outline-offset:2px}
body.auth-framed .site-footer{margin-top:auto}
/* táctil y lectura (iOS no hace zoom si el campo mide >= 16 px: aquí 17 px) */
body.auth-framed .auth-form input{min-height:var(--tap);border-color:var(--texto-2);border-width:1.5px}   /* borde 7,7:1: el del kit (#C9CED3) daba 1,6:1 y el campo no se distinguía */
body.auth-framed .auth-form input:hover{border-color:var(--noche)}
body.auth-framed .auth-form input::placeholder{color:var(--texto-2);opacity:1}
body.auth-framed .auth-form button{min-height:var(--tap)}
body.auth-framed .auth-form input:focus-visible{outline:3px solid var(--ring);outline-offset:2px;box-shadow:none}
body.auth-framed .auth-error{color:var(--u-err)}
body.auth-framed .auth-form button:active{background:var(--medio)}
@media (forced-colors:active){body.auth-framed .auth-form input{border-color:ButtonText}body.auth-framed .auth-form button{border:2px solid ButtonText}}
body.auth-framed .small{font-size:var(--t-sm)}
body.auth-framed .auth-card{overflow-wrap:anywhere}   /* con texto al 200 % en pantalla angosta, «Authentication» no desborda la tarjeta */
@media (max-width:30rem){body.auth-framed .auth-card{padding:var(--s-5) var(--s-4)}}