:root{
  --brand-blue:#0b4ea2;
  --brand-yellow:#ffcc00;
  --ink:#0f172a;

  /* padding vertical de respiración del layout (se ajusta por altura) */
  --vpad: 2rem;
}

/* Base */
html,body{height:100%;}
html,body{overflow-x:hidden;}
*{box-sizing:border-box;}
body{
  background:
    radial-gradient(1000px 600px at 120% -10%, var(--brand-yellow) 0%, transparent 50%),
    radial-gradient(900px 600px at -20% 110%, var(--brand-blue) 0%, transparent 50%),
    linear-gradient(135deg, #0a3d82 0%, #0b4ea2 60%, #0a5bd4 100%);
  color:#0b1320;
}

/* Layout principal centrado */
.login-wrap{
  padding-block:0 !important;            /* anula .py-4 del .container */
  min-height:100dvh;                      /* ocupa la altura visible real */
  display:grid;
  grid-template-columns: 1fr minmax(380px,480px); /* branding / form */
  gap:clamp(16px,2vw,32px);
  align-items:center;                     /* centra verticalmente */
  justify-content:center;                 /* centra horizontalmente */
  margin-inline:auto;
  background:rgba(255,255,255,0.02);      /* uniforma gap (adiós “línea”) */
  border-radius:12px;
  padding-inline: clamp(12px, 2vw, 24px); /* respiro lateral en pantallas pequeñas */
}

/* --- Columna izquierda (branding) --- */
.brand-panel{
  color:#fff;
  padding: var(--vpad) 2rem;
  display:flex;
  align-items:center;
}
.brand-card{
  width:100%;
  max-width:720px;
  max-height: calc(100dvh - (var(--vpad) * 2)); /* si no cabe, scrollea adentro */
  overflow:auto;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.brand-header{
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-yellow) 100%);
  padding:1rem 1.25rem;
}
.brand-body{ padding:1.75rem; }
.brand-title{ font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.brand-sub{ opacity:.95; font-size:1.05rem; }
.logo-img{
  display:block; width:100%; height:auto; border-bottom:1px solid rgba(255,255,255,.24);
}

/* --- Columna derecha (form) --- */
.card-glass{
  width:100%;
  max-width:460px;
  margin-inline:auto;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(14, 23, 38, .25);

  /* Igual: si no cabe en altura, scrollea dentro */
  max-height: calc(100dvh - (var(--vpad) * 2));
  overflow:auto;

  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.form-title{ font-weight:800; color:var(--ink); }
.btn-brand{
  background: linear-gradient(90deg, var(--brand-blue), #1976d2);
  border:none;
}
.btn-brand:hover{ filter:brightness(1.05); }
.btn-outline-brand{ border-color:var(--brand-blue); color:var(--brand-blue); }
.btn-outline-brand:hover{ background:var(--brand-blue); color:#fff; }

.form-control, .form-select{
  border-radius:12px; padding:.8rem .95rem;
  border-color:#e6e8ee;
}
.form-control:focus{
  border-color:#9ec3ff; box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
}
.mini{ font-size:.9rem; opacity:.85; }
.foot-note{ color:#0b1320; opacity:.75; font-size:.85rem; }

/* ====== MODO COMPACTO por ALTURA (para 100% de zoom en laptops) ====== */
/* 1) Alturas <= 900px: compacta suavemente */
@media (max-height: 900px) and (min-width: 992px){
  :root{ --vpad: 1.5rem; }
  .login-wrap{ gap: 1.25rem; }
  .brand-panel{ padding: var(--vpad) 1.5rem; }
  .brand-header{ padding:.75rem 1rem; }
  .brand-body{ padding:1.25rem; }
  .card-glass{ padding: 1.25rem; }
  /* reduce márgenes Bootstrap dentro del login (sin tocar tu HTML) */
  .login-wrap .mb-3{ margin-bottom: .75rem !important; }
  .login-wrap .mb-4{ margin-bottom: .9rem !important; }
  .btn.btn-lg{ padding: .6rem 1rem; font-size: 1rem; }
}

/* 2) Alturas <= 780px: compacta un poco más */
@media (max-height: 780px) and (min-width: 992px){
  :root{ --vpad: 1rem; }
  .login-wrap{ gap: 1rem; }
  .brand-panel{ padding: var(--vpad) 1rem; }
  .brand-body{ padding: 1rem; }
  .brand-title{ font-size: 1rem; }
  .brand-sub{ font-size: .98rem; }
  .card-glass{ padding: 1rem; }
  .login-wrap .mb-3{ margin-bottom: .6rem !important; }
  .login-wrap .mb-4{ margin-bottom: .75rem !important; }
  .mini{ font-size: .85rem; }
}

/* ====== Responsivo por ANCHO ====== */
@media (max-width: 992px){
  .login-wrap{
    grid-template-columns:1fr;              /* apila en móvil/tablet */
    align-items:start;                       /* desde arriba en móviles */
    padding: clamp(16px,3vw,24px) 16px !important;
  }
  .brand-card, .card-glass{
    max-height: none;                        /* en móvil deja scroll de página normal */
  }
  .brand-card{ max-width:100%; }
}

/* Seguridad scroll horizontal */
html, body { overflow-x: hidden; }


/*pruebas*/