/* Pantallas públicas de autenticación (login, olvidé mi contraseña, generación de
   contraseña...): sin sidebar/nav, card centrada en su propio shell. */

/* El alto va en dvh (viewport chico del celular, ya descontada la barra de direcciones) con
   100vh de fallback para navegadores viejos: con 100vh a secas el shell mide MÁS que lo que
   se ve, así que la card queda centrada respecto de un alto que no existe y en el celular se
   ve corrida hacia abajo. */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2rem 1.75rem;
}

.auth-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--woker-violet-tint);
  color: var(--woker-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-card-icon .ico { width: 22px; height: 22px; }

/* Logo de la organización: marco cuadrado que da la forma, con el logo adentro en
   contain — así entra cualquier proporción sin recortarse ni deformarse. El fondo
   sale de un token, de modo que el marco acompaña al tema sin reglas de dark propias.
   Los isologos se cargan como PNG sin fondo. */
.auth-card-logo {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: var(--woker-surface-2);
  border: 1px solid var(--woker-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  flex-shrink: 0;
}

.auth-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.auth-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--woker-ink);
  margin: 0;
}

/* Párrafo introductorio de pantallas con una consigna (ej. olvidé mi contraseña). */
.auth-intro {
  color: var(--woker-muted);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}

/* Nota chica dentro del form (ej. ayuda sobre el nombre de usuario). Atenuada por
   tamaño, no por color: es texto que se lee, así que va en --woker-muted (7,6:1 en
   claro). Con --woker-subtle quedaba en 2,6:1, por debajo del mínimo de lectura. */
.auth-hint {
  color: var(--woker-muted);
  font-size: .8rem;
  margin-bottom: .75rem;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  padding: .65rem 1rem;
  font-size: .95rem;
  margin-top: .25rem;
}

/* Link centrado al pie de la card: sirve tanto para "Olvidé mi contraseña" como
   para "Volver Atrás" u otros links de cierre de flujo — una sola clase genérica. */
.auth-link {
  text-align: center;
  margin: 1.25rem 0 0;
}

.auth-link a {
  color: var(--woker-violet);
  font-size: .85rem;
  font-weight: 500;
}

.auth-link a:hover {
  color: var(--woker-violet-hover);
  text-decoration: underline;
}

.auth-legal {
  margin: 1.25rem 0 0;
  font-size: .8rem;
  color: var(--woker-muted);
  text-align: center;
}

/* El badge de reCAPTCHA es fixed abajo a la derecha y en pantallas chicas se monta sobre
   la línea legal, que queda centrada pero tapada a medias. Se reserva el alto del badge
   (60px + los 14px que se separa del borde) ARRIBA Y ABAJO en las pantallas que lo tienen:
   reservándolo sólo abajo el contenido quedaba 3rem por encima del centro, que es
   justamente el descentrado que se ve en celular. De md para arriba el badge nunca llega
   al texto centrado, así que no se reserva nada. */
@media (max-width: 767.98px) {
  body:has(.grecaptcha-badge) .auth-shell { padding-block: 4.75rem; }
}

@media (max-width: 575.98px) {
  .auth-card { padding: 1.5rem 1.25rem; }
}