/* ===== AMPARA — Fix Responsive Global ===== */
/* Este archivo va enlazado en TODAS las plantillas (login, register, default, user-page, etc.) */

/* 1. Evita scroll horizontal por el .row sin container */
.main-wrap .row {
  margin-left: 0;
  margin-right: 0;
}
.main-wrap .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
body {
  overflow-x: hidden;
}

/* 2. vh-100 fijo rompe el layout cuando el contenido es más alto que la pantalla.
   IMPORTANTE: Bootstrap define .vh-100 { height: 100vh !important; }
   Sin !important aquí, esta regla NUNCA se aplicaba (Bootstrap siempre ganaba). */
.col-xl-5.vh-100,
.col-xl-7.vh-100 {
  height: auto !important;
  min-height: 100vh !important;
}

/* overflow-hidden en el mismo div que vh-100 recortaba el contenido
   que no cabía en la pantalla. Lo liberamos. */
.col-xl-7.overflow-hidden {
  overflow: visible !important;
}

/* 3. Modales (login/register) SIEMPRE con scroll propio, nunca cortados */
.modal-body {
  max-height: 90vh;
  overflow-y: auto;
}

/* 4. Card de login/registro: ancho controlado + padding lateral en mobile */
.login-card {
  width: 100%;
  max-width: 420px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 5. Evita el auto-zoom de iOS Safari al tocar inputs con font-size < 16px
   (font-xsss / font-xss del template son menores a 16px) */
@media (max-width: 767.98px) {
  .login-card input.style2-input,
  .modal input.style2-input {
    font-size: 16px !important;
  }
}

/* 6. Ajustes específicos para pantallas pequeñas (celulares) */
@media (max-width: 575.98px) {
  .login-card h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
  .ampara-tagline {
    font-size: 12px;
  }
  .col-xl-7.vh-100 {
    padding: 24px 0;
  }
}

/* 7. El badge "Próximamente" (::after) se monta encima del texto del botón
   en pantallas muy angostas porque el botón se achica pero el texto no */
@media (max-width: 400px) {
  .btn-social-soon {
    height: auto;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .btn-social-soon::after {
    position: static;
    display: block;
    transform: none;
    margin: 4px 0 0 52px;
    text-align: left;
  }
}

/* 8. Tablets (evita que la imagen lateral se corte raro entre 576px y 1199px) */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .col-xl-5 {
    display: none !important; /* Bootstrap ya lo hace con d-none d-xl-block, esto refuerza */
  }
}

/* 9. FIX: overflow horizontal — inputs/botón/link cortados en el borde derecho.
   .row de Bootstrap es display:flex, y los flex-items tienen min-width:auto
   por defecto. Contenido que no puede achicarse (ej. el link con float-right
   de "¿Olvidaste tu contraseña?") fuerza el ancho de la columna por encima
   del viewport, aunque tenga width:100%. Este es el fix estándar para ese
   bug de Flexbox. */
.main-wrap .row > [class*="col-"] {
  min-width: 0;
}

/* 10. FIX: header transparente montado sobre el contenido en mobile.
   .nav-header (bg-transparent) probablemente está pensado para flotar
   (position:fixed/absolute, o con margin negativo) sobre la imagen del
   col-xl-5. Al ocultarse esa columna en mobile, el header queda flotando
   sobre el formulario en su lugar (por eso el ícono de búsqueda se monta
   sobre el título). Lo devolvemos al flujo normal exactamente donde
   Bootstrap oculta la imagen (breakpoint xl). */
@media (max-width: 1199.98px) {
  .nav-header {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* 11. FIX: scroll horizontal real / inputs cortados en el login-card.
   style.css (base de la plantilla) define, dentro de
   @media only screen and (max-width: 768px):
     .login-card { min-width: 380px; max-width: 400px; }
   Ese archivo carga ANTES que este, y acá arriba nunca pisamos
   la propiedad min-width (solo width/max-width/padding), así que
   sigue viva y obliga a la tarjeta a medir 380px como mínimo
   aunque el celular tenga menos pantalla (iPhone SE/mini = 375px,
   Android chicos = 320-360px). La tarjeta se desborda del viewport
   y, como el punto 1 de este mismo archivo pone overflow-x:hidden
   en el body, en vez de un scroll visible lo que se ve es todo
   recortado por el borde derecho: inputs, iconos y botones parecen
   "rotos" porque literalmente les falta el pedazo que quedó fuera
   de pantalla. */
.login-card {
  min-width: 0 !important;
}

/* 12. FIX: en el modal "bottom" (login/registro) el swipe se sentía
   trabado / no dejaba bajar bien por las opciones, sobre todo en
   registro que tiene muchos campos. Causa: había DOS contenedores
   con scroll propio anidados uno adentro del otro:
   - El .modal externo tiene overflow-y:scroll puesto INLINE en el
     HTML (style="overflow-y: scroll"), y un estilo inline le gana
     a cualquier regla de hoja de estilos que no tenga !important.
   - El .modal-body interno tiene su propio overflow-y:auto (punto 3
     de este mismo archivo).
   Con dos scrolls anidados, el navegador no sabe a cuál mandarle el
   gesto de swipe y el scroll se siente roto/errático en mobile.
   Dejamos un solo contenedor con scroll real: el modal-body. Para
   ganarle al inline style hace falta !important. */
.modal.bottom {
  overflow-y: hidden !important;
}

/* 13. FIX: no se puede ver/llegar a los primeros campos (nombre,
   correo) en el modal de registro — se queda "cortado" arrancando
   a mitad del form, sin poder subir más.
   Causa: .modal-body trae de fábrica "d-flex align-items-center"
   para centrar verticalmente la tarjeta del formulario. Bug clásico
   de flexbox: cuando el contenido centrado con align-items:center es
   más alto que el contenedor (7 campos en registro), el navegador lo
   desborda POR IGUAL arriba y abajo — pero el scroll solo puede ir
   hacia abajo (scrollTop nunca es negativo), así que la mitad de
   arriba queda atrapada e inalcanzable para siempre, sin importar
   cuánto se deslice.
   Fix: centrar con margin:auto en vez de align-items. Los márgenes
   automáticos tienen prioridad sobre align-items en flexbox, así que
   esto pisa el align-items:center de fábrica sin tener que tocarlo:
   si el contenido entra en pantalla, se centra igual que antes; si
   no entra (registro), los márgenes se achican a 0 solos y el
   contenido queda 100% scrolleable de punta a punta. No afecta el
   modal de login (pocos campos, sigue viéndose centrado). */
.modal.bottom .modal-body > .card {
  margin-top: auto !important;
  margin-bottom: auto !important;
}