/* login.css — pantalla de acceso inmersiva (login/registro).
   El fondo a sangre decorado (blobs + destellos) vive ahora en el módulo compartido
   `shared/styles/fondo-inmersivo.css`; aquí solo quedan la tarjeta y sus detalles.
   Reutiliza los tokens y clases de design.css (.card, .codigo-input, .field-label…). */

/* ---- Tarjeta ------------------------------------------------------------ */
.card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  box-shadow: var(--shadow-warm), var(--shadow-card);
  text-align: left;
  /* Sin la barra de acento superior de `.card` (design.css): sobre el fondo inmersivo
     la tarjeta queda más limpia. Solo afecta a login/registro, que son las únicas que
     cargan esta hoja. */
  border-top: none;
}

/* Cabecera dentro de la tarjeta: solo el logo */
.lg-head {
  text-align: center;
  margin-bottom: 1.6rem;
}
.lg-head img {
  width: 150px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ---- Enlace "¿Olvidaste tu contraseña?" -------------------------------- */
.lg-reset-row {
  text-align: right;
  margin-top: 10px;
}
.lg-reset {
  font-size: 0.82rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-magical);
}
.lg-reset:hover {
  color: hsl(var(--primary-glow));
  text-decoration: underline;
}

/* ---- Enlace de cambio de modo ("Crear cuenta" / "Entrar") --------------
   Sin clase quedaba con el azul por defecto del navegador, que desentona con la paleta. */
.lg-alt {
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
  transition: var(--transition-magical);
}
.lg-alt:hover {
  color: hsl(var(--primary-glow));
  text-decoration: underline;
}

/* ---- Aviso en verde (cuenta creada, correo por confirmar, reseteo enviado) ----
   Va a dos líneas: titular + detalle (lo compone `mostrarOk`). El salto lo pone un <br>
   desde el JS; aquí solo se le da aire con el interlineado. */
.lg-ok {
  margin-top: 14px;
  padding: 0.7rem 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: hsl(var(--leaf));
  background: hsl(var(--leaf-soft));
  border-radius: var(--radius-card);
  text-align: center;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 560px) {
  .lg-head img { width: 128px; }
  .card { padding: 1.9rem 1.4rem; }
}