/* Última capa visual del login */
body.login-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(15,47,111,.18), transparent 32rem),
    radial-gradient(circle at 92% 22%, rgba(56,189,248,.14), transparent 30rem),
    linear-gradient(180deg,#f8fafc 0%,#eef4fb 100%) !important;
}
body.login-page .login-professional {
  flex: 1 0 auto !important;
  width: min(1160px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: clamp(38px, 7vh, 70px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(320px,1.1fr) minmax(320px,430px) !important;
  gap: 30px !important;
  align-items: center !important;
}
body.login-page .login-info-panel {
  background:
    linear-gradient(135deg, rgba(6,26,63,.88), rgba(15,47,111,.82)),
    url('usuarios/imagenes/hero_clave_residencial.jpg') center/cover !important;
  min-height: 500px !important;
  border-radius: 34px !important;
  box-shadow: 0 28px 86px rgba(15,23,42,.18) !important;
}
body.login-page .form {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: clamp(30px, 4vw, 44px) !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(148,163,184,.32) !important;
  box-shadow: 0 28px 86px rgba(15,23,42,.14) !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  transform: none !important;
}
body.login-page .form:hover { transform: translateY(-2px) !important; border-color: rgba(15,47,111,.20) !important; }
body.login-page #heading { color:#0f172a !important; font-size:2.1rem !important; margin:0 0 22px !important; letter-spacing:-.04em !important; }
body.login-page #heading::after { content:'Ingresa a tu panel CRM'; display:block; font-size:14px; color:#64748b; margin-top:8px; font-weight:800; letter-spacing:0; }
body.login-page .field {
  background:#f8fafc !important;
  border:1px solid #dbe4ef !important;
  border-radius:18px !important;
  box-shadow:none !important;
  min-height:52px !important;
  padding:0 14px !important;
  margin-bottom:12px !important;
}
body.login-page .field:focus-within { border-color:#0f2f6f !important; box-shadow:0 0 0 5px rgba(15,47,111,.08) !important; }
body.login-page .input-icon { fill:#0f2f6f !important; color:#0f2f6f !important; }
body.login-page .input-field { color:#0f172a !important; font-weight:800 !important; }
body.login-page .input-field::placeholder { color:#94a3b8 !important; }
body.login-page .btn { margin-top:18px !important; }
body.login-page .button1 {
  width:100% !important;
  min-height:52px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#0f2f6f,#061a3f) !important;
  color:#fff !important;
  font-weight:950 !important;
  box-shadow:0 16px 34px rgba(15,47,111,.25) !important;
}
body.login-page .contenido-pie { margin-top:0 !important; flex:0 0 auto !important; }
@media(max-width: 880px){
  body.login-page .login-professional { grid-template-columns: 1fr !important; }
  body.login-page .login-info-panel { min-height: 300px !important; }
}
@media(max-width: 560px){
  body.login-page .login-professional { width:min(100% - 20px,430px) !important; padding:22px 0 !important; }
  body.login-page .login-info-panel { display:none !important; }
  body.login-page .form { padding:24px !important; border-radius:26px !important; }
}