/* ===== Login: equilibrio desktop + responsive ===== */

/* Contenedor principal del login (ya existe en tu vista como .login-wrap) */
.login-wrap{
  display:flex;
  justify-content:center;
  align-items:center;          /* centrado vertical en desktop */
  min-height: 72vh;            /* aire arriba/abajo en pantallas grandes */
  padding: 2rem 0;             /* respiro sin mostrar footer */
}

/* Fila para que la imagen + card se alineen arriba cuando haga falta */
.login-row{ align-items:center; }

/* Card del login */
.auth-card{ max-width: 540px; margin-inline:auto; }

/* Inputs grandes */
.form-control-lg{
  padding-top:.95rem;
  padding-bottom:.95rem;
  border-radius:.8rem;
}
.form-control-lg::placeholder{ color:#9aa3af; }

/* Imagen izquierda: tamaño cómodo en desktop */
.login-hero img{
  width:100%;
  height:auto;
  max-width:520px;
  max-height:380px;
  object-fit:contain;
}

/* Botón redondeado */
.btn-rounded{ border-radius:50rem !important; }

/* ===== Breakpoints ===== */

/* Laptops medianos: un pelín menos de alto */
@media (max-width: 1199.98px){
  .login-wrap{ min-height: 70vh; }
  .login-hero img{ max-width: 480px; max-height: 360px; }
}

/* Tablets (≤992): sube un poco el bloque para que se vea “arriba” */
@media (max-width: 991.98px){
  .login-wrap{
    align-items:flex-start;    /* deja el bloque más arriba */
    min-height: 66vh;          /* evita que asome el footer */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .login-row{ align-items:flex-start; }
  .auth-card .card-body{ padding: 1.25rem; }
  .form-control-lg{ padding-top:.85rem; padding-bottom:.85rem; }
  .login-hero img{ max-width: 440px; max-height: 340px; }
}

/* Móvil (≤576): layout tipo columna, más compacto */
@media (max-width: 575.98px){
  .login-wrap{ min-height: 64vh; padding-top: .75rem; }
  .login-hero img{ max-width: 360px; max-height: 300px; }
}