/* =========================================================
   FONDO  —  foto a pantalla completa + overlay sutil
========================================================= */

@media(max-width:500px){
  .login-bg::before{background-size:cover;}      /* se muestra la foto completa */
}

/* Overlay más claro para dejar ver la foto */
.login-bg::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0%, rgba(0, 0, 0, 0.095) 80%),
    linear-gradient(rgba(0,0,0,.05), rgba(0, 0, 0, 0.11));
  pointer-events:none;
}

/* =================================================================
   TARJETA (“glass card”)
================================================================= */
.login-wrapper{position:relative;z-index:10;padding:1.5rem;}

.login-card{
  width:100%;max-width:420px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  border-radius:18px;
  padding:48px 56px 40px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;
  row-gap:24px;                 /* separación vertical genérica */
  position:relative;z-index:50;pointer-events:auto;
}

/* Evita que el SVG del logo de Breeze tape los inputs */
.login-card svg{pointer-events:none!important;}

/* -----------------------------------------------------------------
   Branding & título
----------------------------------------------------------------- */
.brand-logo{height:48px;margin-bottom:8px;object-fit:contain;}
.card-title{font-size:32px;font-weight:700;margin-bottom:8px;color:#111827;}

/* =================================================================
   FORMULARIO
================================================================= */
.form-group{width:100%;}

.form-label{
  font-size:14px;font-weight:600;margin-bottom:8px;
  color:#374151;
}

.form-control{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  border:1.5px solid #d1d5db;
  border-radius:8px;
  background:#f9fafb;
  transition:border-color .15s, box-shadow .15s;
}

.form-control:focus{
  outline:none;
  border-color:#2563eb;
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.invalid{margin-top:6px;font-size:13px;color:#dc2626;}

/* Mostrar / ocultar contraseña */
.toggle-pass{cursor:pointer;color:#6b7280;font-size:18px;}
.toggle-pass:hover{color:#374151;}

/* opciones (recordarme + enlace) */
.form-options{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.chk-remember{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#374151;
}

.opt-link{
  font-size:14px;
  color:#2563eb;
  text-decoration:none;
}
.opt-link:hover{text-decoration:underline;}

/* =================================================================
   BOTÓN PRINCIPAL
================================================================= */
.btn-primary{
  width:100%!important;
  padding:16px 0;
  font-size:18px;
  border-radius:10px;
  background:#002d72;
  color:#fff;
  border:2px solid #002d72;
  cursor:pointer;
  transition:background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover,
.btn-primary:focus{
  background:#fff;
  color:#002d72;
  border-color:#002d72;
  transform:translateY(-1px);
  box-shadow:0 6px 12px rgba(0,0,0,.20);
}

/* =================================================================
   TEXTO AUXILIAR
================================================================= */
.small{font-size:14px;color:#374151;}
.small .opt-link{font-weight:600;}

/* =================================================================
   RESPONSIVE
================================================================= */
@media(max-width:500px){

  /* tarjeta más compacta y con más aire */
  .login-card{padding:36px 24px;row-gap:20px;}

  /* inputs y checkbox/link con separación uniforme */
  .form-group{margin-bottom:16px;}

  .form-options{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-bottom:8px;
  }

  .btn-primary{padding:14px 0;margin-top:0;}
}

/* ─── Espaciado extra en escritorio ─────────────────────────── */
@media (min-width:501px){

  /* aire entre los inputs */
  .form-group{
    margin-bottom:32px;          /* antes 24 px */
  }

  /* aire entre “Recordarme / enlace” y el botón */
  .form-options{
    margin:0 0 40px 0;           /* antes 24 px */
  }

  /* pequeño margen sobre el botón para equilibrar */
  .btn-primary{
    margin-top:16px;             /* antes 0 */
  }
}