/* ============================================================
   AMPARA — CSS Responsivo
   Enfoque mobile-first. Cubre desde 320px (móviles chicos)
   hasta pantallas 4K. Cargar DESPUÉS de css/style.css para
   que estas reglas puedan sobreescribir al template base.
   Reusable en login.html, register.html y demás páginas que
   compartan el mismo layout de "col-xl-5 imagen + col-xl-7 form".
   ============================================================ */

:root {
  --ampara-red: #b01c2e;
  --ampara-red-dark: #7b0d1e;
  --ampara-teal: #20b2aa;
}

/* ---------- Fix de altura real en móviles ----------
   100vh en móvil no descuenta la barra de direcciones del
   navegador y corta contenido. 100dvh sí lo hace (dynamic
   viewport height). Los navegadores viejos ignoran la 2da
   línea y se quedan con vh como fallback. */
.vh-100 {
  height: 100vh;
  height: 100dvh;
}

html, body {
  overflow-x: hidden; /* evita scroll horizontal por elementos que se pasan */
}

/* ================= BASE / MOBILE (< 576px) ================= */

.login-card {
  width: 100%;
  max-width: 460px;
  padding: 24px 20px;
  margin: 0 auto;
}

.login-card .card-body {
  padding: 0 !important;
}

.ampara-tagline {
  font-size: clamp(11px, 3vw, 13px);
}

.login-card h2 {
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1.25;
}

.login-subtitle {
  font-size: clamp(12px, 3.2vw, 14px);
  color: #888;
  margin-bottom: 24px;
}

/* Inputs y botones con alto mínimo táctil (accesibilidad móvil) */
.style2-input,
.form-control {
  min-height: 48px;
  font-size: 15px !important;
}

.btn-ampara,
.bg-facebook,
.bg-twiiter {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkbox + "olvidaste tu contraseña" sin pisarse en pantallas chicas */
.form-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.form-check .float-right {
  float: none !important;
  margin-left: auto;
}

/* Header: logo y botones no se encimen en pantallas angostas */
.nav-top {
  padding: 10px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Overlay motivacional (solo visible desde xl, pero lo dejamos
   listo con unidades relativas por si se activa en otro breakpoint) */
.ampara-overlay-wrap {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.ampara-overlay-box {
  background: rgba(176, 28, 46, 0.85);
  border-radius: 16px;
  padding: 20px 24px;
}

.ampara-overlay-title {
  color: #fff;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  margin-bottom: 8px;
}

.ampara-overlay-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 1.1vw, 13px);
  line-height: 1.6;
  margin: 0;
}

/* Modales en bottom-sheet: que no se corten en pantallas bajas */
.modal-content {
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
}

/* ================= 375px+ (móviles medianos) ================= */
@media (min-width: 375px) {
  .login-card {
    padding: 28px 24px;
  }
}

/* ================= 576px+ (sm — móviles grandes / phablets) ================= */
@media (min-width: 576px) {
  .login-card {
    padding: 32px 40px;
  }

  .modal-dialog {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ================= 768px+ (md — tablets) ================= */
@media (min-width: 768px) {
  .login-card {
    max-width: 480px;
    padding: 40px 56px;
  }

  .col-xl-7 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ================= 992px+ (lg — laptops chicas) ================= */
@media (min-width: 992px) {
  .header-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ================= 1200px+ (xl — se activa la imagen lateral) ================= */
@media (min-width: 1200px) {
  .login-card {
    padding: 48px 80px;
  }

  .ampara-overlay-wrap {
    bottom: 40px;
    left: 40px;
    right: 40px;
  }

  .ampara-overlay-box {
    padding: 24px 28px;
  }
}

/* ================= 1600px+ (pantallas grandes / 2K-4K) ================= */
@media (min-width: 1600px) {
  .login-card {
    max-width: 560px;
  }

  .login-card h2 {
    font-size: 38px;
  }

  .ampara-overlay-title {
    font-size: 22px;
  }

  .ampara-overlay-text {
    font-size: 14px;
  }
}

/* ================= Móviles en horizontal (landscape bajo) ================= */
@media (max-height: 480px) and (orientation: landscape) {
  .vh-100 {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px 0;
  }

  .login-card {
    padding: 16px 24px;
  }

  .login-card h2 {
    font-size: 20px;
    margin-bottom: 4px !important;
  }

  .ampara-tagline {
    margin-bottom: 8px;
  }

  .login-subtitle {
    margin-bottom: 12px;
  }
}

/* ================= Modales en pantallas chicas (bottom sheet full width) ================= */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
  }

  .modal-content {
    border-radius: 20px 20px 0 0;
  }
}

/* ================= Pantallas muy pequeñas (< 340px, ej. iPhone SE / gama baja) ================= */
@media (max-width: 340px) {
  .login-card h2 {
    font-size: 20px;
  }

  .divider-text h6 {
    font-size: 10px;
    padding: 0 6px;
  }

  .form-check-label {
    font-size: 11px;
  }
}