/* Layout de login, recuperar contraseña, activar cuenta y elegir/cambiar perfil. Solo grid/gap/ancho/posición. */
@layer modules{
  /* los <p> de estas páginas (subtítulo, avisos, ayudas) no llevan margen: el espacio lo da el gap del contenedor */
  .pub-page p{margin:0}
  /* avisos (mensajes de Django) arriba: estas páginas no tienen barra inferior */
  .auth-toasts{top:var(--sp-4);bottom:auto;align-items:flex-end}
  /* "Información del sistema" / "¿Qué es un perfil?": lista con detalle plegable; recorta las esquinas del detalle */
  .auth-info{overflow:hidden}
  .auth-info__detail{display:grid;gap:var(--sp-3)}
  .auth-info__detail[hidden]{display:none}
  /* fila de perfil: radio | icono | nombre y descripción (en S la lista apila las celdas; aquí siguen en una fila) */
  .auth-profile{grid-template-columns:auto auto minmax(0,1fr)}
  .auth-profile>*{grid-column:auto;grid-row:auto;justify-self:auto}
  /* acciones de la pantalla (continuar / cerrar sesión): una pila de botones a todo el ancho */
  .auth-actions{display:grid;gap:var(--sp-3)}

  /* login: logo + rótulo centrados sobre la tarjeta */
  .auth-brand{flex-direction:column;gap:var(--sp-3)}
  .auth-brand img{width:10rem;height:auto}
  .auth-page{max-width:29rem}
  /* contraseña con el ojo dentro del campo */
  .auth-pass{position:relative}
  .auth-pass__input{padding-inline:var(--sp-4) calc(var(--tap) + var(--sp-2))}
  .auth-pass__toggle{position:absolute;top:0;bottom:0;right:var(--sp-1);margin-block:auto}
  .auth-brand p{margin:0}
  .auth-signup{width:fit-content;margin-inline:auto}
  .auth-forgot{justify-self:end;align-self:flex-end}
}