/* Layout del login */
.login-wrap{
  min-height: calc(100vh - 80px); /* deja espacio para footer fijo */
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(80rem 50rem at 30% 40%, rgba(106,115,233,.06), transparent 60%),
              radial-gradient(60rem 40rem at 70% 60%, rgba(0,180,230,.06), transparent 60%);
  padding:2rem 1rem;
}
.login-grid{
  width: min(1100px, 100%);
  display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center;
}

/* Col izquierda: logo con reflejo */
.login-brand{justify-self:center; text-align:center}
.brand-logo{max-width:460px; width:100%; filter:drop-shadow(0 24px 40px rgba(15,35,71,.15))}
.brand-reflection{
  max-width:460px; width:100%; transform: scaleY(-1);
  opacity:.52; margin-top:.5rem;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 70%);
}

/* Tarjeta de formulario */
.login-card{ max-width: 440px; justify-self:start; padding:1.25rem 1.25rem 1rem }
.login-card__head h2{margin:.25rem 0;color:var(--navy)}
.login-card__head p{margin:0}

/* Inputs con iconos */
.form-group{margin-bottom:1rem}
.form-group label{display:block; font-weight:700; margin-bottom:.35rem; color:var(--gray-700)}

.input-icon{ position:relative; display:flex; align-items:center }
.input-icon input{
  width:100%; padding:.65rem 2.5rem .65rem .75rem; border-radius:var(--radius);
  border:1px solid var(--gray-300); background:#fff; box-shadow:var(--shadow-sm);
}
.input-icon > i, .input-icon > .pwd-toggle{
  position:absolute; right:.5rem; color:var(--gray-500);
}
.input-icon > i{ pointer-events:none }
.pwd-toggle{ border:0; background:transparent; height:100%; display:flex; align-items:center; cursor:pointer }

.w-100{width:100%}
.helper{margin:.75rem 0 0}

/* Tarjeta/alertas */
.card{border-radius:1rem}
.alert{padding:.65rem .75rem;border-radius:.65rem;border:1px solid transparent;margin:.5rem 0}
.alert-danger{background:#FEF2F2;border-color:#FECACA;color:#991B1B}

/* Header y footer del login */
.header--auth{background:transparent; box-shadow:none; height:40px}
.footer-auth{
  position:fixed; bottom:0; left:0; right:0;
  background: var(--gray-50); border-top:1px solid var(--gray-200);
  padding:.5rem; text-align:center; color:var(--gray-600);
}

/* Responsive */
@media (max-width: 980px){
  .login-grid{grid-template-columns: 1fr; gap:1rem}
  .login-card{justify-self:center}
  .brand-logo,.brand-reflection{max-width:360px}
}

/* Soporte de máscara en WebKit para el reflejo */
.brand-reflection{
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 70%);
}

/* Asegurar ancho completo del botón (por si Bootstrap cambia display) */
.btn.w-100 { display: inline-flex; justify-content: center; }