/* =========================================================================
   DANNA ERP — Páginas de acceso con la identidad nueva («El mostrador a plena luz»)
   login.html, reset-password.html y verify-email.html. Va después de style.css, marca.css y
   app-marina.css. Solo pinta: Turnstile, el botón de Google, el registro con invitación, el
   OTP, los mensajes, las redirecciones y hosts.js viven en sus .js y no dependen de nada aquí.
   ========================================================================= */

/* Fondo niebla, sin la malla de puntos de La Etiqueta. */
body.acceso { background: var(--m-bg-soft); }
/* Que la página crezca con la tarjeta: con `h-full` + centrado flex, «Crear cuenta» (más alto que
   una laptop de 768 px) quedaba cortado ARRIBA y no había forma de llegar al título. Con alto
   mínimo en vez de fijo, el cuerpo crece y se desplaza; centrado si cabe. */
html:has(body.acceso) { height: auto; min-height: 100%; }
body.acceso { height: auto; min-height: 100vh; min-height: 100dvh; padding-top: 72px; padding-bottom: 24px; }
body.acceso.bg-dotgrid { background-image: none; }

/* La tarjeta se lee como la ventana del landing: 22 px, borde fino y la sombra larga marina. */
.acceso-card {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-dialog);
  box-shadow: var(--m-shadow-lg) !important;   /* gana al style="box-shadow: var(--shadow-lg)" en línea */
  padding: clamp(24px, 6vw, 36px);
}
.acceso-card h1 { font-weight: 800; letter-spacing: -.025em; color: var(--m-ink); }

/* Campos y botón principal a la altura del landing (46 y 48 px): cómodos al dedo en el celular. */
.acceso-card .field { min-height: 46px; border-radius: 11px; font-size: 15px; }
.acceso-card .btn-primary { min-height: 48px; border-radius: var(--m-radius-sm); font-size: 15px; }
.acceso-card .btn-secondary { min-height: 48px; border-radius: var(--m-radius-sm); }
.acceso-card .link-accent { color: var(--m-blue-text); font-weight: 600; }
.acceso-card .hr { background: var(--m-line); }
.acceso-card .alert { border-radius: var(--m-radius-xs); }

/* «Volver» y el interruptor de tema, arriba: como el encabezado del landing. */
.acceso-volver { color: var(--m-ink); font-weight: 600; }
.acceso-volver .t-muted { color: var(--m-ink-2); }
.acceso-pie a { color: var(--m-faint); }
.acceso-pie a:hover { color: var(--m-ink); }

/* El spinner de los botones y de la verificación, en el azul de la marca. */
.acceso-spin { color: var(--m-blue); }

@media (prefers-reduced-motion: reduce) {
  .animate-rise { animation: none; }
}