/* El marco de las tarjetas del acceso: entrar, verificar el 2FA, configurarlo y
   recuperar el autenticador. Un solo sitio para las cuatro (Rubén, 2026-10-12: «ni en
   PC ni en móvil scroll de la página; scroll dentro de la tarjeta, sin que se vea la
   barra; y la pantalla del 2FA a la misma altura que la de entrar, sin saltos»).
   · La página mide la pantalla y no se desplaza nunca.
   · La tarjeta mide lo mismo y está en el mismo sitio en las cuatro: alto fijo o, si
     la pantalla no da, todo el alto libre. Lo que no cabe se desplaza DENTRO de ella.
   · El orbe, igual en las cuatro: al pasar de entrar al 2FA no se mueve ni cambia.
   Lo de dentro (campos, botones, textos) sigue en cada plantilla, salvo el tamaño en
   escritorio, que se decide abajo. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.auth-wrap {
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  /* El alto es un mínimo: con el botón de Google, los enlaces de abajo quedaban detrás de un scroll sin barra
     y nadie veía «¿Olvidaste la contraseña?». Solo se desplaza si no cabe en la pantalla. */
  width: 100%; min-height: min(var(--acceso-alto), 100%); max-height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--c-surface); border: 1px solid rgba(20,30,45,.08);
}
.auth-card::-webkit-scrollbar { display: none; }
/* Lo de dentro no se aplasta: se desplaza. */
.auth-card > * { flex-shrink: 0; }
.auth-logo { display: block; border-radius: 16px; margin: 0 auto 12px; }

/* Escritorio: tarjeta pequeña (Rubén, 2026-10-12: «en escritorio el card de login está
   muy grande, tiene que ser más pequeño»). Lo de dentro lleva `.auth-card` delante
   para pesar más que la regla de cada plantilla: el tamaño en escritorio es este. */
@media (min-width: 481px) {
  :root { --acceso-alto: 440px; }
  .auth-card {
    max-width: 380px; padding: 28px 26px; border-radius: 20px;
    box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--c-azul) 40%, transparent);
  }
  .auth-card .auth-logo { width: 44px; height: 44px; margin-bottom: 10px; }
  .auth-card .auth-letras { height: 13px; margin-bottom: 20px; }
  .auth-card .auth-field { margin-bottom: 12px; }
  .auth-card .auth-field input { padding: 10px 14px; }
  .auth-card .auth-btn { padding: 11px; }
  .auth-card .auth-sub { margin-bottom: 16px; }
  .auth-card .auth-foot, .auth-card .auth-footer { padding-top: 14px; }
  .auth-card .auth-foot { gap: 8px; }
}

@media (max-width: 480px) {
  :root { --acceso-alto: 560px; }
  /* Arriba y no centrada: con el teclado o en pantallas bajas, el sitio de la tarjeta
     no depende de lo que mida. El hueco de arriba deja sitio a «Volver» (solo en
     entrar, pero las cuatro lo guardan para estar a la misma altura); el de abajo
     cabe la sombra entera. */
  .auth-wrap {
    align-items: flex-start;
    padding: calc(env(safe-area-inset-top) + 76px) 16px calc(32px + env(safe-area-inset-bottom));
  }
  .auth-card {
    padding: 30px 24px; border-radius: 16px;
    box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--c-azul) 38%, transparent);
  }
  .auth-logo { margin-top: 2px; width: 59px; height: 59px; }  /* +5 % (56→59) */
}

/* ── Lo de dentro de la tarjeta, para las pantallas que heredan `auth/_acceso.html` (recuperar la
   contraseña, 2026-10-17). Es lo mismo que llevan entrar y el 2FA en su plantilla: las letras, el
   título, el texto, los campos, el botón azul y el pie. Con `:where(body.acceso)` delante: no
   tocan a esas y pesan menos que el tamaño de escritorio de arriba (la tarjeta mide igual que la de entrar). */
body.acceso { margin: 0; font-family: 'Manrope', system-ui, sans-serif; background: var(--c-surface2); }
body.acceso *, body.acceso *::before, body.acceso *::after { box-sizing: border-box; }
:where(body.acceso) .auth-letras { display: block; height: 16px; margin: 0 auto 30px; }
:where(body.acceso) .auth-title { font-size: var(--t2, 19px); font-weight: 800; color: var(--c-text); text-align: center; margin: 0 0 8px; }
:where(body.acceso) .auth-sub { font-size: var(--t3, 16px); line-height: 1.5; color: var(--c-text); text-align: center; margin: 0 0 18px; }
:where(body.acceso) .auth-nota { font-size: var(--t4, 13px); line-height: 1.5; color: var(--c-text2); text-align: center; margin: 12px 0 0; }
:where(body.acceso) .auth-aviso { font-size: var(--t3, 16px); line-height: 1.5; font-weight: 600; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px;
  background: var(--c-azul-soft); color: var(--c-azul-tx); }
:where(body.acceso) .auth-aviso--ok, :where(body.acceso) .auth-aviso--success { background: var(--c-menta-soft); color: var(--c-menta-tx); }
:where(body.acceso) .auth-aviso--error { background: var(--c-rose-soft); color: var(--c-rose-tx); }
:where(body.acceso) .auth-field { margin-bottom: 15px; }
:where(body.acceso) .auth-field label { display: block; font-size: var(--t4, 13px); font-weight: 600; color: var(--c-text2); margin-bottom: 6px; }
:where(body.acceso) .auth-field input { width: 100%; padding: 13px 14px; background: var(--c-surface); border: 1px solid rgba(20,30,45,.10);
  border-radius: 12px; font-size: var(--t3, 16px); font-family: inherit; color: var(--c-text); transition: border-color .12s; }
:where(body.acceso) .auth-field input::placeholder { color: var(--c-text3); }
:where(body.acceso) .auth-field input:focus { outline: none; border-color: var(--c-azul); }
:where(body.acceso) .auth-errores { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--t4, 13px); font-weight: 600; color: var(--c-rose-tx); }
:where(body.acceso) .auth-btn { display: block; width: 100%; padding: 14px; background: var(--g-azul); color: #fff; border: 0; border-radius: 12px;
  font-size: var(--t3, 16px); font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 6px; text-align: center; text-decoration: none; }
:where(body.acceso) .auth-nota + .auth-btn { margin-top: 20px; }
:where(body.acceso) .auth-footer { text-align: center; font-size: var(--t4, 13px); color: var(--c-text2); margin-top: auto; padding-top: 18px; }
:where(body.acceso) .auth-footer a { color: var(--c-text); font-weight: 600; text-decoration: none; }
:where(body.acceso) .auth-footer a:hover { text-decoration: underline; }