/* ============================================================
   login-modern.css v2 — Componentes modernizados del login (CLARO)
   Mantiene el layout original (foto de fondo + panel derecho).
   Panel claro, inputs blancos con borde, focus ring verde,
   Tipografía Manrope, radios 8px, motion cubic-bezier(.32,.72,0,1)
   ============================================================ */

/* panel derecho: vidrio CLARO sobre la foto */
#div-login{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
}

/* tipografia del panel (sin afectar iconos) */
#div-login, #div-login .form-control, #div-login label,
#div-login button, #div-login p{
  font-family:'Manrope','Segoe UI',system-ui,sans-serif;
}

/* logo */
#div-login .login-logo{
  height:56px;width:auto;object-fit:contain;
}

/* titulo */
#div-login .p-login{
  font-size:20px;font-weight:700;color:#111827;
  letter-spacing:.4px;line-height:1.3;
}

/* labels */
#div-login label{
  font-size:14px !important;
  font-weight:500;
  color:#374151 !important;
  letter-spacing:.2px;
  margin-bottom:8px;
}

/* inputs (claros) */
#div-login .form-control{
  height:44px;
  border-radius:8px;
  background:#FFFFFF;
  border:1px solid #D1D5DB;
  color:#111827;
  font-size:16px;
  padding:0 12px;
  outline:none;
  box-shadow:none !important;
  transition:border-color .3s cubic-bezier(.32,.72,0,1), box-shadow .3s cubic-bezier(.32,.72,0,1);
}
#div-login .form-control:hover{border-color:#9CA3AF;}
#div-login .form-control:focus{
  border-color:#117A65;
  box-shadow:0 0 0 3px rgba(17,122,101,.18) !important;
}
#div-login .form-control:-webkit-autofill,
#div-login .form-control:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color:#111827;
}

/* texto ¿olvidaste? */
#div-login .mensaje-login{
  font-size:14px;
  color:#6B7280;
  margin-top:4px;
}

/* boton */
#boton-login{
  width:100% !important;
  height:44px !important;
  border:0 !important;
  border-radius:8px !important;
  background:#117A65 !important;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1) !important;
}
#boton-login:hover{
  background:#0E6553 !important;
  box-shadow:none !important;
}
#boton-login:active{transform:scale(.98);}
#boton-login:focus-visible{outline:2px solid #117A65;outline-offset:2px;}
.boton-login-letra{
  font-size:16px !important;
  font-weight:600 !important;
  color:#fff;
  letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;
}
#boton-login .spinner-border{
  width:16px;height:16px;border-width:2px;
}

/* pie de pagina */
.div-login-derecho > .mensaje-login,
p.fixed-bottom.mensaje-login{
  font-size:12px !important;
  color:#6B7280 !important;
  letter-spacing:.2px;
}

/* responsive: panel completo en movil */
@media (max-width:860px){
  #div-login{width:100% !important;flex:0 0 100% !important;max-width:100% !important;}
}