/* WowCita · Entrar, crear cuenta, olvidé y restablecer contraseña · Módulo 13A */

.pagina-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--espacio-4);
  background:
    radial-gradient(90% 50% at 50% 0%, var(--rubor) 0%, transparent 70%),
    var(--porcelana);
}

.login { width: min(420px, 100%); }
.login--ancho { width: min(540px, 100%); }

.login__marca { text-align: center; margin-bottom: var(--espacio-5); }
.login__marca img { width: 56px; height: 56px; }
.login__marca h1 { font-size: var(--texto-hero); letter-spacing: -0.04em; margin: var(--espacio-2) 0 0; }
.login__marca p { margin: var(--espacio-1) 0 0; }

.login .tarjeta { display: flex; flex-direction: column; gap: var(--espacio-1); box-shadow: var(--sombra-flotante); border: none; }
.login .tarjeta h2 { font-size: var(--texto-xl); margin-bottom: var(--espacio-3); }
.login .casilla { margin-bottom: var(--espacio-3); }

/* Registro: ¿trabajas sola o tienes salón? */
.opciones-negocio { border: none; padding: 0; margin: 0 0 var(--espacio-4); min-width: 0; }
.opciones-negocio legend { font-weight: 600; padding: 0; margin-bottom: var(--espacio-2); }
.opciones-negocio .casilla { display: flex; padding: var(--espacio-1) 0; }

/* Verificar el correo (Módulo 14B): el código se ve grande y con espacio entre números */
.campo-codigo {
  font-family: var(--letra-titulos);
  font-size: var(--texto-xl);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
}
.login #boton-reenviar { margin-top: var(--espacio-2); }

/* Botón que se ve como un enlace (acciones secundarias dentro de un texto) */
.boton-enlace {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--frambuesa);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.boton-enlace:hover { color: var(--frambuesa-oscura); }

/* ==========================================================================
   Módulo 15D · Animación del logo al llegar desde la portada
   - En los navegadores que lo permiten (View Transitions entre páginas), el logo del encabezado de la
     portada "vuela" hasta aquí: las dos páginas le ponen el mismo nombre (logo-wowcita).
   - Después, en TODOS los navegadores: un pequeño rebote y un brillo de esmalte que cruza el logo.
   - Quien pidió "reducir movimiento" no ve nada de esto (ver base.css y la regla del final).
   ========================================================================== */
@view-transition { navigation: auto; }

.login__logo {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  view-transition-name: logo-wowcita;
  animation: logo-rebote 560ms var(--suave) 420ms both;
}
.login__logo img { display: block; }
.login__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.8) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: logo-brillo 900ms ease-out 700ms both;
  pointer-events: none;
}

@keyframes logo-rebote {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) rotate(-4deg); }
  70% { transform: scale(0.96) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes logo-brillo { to { transform: translateX(120%); } }

/* El vuelo del logo: un poco más lento que el cambio de página, con la misma curva suave de WowCita */
::view-transition-group(logo-wowcita) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Módulo 18A · Inicio de sesión con vitrina de fotos
   Celular: una franja de fotos arriba y el formulario debajo.
   Computador (desde 960 px): pantalla dividida; la vitrina a la izquierda y el formulario a la derecha.
   Lo memorable: los indicadores son uñas que se llenan de esmalte mientras se ve cada foto.
   ========================================================================== */
.pagina-login--vitrina { display: block; padding: 0; background: var(--porcelana); }

.acceso { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }

/* ---------- Vitrina ---------- */
.vitrina {
  position: relative;
  height: 32vh;
  min-height: 220px;
  max-height: 300px;
  overflow: hidden;
  background: var(--ciruela);
  border-radius: 0 0 var(--radio-ventana) var(--radio-ventana);
  color: #fff;
}

.vitrina__fotos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.vitrina__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--suave); }
.vitrina__foto--activa { opacity: 1; }
.vitrina__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
/* Un acercamiento muy lento mientras la foto está a la vista */
.vitrina__foto--activa img { animation: acercar 9s linear both; }
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Velo ciruela abajo: así el texto blanco se lee sobre cualquier foto */
.vitrina::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(42 23 48 / 0.05) 30%, rgb(42 23 48 / 0.78) 100%);
  pointer-events: none;
}

.vitrina__texto {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--espacio-4) var(--espacio-5) var(--espacio-6);
}
.vitrina__marca {
  margin: 0 0 var(--espacio-1);
  font-family: var(--letra-titulos);
  font-weight: 800;
  font-size: var(--texto-m);
  letter-spacing: -0.03em;
  opacity: 0.85;
}
.vitrina__frase {
  margin: 0 0 var(--espacio-4);
  max-width: 22ch;
  font-family: var(--letra-titulos);
  font-size: var(--texto-l);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.vitrina__frase--cambia { animation: frase 600ms var(--suave) both; }
@keyframes frase { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Las uñas indicadoras: el esmalte (span) sube de abajo hacia arriba mientras dura la foto */
.vitrina__unas { display: flex; gap: var(--espacio-2); }
.vitrina__una {
  position: relative;
  width: 18px;
  height: 24px;
  padding: 0;
  border: 1.5px solid rgb(255 255 255 / 0.75);
  border-radius: var(--forma-una);
  background: rgb(255 255 255 / 0.12);
  overflow: hidden;
  cursor: pointer;
}
.vitrina__una span { position: absolute; inset: 0; background: var(--frambuesa); transform: scaleY(0); transform-origin: bottom; }
.vitrina__una[aria-current="true"] span { animation: llenar var(--duracion-foto, 6s) linear both; }
.vitrina__una--vista span { transform: scaleY(1); } /* las anteriores quedan pintadas */
.vitrina--pausada .vitrina__una[aria-current="true"] span { animation-play-state: paused; }
@keyframes llenar { to { transform: scaleY(1); } }
.vitrina__una:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.vitrina__credito {
  position: absolute;
  z-index: 1;
  right: var(--espacio-4);
  top: var(--espacio-3); /* en el celular va arriba, para no montarse sobre las uñas */
  margin: 0;
  font-size: 0.7rem;
  text-shadow: 0 1px 2px rgb(42 23 48 / 0.6);
  color: rgb(255 255 255 / 0.7);
}

/* ---------- Formulario ---------- */
.pagina-login--vitrina .login {
  width: min(420px, 100%);
  margin: 0 auto;
  padding: var(--espacio-5) var(--espacio-4) var(--espacio-8);
}
.pagina-login--vitrina .login__marca { text-align: left; margin-bottom: var(--espacio-5); }
.pagina-login--vitrina .login__marca img { width: 48px; height: 48px; }
.pagina-login--vitrina .login__marca h1 { font-size: var(--texto-xxl); margin-top: var(--espacio-4); }
/* En esta versión el formulario va sobre el fondo, sin tarjeta: más limpio y con más aire */
.pagina-login--vitrina .login .tarjeta { padding: 0; background: none; box-shadow: none; gap: var(--espacio-2); }

.campo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-2); }
.campo__enlace { font-size: var(--texto-s); font-weight: 600; }

.login__registro { margin: var(--espacio-5) 0 0; padding-top: var(--espacio-5); border-top: 1px solid var(--borde); text-align: center; color: var(--lila-humo); }
.login__registro a { font-weight: 700; white-space: nowrap; }

/* Entrada del formulario: un solo momento, en secuencia */
.pagina-login--vitrina .login__marca > :not(.login__logo),
.pagina-login--vitrina .login form > * { animation: aparecer-acceso 600ms var(--suave) both; }
.pagina-login--vitrina .login form > :nth-child(n + 4) { animation-delay: 80ms; }
.pagina-login--vitrina .login form > :nth-child(n + 6) { animation-delay: 160ms; }
@keyframes aparecer-acceso { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .acceso { grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
  .vitrina {
    position: sticky;
    top: 0;
    height: calc(100dvh - 2 * var(--espacio-4));
    max-height: none;
    margin: var(--espacio-4) 0 var(--espacio-4) var(--espacio-4);
    border-radius: var(--radio-ventana);
  }
  .vitrina__texto { padding: var(--espacio-10); }
  .vitrina__marca { font-size: var(--texto-l); margin-bottom: var(--espacio-3); }
  .vitrina__frase { font-size: var(--texto-hero); max-width: 18ch; margin-bottom: var(--espacio-5); }
  .vitrina__una { width: 22px; height: 30px; }
  .vitrina__credito { top: auto; right: var(--espacio-6); bottom: var(--espacio-4); }
  .pagina-login--vitrina .login { align-self: center; padding: var(--espacio-10) var(--espacio-8); }
  .pagina-login--vitrina .login__marca h1 { font-size: var(--texto-hero); }
}

@media (prefers-reduced-motion: reduce) {
  .vitrina__foto { transition: none; }
}