/* ==========================================================================
   AutoDeb - Correcciones responsive para paginas publicas y de autenticacion
   --------------------------------------------------------------------------
   Se carga al final en _LandingLayout.cshtml.

   Las hojas de landing ya contemplan el ANCHO (breakpoints 1024/768/480),
   pero no el ALTO. En portatiles de 1366x768 el area util ronda los 620-650px
   y el min-height de 620px de `.auth-brand-panel` mas el relleno de
   `.auth-stage` suman ~750px, de modo que el formulario queda cortado y obliga a
   desplazarse. Aqui se agrega esa dimension mas algunas guardas de desborde.
   ========================================================================== */

/* ==========================================================================
   1. Guardas generales de desborde horizontal
   ========================================================================== */

.landing-body {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  .landing-body {
    overflow-x: clip;
  }
}

/* Contenido sin espacios (correos, tokens, URLs) no debe estirar el layout */
.landing-body .auth-form-panel,
.landing-body .auth-result-panel,
.landing-body .auth-validation,
.landing-body .landing-info-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Las notificaciones no deben salirse en pantallas muy angostas */
.landing-body .toast {
  min-width: min(300px, calc(100vw - 2 * var(--sp-6)));
  max-width: calc(100vw - 2 * var(--sp-6));
}

/* ==========================================================================
   2. Alto real del viewport
   `100vh` en moviles incluye la barra de direcciones y recorta el contenido.
   ========================================================================== */

@supports (height: 100dvh) {
  .auth-stage {
    min-height: 100dvh;
  }
}

/* ==========================================================================
   3. Pantallas de poca altura (portatiles)
   ========================================================================== */

/* 1440x900, 1366x768 con barra de marcadores, ventanas no maximizadas */
@media (min-width: 1025px) and (max-height: 900px) {
  .auth-stage {
    padding-block: clamp(1.25rem, 3vh, 2.5rem);
  }

  .auth-brand-panel {
    min-height: 520px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }

  .auth-form-panel {
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }

  .auth-form-header {
    margin-bottom: var(--sp-6);
  }

  .auth-form {
    gap: var(--sp-4);
  }
}

/* 1366x768 tipico: hay que comprimir de verdad */
@media (min-width: 1025px) and (max-height: 790px) {
  .auth-stage {
    padding-block: clamp(1rem, 2.5vh, 1.75rem);
  }

  .auth-brand-panel {
    min-height: 430px;
  }

  .auth-brand-copy h1 {
    font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  }

  .auth-brand-copy p,
  .auth-form-header p {
    font-size: .92rem;
  }

  .auth-form-header {
    margin-bottom: var(--sp-5);
  }

  .auth-form-header h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  }

  .auth-floating.form-floating > .form-control {
    min-height: 52px;
    padding: 1.35rem 1rem .45rem;
  }

  .auth-floating.form-floating > label {
    padding: .85rem 1rem;
  }

  .auth-submit {
    min-height: 46px;
  }

  .auth-signal-grid {
    display: none;
  }

  .auth-result-panel {
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }

  .auth-result-icon {
    width: 56px;
    height: 56px;
  }
}

/* Ventanas muy bajas o movil apaisado: se deja fluir el scroll natural */
@media (max-height: 680px) {
  .auth-stage {
    min-height: 0;
    place-items: start center;
    padding-block: 1.25rem;
  }

  .auth-brand-panel {
    min-height: 0;
  }

  .auth-signal-grid {
    display: none;
  }
}

/* Movil apaisado: el panel de marca ocupa demasiado, se oculta la ilustracion */
@media (max-width: 1024px) and (max-height: 560px) {
  .auth-brand-panel {
    min-height: 0;
    padding-block: var(--sp-4);
  }

  .auth-brand-panel::after {
    display: none;
  }

  .auth-brand-copy h1 {
    font-size: 1.25rem;
  }

  .auth-brand-copy p {
    display: none;
  }
}

/* ==========================================================================
   4. Rango intermedio 1025-1180px
   La columna del formulario tiene min 360px y la de marca minmax(0,1fr):
   el panel de marca queda demasiado estrecho antes de llegar al corte de
   1024px. Se adelanta el apilado.
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1180px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }

  .auth-brand-panel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
  }
}