/* ============================================================
   FIBRA HOGAR — Login Full-Screen (estilo HextaStudio adaptado)
   Solo desktop. Sobrescribe .login-wrap y .login-card.
   Paleta institucional: negro, naranja (#e87722), dorado (#b08a3e).
   No toca eventos de submit ni IDs originales.
   ============================================================ */

/* ===== Wrap fullscreen ===== */
.login-wrap{
  position:fixed; inset:0;
  min-height:100vh;
  display:grid; place-items:center;
  background-color:#ffffff !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 15, 16, 0.12) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
  background-attachment: fixed !important;
  padding:24px;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  z-index:50;
  overflow:auto;
}

/* ===== Card 2 columnas ===== */
.login-card{
  width:100%;
  max-width:1100px !important;
  background:#ffffff !important;
  border:1px solid rgba(15,15,16,0.08) !important;
  border-radius:0 !important;
  box-shadow:
    0 1px 2px rgba(15,15,16,0.04),
    0 20px 60px rgba(15,15,16,0.10) !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  min-height:560px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* Línea decorativa dorada arriba — la quitamos para que el panel negro llene */
.login-card::before{ display:none !important; }

/* ===== Panel izquierdo (negro con frase) ===== */
.login-hero{
  position:relative;
  background:#0a0a0b;
  color:#ffffff;
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
  isolation:isolate;
}

/* Resplandor naranja inferior izquierda */
.login-hero::before{
  content:"";
  position:absolute;
  left:-80px; bottom:-120px;
  width:380px; height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,119,34,0.55) 0%, rgba(232,119,34,0) 65%);
  filter:blur(40px);
  z-index:0;
  pointer-events:none;
}

/* Banda dorada superior, sutil */
.login-hero::after{
  content:"";
  position:absolute;
  right:-60px; top:-100px;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(176,138,62,0.30) 0%, rgba(176,138,62,0) 70%);
  filter:blur(30px);
  z-index:0;
  pointer-events:none;
}

/* Barras verticales decorativas estilo blur (efecto "HextaStudio") */
.login-hero-bars{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  gap:14px;
  padding:0 28px;
  align-items:stretch;
  pointer-events:none;
  opacity:.55;
}
.login-hero-bars span{
  flex:1;
  height:100%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,0.65) 40%,
    rgba(0,0,0,0.85) 65%,
    rgba(255,255,255,0.06) 100%);
  filter:blur(2px);
}

/* Marca FH chiquita arriba */
.login-hero-mark{
  position:relative;
  z-index:3;
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600;
  letter-spacing:0.18em;
  color:#d8d6d0;
  text-transform:uppercase;
  margin-bottom:auto;
}
.login-hero-mark .lhm-logo{
  width:28px; height:28px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#1c1c1f,#2a2a2d);
  border:1px solid rgba(255,255,255,0.10);
  font-weight:800; font-size:11px;
}
.login-hero-mark .lhm-logo span{
  background:linear-gradient(135deg,#e8d093,#b08a3e);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Saludo / frase aleatoria */
.login-hero-greet{
  position:relative;
  z-index:3;
  margin-top:auto;
  display:flex; flex-direction:column; gap:12px;
}
.login-hero-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#e87722;
  display:flex; align-items:center; gap:8px;
}
.login-hero-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:#e87722;
  box-shadow:0 0 12px rgba(232,119,34,0.8);
}
.login-hero-phrase{
  font-size:30px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:-0.025em;
  color:#ffffff;
  max-width:420px;
}
.login-hero-phrase em{
  font-style:normal;
  background:linear-gradient(135deg,#e87722,#d4af66);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.login-hero-sub{
  font-size:13.5px;
  color:#9a9aa1;
  margin-top:4px;
  max-width:380px;
  letter-spacing:-0.005em;
}

/* ===== Panel derecho (formulario) ===== */
.login-card > .login-form-side{
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#ffffff;
}

/* Encabezado del formulario */
.login-form-head{
  display:flex; flex-direction:column;
  margin-bottom:28px;
}
.login-form-head .sun{
  width:36px; height:36px;
  color:#e87722;
  margin-bottom:18px;
}
.login-form-head h2{
  margin:0 0 6px;
  font-size:28px; font-weight:600;
  letter-spacing:-0.025em;
  color:#0a0a0b;
}
.login-form-head .sub{
  margin:0;
  font-size:14px;
  color:#5f5f66;
  letter-spacing:-0.005em;
}

/* Override labels y inputs del card base (los que ya estaban dentro de .login-card) */
.login-card label{
  display:block;
  font-size:13px !important;
  font-weight:500 !important;
  color:#0a0a0b !important;
  margin:0 0 6px !important;
  letter-spacing:-0.005em !important;
  text-transform:none !important;
}
.login-card input[type="email"],
.login-card input[type="text"],
.login-card input[type="password"]{
  width:100% !important;
  padding:11px 13px !important;
  border:1px solid #d4d4d4 !important;
  border-radius:8px !important;
  background:#ffffff !important;
  font-size:14px !important;
  color:#0a0a0b !important;
  font-family:inherit !important;
  transition:border-color .15s, box-shadow .15s;
}
.login-card input::placeholder{ color:#9a9aa1 !important; }
.login-card input:focus{
  outline:none !important;
  border-color:#e87722 !important;
  box-shadow:0 0 0 3px rgba(232,119,34,0.15) !important;
}

/* Grupo input con ojo */
.fh-input-eye{
  position:relative;
}
.fh-input-eye input{
  padding-right:42px !important;
}
.fh-input-eye .eye-btn{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  border:none; background:transparent;
  display:grid; place-items:center;
  color:#9a9aa1;
  cursor:pointer;
  border-radius:6px;
  transition:background .12s, color .12s;
}
.fh-input-eye .eye-btn:hover{ background:#f3f4f6; color:#0a0a0b; }
.fh-input-eye .eye-btn svg{ width:16px; height:16px; }

/* Espaciado entre filas */
.login-form-row{ margin-bottom:14px; }

/* Botón primario (Ingresar) */
.login-card .btn-primary{
  width:100% !important;
  margin-top:18px !important;
  padding:11px 16px !important;
  background:#e87722 !important;
  color:#ffffff !important;
  border:1px solid #e87722 !important;
  border-radius:8px !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-0.005em !important;
  cursor:pointer;
  transition:background .15s, transform .08s, box-shadow .15s;
  font-family:inherit !important;
  box-shadow:0 1px 2px rgba(232,119,34,0.18);
}
.login-card .btn-primary:hover{
  background:#d96911 !important;
  box-shadow:0 4px 12px rgba(232,119,34,0.28);
}
.login-card .btn-primary:active{ transform:scale(0.99); }

/* Botón "Cambiar clave" (secundario / link debajo) */
.btn-change-pass{
  margin-top:14px;
  width:100%;
  padding:9px 14px;
  background:transparent;
  border:1px solid #d4d4d4;
  border-radius:8px;
  color:#0a0a0b;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
  transition:background .12s, border-color .12s;
  font-family:inherit;
}
.btn-change-pass:hover{ background:#fafafa; border-color:#b3b3b3; }
.btn-change-pass svg{ width:14px; height:14px; }

/* Pie del formulario */
.login-card .login-foot{
  margin-top:18px !important;
  font-size:12px;
  color:#9a9aa1;
  text-align:center;
}
.login-card .login-error{
  color:#a8261f !important;
  font-size:13px;
  font-weight:500;
  margin-top:10px;
  min-height:18px;
  text-align:left;
}
.login-card .login-mode{
  margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; color:#9a9aa1;
}
.login-card .login-mode .dot{
  width:7px; height:7px; border-radius:50%;
  background:#1f7a48;
}
.login-card .login-mode.warn .dot{ background:#a4742b; }

/* Ocultar el branding antiguo (mark FH + h1 dentro del card) */
.login-card .login-brand,
.login-card > .login-sub{ display:none !important; }

/* ===== Modal "Cambiar clave" ===== */
.fh-modal-pass{
  position:fixed; inset:0; z-index:99999;
  background:rgba(10,10,11,0.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.fh-modal-pass.is-on{ display:flex; }
.fh-modal-pass .mpbox{
  width:100%; max-width:420px;
  background:#fff;
  border:1px solid rgba(15,15,16,0.08);
  box-shadow:0 24px 60px rgba(15,15,16,0.22);
  padding:24px 24px 20px;
  position:relative;
}
.fh-modal-pass h3{
  margin:0 0 4px;
  font-size:18px; font-weight:600;
  letter-spacing:-0.02em; color:#0a0a0b;
}
.fh-modal-pass .sub{
  margin:0 0 18px;
  font-size:13px; color:#5f5f66;
}
.fh-modal-pass label{
  display:block; font-size:12px; font-weight:500;
  color:#0a0a0b; margin:10px 0 5px;
}
.fh-modal-pass input{
  width:100%; padding:10px 12px;
  border:1px solid #d4d4d4; border-radius:8px;
  font-size:14px; font-family:inherit;
}
.fh-modal-pass input:focus{
  outline:none; border-color:#e87722;
  box-shadow:0 0 0 3px rgba(232,119,34,0.15);
}
.fh-modal-pass .mp-actions{
  margin-top:18px;
  display:flex; gap:8px; justify-content:flex-end;
}
.fh-modal-pass .mp-actions button{
  padding:9px 14px; border-radius:8px;
  border:1px solid #d4d4d4; background:#fff;
  cursor:pointer; font-size:13px; font-weight:500;
  font-family:inherit;
}
.fh-modal-pass .mp-actions .primary{
  background:#e87722; border-color:#e87722; color:#fff;
}
.fh-modal-pass .mp-actions .primary:hover{ background:#d96911; }
.fh-modal-pass .mp-msg{
  margin-top:10px; font-size:12.5px;
  min-height:16px;
}
.fh-modal-pass .mp-msg.ok{ color:#1f7a48; }
.fh-modal-pass .mp-msg.err{ color:#a8261f; }
.fh-modal-pass .mp-close{
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border:none; background:transparent;
  border-radius:6px; cursor:pointer; color:#9a9aa1;
  display:grid; place-items:center;
}
.fh-modal-pass .mp-close:hover{ background:#f3f4f6; color:#0a0a0b; }

/* ===== Responsive: en pantallas chicas vuelve 1 columna ===== */
@media (max-width: 880px){
  .login-card{
    grid-template-columns:1fr !important;
    min-height:auto;
    max-width:480px !important;
  }
  .login-hero{
    padding:32px 28px;
    min-height:200px;
  }
  .login-hero-phrase{ font-size:22px; }
  .login-card > .login-form-side{ padding:32px 28px; }
  .login-form-head h2{ font-size:24px; }
}