/* login.css — diseño del inicio de sesión (vistas/modulos/login.php).

   Sigue a la landing: papel azulado de fondo, Lexend para el texto y Noto Sans
   Black, la letra de "Birretón" en el logo, para los títulos (fuentes.css).
   La forma base del login (scroll propio, tarjeta, botones) sigue en tema.css
   y los colores configurables del
   encabezado y de "Entrar"/"Registrarme" en el <style> de plantilla.php: aquí
   no se pinta ninguno de esos colores, solo la forma.

   Una sola columna en todos los tamaños: solo la tarjeta, sin logo encima
   (se quitó a pedido del usuario). Del encabezado de color se asoma Birretón
   (vistas/js/loginAvatar.js), apoyado en el borde del formulario. */

.login-wrapper {
  --lg-tinta:       #0f1b4d;
  --lg-tinta-suave: #47527a;
  --lg-papel:       #f2f4f9;
  --lg-linea:       #dde2ee;
  --lg-marca:   "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --lg-texto:   "Lexend", "Segoe UI", system-ui, sans-serif;

  /* dvh: en el celular, vh incluye la barra de direcciones y el contenedor
     medía de más (mismo criterio que .landing-page). */
  height: 100dvh;
  background: var(--lg-papel);
  font-family: var(--lg-texto);
  color: var(--lg-tinta);
}

/* Columna de la tarjeta. margin:auto centra cuando cabe y deja hacer scroll
   cuando no (mismo truco que tenía la tarjeta sola en tema.css). */
.login-columna {
  margin: auto;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0.5rem;
}

.login-wrapper .login-card {
  /* Bootstrap 5.3 toma de aquí la esquina de campos, grupos y alertas: con
     esto el grupo icono + campo + ojo se redondea solo en sus extremos. */
  --bs-border-radius: 12px;
  margin: 0;
  border: 1px solid var(--lg-linea);
  border-radius: 22px;
  box-shadow: 0 24px 50px -28px rgba(15, 27, 77, 0.5);
}

/* ---------- Encabezado: de aquí se asoma Birretón ----------
   El avatar es azul marino y sobre el color del encabezado se perdía. Por eso
   el formulario sube en un arco blanco (el ::after, medio círculo apoyado en
   el borde del cuerpo blanco) y Birretón se asoma desde ahí, con los
   ojos ya sobre el formulario que mira. El encabezado va por encima del
   cuerpo (z-index) para que el arco y el avatar no queden tapados. */
.login-wrapper .login-card {
  --lg-arco: 196px;          /* diámetro del arco */
  --lg-avatar: 120px;        /* ancho del avatar */
}
@media (min-width: 576px) {
  .login-wrapper .login-card { --lg-arco: 224px; --lg-avatar: 142px; }
}
.login-card .login-panel {
  position: relative;
  z-index: 2;
  height: calc(var(--lg-arco) / 2 + 0.9rem);
  padding: 0;
}
.login-card .login-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--lg-arco);
  height: calc(var(--lg-arco) / 2);
  transform: translateX(-50%);
  /* Solo la mitad de arriba: la de abajo taparía el título del paso. */
  border-radius: var(--lg-arco) var(--lg-arco) 0 0;
  background: #fff;
}
.login-card .card-body {
  position: relative;
  z-index: 1;
  /* Deja sitio a la mitad de abajo del avatar, que cae dentro del cuerpo. */
  padding-top: calc(var(--lg-avatar) / 2 + 0.75rem) !important;
}

.login-avatar {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--lg-avatar) / -2);
  width: var(--lg-avatar);
  aspect-ratio: 880 / 870;   /* el viewBox del avatar */
  transform: translateX(-50%);
}
.login-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pupilas y párpados que mueve loginAvatar.js. */
.login-avatar .ab-pupil,
.login-avatar .ab-shine,
.login-avatar .ab-shine-sm { pointer-events: none; }
.login-avatar svg g:has(> .ab-pupil) {
  transition: transform 0.18s ease-out, opacity 0.15s ease;
}
/* Ojo cerrado: la curva "‿" del mismo azul que la pupila. */
.login-avatar .lg-ojo-cerrado {
  fill: none;
  stroke: var(--ab-navy-darkest, #011c55);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.login-avatar .lg-parpado {
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.22s ease;
}

/* ---------- Títulos de cada paso ---------- */
.login-card .login-titulo {
  margin: 0 0 1.25rem;
  font-family: var(--lg-marca);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  color: var(--lg-tinta);
}

/* ---------- Campos ----------
   Doble clase para ganarle a ".login-card .form-label" de tema.css, que las
   ponía en mayúsculas chiquitas y grises. */
.login-wrapper .login-card .form-label {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lg-tinta);
}

.login-wrapper .login-card .form-control {
  padding: 0.62rem 0.85rem;
  border-color: var(--lg-linea);
  font-size: 1rem;
  color: var(--lg-tinta);
}
.login-wrapper .login-card .form-control::placeholder { color: #8b93ad; }

.login-wrapper .login-card .input-group-text {
  min-width: 2.75rem;
  justify-content: center;
  background: var(--lg-papel);
  border-color: var(--lg-linea);
  color: var(--lg-tinta-suave);
}

/* Regla del campo, bajo el campo. */
.login-wrapper .login-card .form-text {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--lg-tinta-suave);
}

/* "Ver contraseña": del mismo gris suave que los iconos de la izquierda. */
.login-wrapper .login-card .toggle-password {
  border-color: var(--lg-linea);
  color: var(--lg-tinta-suave);
  background: #fff;
}
.login-wrapper .login-card .toggle-password:hover {
  background: var(--lg-papel);
  color: var(--lg-tinta);
}

/* ---------- Botones ----------
   Píldora, como los botones de entrada de la landing. El color de "Entrar" y
   "Registrarme" sigue viniendo de "Colores del sistema". */
.login-wrapper .login-card .btn-login-principal,
.login-wrapper .login-card .btn-login-registro,
.login-wrapper .login-card #btnEntrarInvitado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-family: var(--lg-texto);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* Iconos al lado del texto, no al margen: el conjunto queda centrado. */
.login-wrapper .login-card .btn-login-principal > i,
.login-wrapper .login-card .btn-login-registro > i,
.login-wrapper .login-card #btnEntrarInvitado > i {
  margin-left: 0 !important;
  margin-right: 0.45rem;
}

/* "Visitar como invitado": un pase de visitante. Fondo dorado suave y borde
   punteado (como un boleto de entrada temporal), con el icono en un círculo
   del dorado de la borla del birrete. Se distingue de "Entrar" (índigo) y de
   Google (azul) sin competir con ellos. Al pasar el cursor el borde se vuelve
   continuo, como si el pase quedara validado. */
.login-wrapper .login-card #btnEntrarInvitado {
  gap: 0.6rem;
  padding-block: 0.55rem;
  border: 1.5px dashed #d9a21b;
  background: #fff8e6;
  color: var(--lg-tinta);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.login-wrapper .login-card #btnEntrarInvitado > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.95rem;
  height: 1.95rem;
  margin-right: 0;
  border-radius: 50%;
  background: #f4c443;
  color: var(--lg-tinta);
  font-size: 0.85rem;
}
.login-wrapper .login-card #btnEntrarInvitado:hover {
  border-style: solid;
  border-color: #e6ab1e;
  background: #fdefc4;
  color: var(--lg-tinta);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(185, 138, 16, 0.6);
}
.login-wrapper .login-card #btnEntrarInvitado:focus-visible {
  outline: 3px solid var(--lg-tinta);
  outline-offset: 2px;
  background: #fdefc4;
  color: var(--lg-tinta);
}
.login-wrapper .login-card #btnEntrarInvitado:active { transform: translateY(0); }

/* Separador "o" entre el correo y Google: una línea fina con la letra al
   centro, en vez de "— o —" escrito. */
.login-separador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.85rem;
  color: var(--lg-tinta-suave);
}
.login-separador::before,
.login-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lg-linea);
}

/* Botón de Google: el iframe trae su propio alto (44px en "large"); se le
   reserva para que el formulario no salte mientras Google lo dibuja. */
.login-wrapper .login-google { min-height: 44px; }

/* "Volver al inicio" (al final de "Inicia sesión" y del registro): rojo
   translúcido, para que se lea como salida y no compita con las formas de
   entrar. La letra es roja oscura (#b91c1c) para que se lea sobre el fondo
   rojo suave. Triple clase para ganarle a ".login-card .btn-login-volver"
   de tema.css. */
.login-wrapper .login-card .btn-login-volver {
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-family: var(--lg-texto);
}
.login-wrapper .login-card .btn-login-volver:hover,
.login-wrapper .login-card .btn-login-volver:focus-visible {
  border-color: rgba(220, 38, 38, 0.6);
  background: rgba(220, 38, 38, 0.16);
  color: #991b1b;
}
.login-wrapper .login-card .btn-login-volver:focus-visible {
  outline: 3px solid rgba(220, 38, 38, 0.45);
  outline-offset: 2px;
}

/* "También puedes": une el botón de Google con "Visitar como invitado". */
.login-wrapper .login-tambien {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.88rem;
  color: var(--lg-tinta-suave);
}

/* Textos de apoyo. */
.login-wrapper .login-card .text-muted { color: var(--lg-tinta-suave) !important; }

/* Celulares bajos: arco y avatar más chicos para que "Entrar" quede a la
   vista sin desplazarse. */
@media (max-height: 700px) and (max-width: 575.98px) {
  .login-columna { padding-block: 0; }
  .login-wrapper .login-card { --lg-arco: 168px; --lg-avatar: 102px; }
  .login-wrapper .login-card .card-body { padding-bottom: 1.25rem !important; }
  .login-card .login-titulo { margin-bottom: 0.9rem; font-size: 1.25rem; }
  .login-wrapper .login-card #bloqueLogin .mb-3 { margin-bottom: 0.75rem !important; }
}

@media (min-width: 992px) {
  .login-columna { max-width: 460px; }
  .login-wrapper .login-card .card-body {
    padding-inline: 2.25rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-avatar svg g:has(> .ab-pupil),
  .login-avatar .lg-parpado,
  .login-avatar .lg-ojo-cerrado { transition: none; }
  .login-wrapper .login-card,
  .login-wrapper .login-card .btn { transition: none; }
}