/* Login profesional - Clave Residencial */
body.login-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(29,78,216,.16), transparent 34rem),
    radial-gradient(circle at 92% 18%, rgba(6,182,212,.12), transparent 26rem),
    linear-gradient(180deg,#f8fafc 0%,#eef4fb 100%) !important;
}
body.login-page .barra-superior { height: 72px !important; }
.login-professional {
  flex: 1 0 auto;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 8vh, 78px) 0 clamp(34px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 430px);
  gap: 28px;
  align-items: center;
}
.login-info-panel {
  min-height: 470px;
  border-radius: 34px;
  padding: clamp(28px, 5vw, 48px);
  background:
    linear-gradient(135deg, rgba(15,47,111,.94), rgba(6,26,63,.98)),
    url('usuarios/videos/ClaveDrone_poster.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: 0 28px 80px rgba(15,23,42,.18);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-info-panel::after {
  content: "";
  position: absolute;
  inset: auto -80px -90px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.login-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 900;
  letter-spacing: .04em;
  width: max-content;
}
.login-brand-chip img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(255,255,255,.2)); }
.login-info-panel h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: -.07em; line-height: .95; margin: 26px 0 14px; }
.login-info-panel p { color: #dbeafe; max-width: 560px; line-height: 1.65; font-weight: 700; }
.login-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.login-highlights span { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 800; }
body.login-page .form {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: clamp(26px, 4vw, 42px) !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(148,163,184,.34) !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.14) !important;
  backdrop-filter: blur(18px);
  gap: 16px !important;
  color: #0f172a !important;
}
body.login-page .form:hover { transform: none !important; border: 1px solid rgba(148,163,184,.34) !important; }
body.login-page #heading {
  color: #0f172a !important;
  margin: 0 0 22px !important;
  font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
  letter-spacing: -.04em;
}
body.login-page #heading::after {
  content: "Accede al CRM de gestión inmobiliaria";
  display: block;
  font-size: 14px;
  color: #64748b;
  letter-spacing: 0;
  font-weight: 700;
  margin-top: 8px;
}
body.login-page .field {
  background: #f8fafc !important;
  border: 1px solid #dbe4f0 !important;
  box-shadow: none !important;
  min-height: 52px;
  padding: 0 14px !important;
  border-radius: 18px !important;
  margin-bottom: 12px;
}
body.login-page .field:focus-within { border-color:#0f2f6f !important; box-shadow: 0 0 0 5px rgba(15,47,111,.10) !important; }
body.login-page .input-icon { fill: #0f2f6f !important; }
body.login-page .input-field { color: #0f172a !important; font-size: 15px !important; }
body.login-page .input-field::placeholder { color: #94a3b8 !important; }
body.login-page .btn { margin-top: 18px !important; }
body.login-page .button1 {
  width: 100%;
  min-height: 52px;
  border-radius: 18px !important;
  background: linear-gradient(135deg,#0f2f6f,#061a3f) !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(15,47,111,.25);
}
body.login-page .button1:hover { transform: translateY(-1px); background: linear-gradient(135deg,#123b86,#071935) !important; }
body.login-page .error { background:#fff1f3; border:1px solid #fecdd3; color:#b42318 !important; border-radius:14px; padding:10px 12px; font-weight:800; }
body.login-page > .contenido-pie { margin-top: 0 !important; flex: 0 0 auto; }
@media(max-width: 860px) {
  .login-professional { grid-template-columns: 1fr; padding-top: 28px; }
  .login-info-panel { min-height: auto; }
  .login-info-panel h1 { margin-top: 18px; }
}
@media(max-width: 560px) {
  .login-professional { width: min(100% - 22px, 420px); padding-top: 18px; }
  .login-info-panel { display: none; }
  body.login-page .form { padding: 24px !important; border-radius: 26px !important; }
}