/* Inicio de sesión (LOGIN-PREMIUM-02 y 03, 17 de octubre de 2026). Composición general (AGENTE 1).
   Escritorio: la página es un fondo índigo → azul claro y el contenido (.lgn) una superficie redondeada separada del
   borde, con dos zonas: marca a la izquierda (56 %) y formulario a la derecha (44 %), como la referencia aprobada. 901–1100 px: 50 / 50.
   Bajo 900 px: sin marco, a sangre; la marca pasa a una cabecera compacta y el formulario va debajo.
   Lo de cada zona va en login-marca.css (marca), login-showcase.css (captura) y login-form.css (tarjeta y campos).
   Sin animaciones ni transiciones aquí (login-motion.css). */

/* Fondo de la página: índigo profundo arriba a la izquierda que se abre a un azul lavanda claro. Va en el armazón de
   invitado (.app.guest.split solo existe en esta página) para cubrir todo el alto. */
.app.guest.split {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(232, 236, 252, .95) 0%, rgba(232, 236, 252, 0) 70%),
    radial-gradient(60% 55% at 0% 0%, rgba(25, 36, 58, .95) 0%, rgba(25, 36, 58, 0) 75%),
    linear-gradient(125deg, #19243a 0%, #3730a3 32%, #8e9fe6 64%, #dfe5fa 100%);
  background-color: #dfe5fa;
}
.app.guest.split main { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }

.lgn-stage {
  /* Referencia 1448×1086: ≈ 40 px a los lados y ≈ 40 px arriba y abajo. */
  --lgn-gap: clamp(1rem, min(2.76vw, 3.7vh), 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--lgn-gap);
}

.lgn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  box-sizing: border-box;
  width: 100%;
  max-width: 104rem;
  min-height: calc(100vh - 2 * var(--lgn-gap));
  min-height: calc(100dvh - 2 * var(--lgn-gap));
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: #f4f6fd;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 2px 6px rgba(13, 22, 66, .08),
    0 30px 80px -24px rgba(13, 22, 66, .45);
}

/* Zona del formulario: casi blanca con un velo índigo muy leve y dos curvas claras, como seda, detrás de la tarjeta. */
.lgn .lgn-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  /* Referencia: tarjeta centrada con ≈ 40 px libres a cada lado. */
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 2.8vw, 2.75rem);
  background:
    radial-gradient(60% 40% at 8% 6%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 70% at 100% 0%, rgba(67, 56, 202, .08) 0%, rgba(67, 56, 202, 0) 70%),
    radial-gradient(80% 50% at 100% 100%, rgba(129, 140, 248, .12) 0%, rgba(129, 140, 248, 0) 70%),
    radial-gradient(80% 60% at 0% 100%, rgba(13, 148, 136, .05) 0%, rgba(13, 148, 136, 0) 70%),
    linear-gradient(170deg, #f9faff 0%, #f2f4fc 55%, #eceffb 100%);
}
.lgn .lgn-panel::before,
.lgn .lgn-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
/* Curva grande: un claro blanco que entra desde arriba a la derecha, con su filo de luz. */
.lgn .lgn-panel::before {
  width: 165%;
  aspect-ratio: 1;
  top: -92%;
  right: -62%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .92) 66%, rgba(255, 255, 255, .5) 90%, rgba(255, 255, 255, 0) 100%);
  box-shadow: -1px 2px 0 rgba(255, 255, 255, .95), -18px 28px 60px -22px rgba(67, 56, 202, .14);
}
/* Curva baja: un trazo fino lavanda que cruza abajo a la izquierda. */
.lgn .lgn-panel::after {
  width: 150%;
  aspect-ratio: 1;
  bottom: -104%;
  left: -40%;
  border: 1px solid rgba(255, 255, 255, .95);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55) 78%, rgba(236, 238, 255, .4) 96%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 -1px 0 rgba(67, 56, 202, .07), 0 -24px 60px -30px rgba(99, 102, 241, .18);
}
.lgn .lgn-panel > * { position: relative; }
/* Ancho de la tarjeta (agente 1): referencia ≈ 523 px en 1448 de ancho. El estilo interior es de login-form.css. */
.lgn .lgn-panel .lgn-card { width: 100%; max-width: clamp(24rem, 36vw, 33rem); }

@media (max-width: 1100px) {
  .lgn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lgn .lgn-panel .lgn-card { max-width: 26.5rem; }
}

/* Tableta vertical y teléfono: sin marco, una columna, la marca como cabecera. */
@media (max-width: 900px) {
  .lgn-stage { display: block; padding: 0; }
  .lgn {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .lgn .lgn-panel { justify-content: flex-start; padding: clamp(1.75rem, 5vh, 3.5rem) 1.5rem 3rem; }
  /* Sin filos marcados en una columna: solo un claro suave arriba a la derecha. */
  .lgn .lgn-panel::before { width: 120%; top: -60%; right: -50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); box-shadow: none; }
  .lgn .lgn-panel::after { display: none; }
}
@media (max-width: 480px) {
  .lgn .lgn-panel { padding: 1.25rem 1rem 2rem; }
}

/* Pantallas bajas de escritorio: menos aire alrededor del marco y en la zona del formulario. */
@media (min-width: 901px) and (max-height: 760px) {
  .lgn-stage { --lgn-gap: clamp(.75rem, 1.6vw, 1.25rem); }
  .lgn .lgn-panel { padding-block: 1.25rem; }
}

/* Pantallas muy bajas (1366 × 600): la tarjeta se compacta para que el pie y las esquinas del marco quepan sin
   desplazar (QA, coordinador). Solo aire: la letra y el alto de los campos no cambian. */
@media (min-width: 901px) and (max-height: 660px) {
  .lgn .lgn-panel { padding-block: .75rem; }
  .lgn .lgn-panel .lgn-card { padding: 1.6rem 2.5rem 1.4rem; }
  .lgn .lgn-panel .lgn-head { margin-bottom: 1rem; }
  .lgn .lgn-panel .lgn-title { font-size: 1.9rem; }
  .lgn .lgn-panel .lgn-form { gap: .85rem; }
  .lgn .lgn-panel .lgn-foot { margin-top: 1rem; padding-top: .9rem; }
}