/* ============================================================
   FIBRA HOGAR — Login Mobile (CARD oscura sobre fondo blanco
   con punticos). Para Conductores, Yury y futuros usuarios mobile.
   Frase motivacional minimalista DEBAJO de la card.
   ============================================================ */

/* Fondo: blanco con punticos (igual que el resto del sistema) */
.login-wrap{
  position:fixed; inset:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content: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 18px;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  z-index:50;
  overflow:auto;
  gap:28px;
}

/* Card oscura central */
.login-card{
  width:100%;
  max-width:380px !important;
  background:#0f0f10 !important;
  color:#ffffff !important;
  border:1px solid #1a1a1c !important;
  border-radius:24px !important;
  box-shadow:
    0 1px 2px rgba(15,15,16,0.06),
    0 18px 50px rgba(15,15,16,0.18) !important;
  padding:32px 26px 26px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  position:relative;
  isolation:isolate;
}
.login-card::before{ display:none !important; }

/* Logo circular arriba */
.lm-logo{
  width:64px; height:64px; border-radius:50%;
  margin:0 auto 8px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#1a1a1c 0%, #2c2c30 100%);
  border:1px solid rgba(255,255,255,0.08);
  font-weight:800; font-size:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04), 0 6px 18px rgba(15,15,16,0.35);
}
.lm-logo span{
  background:linear-gradient(135deg,#e8d093,#b08a3e);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:0.5px;
}

/* Título */
.lm-title{
  text-align:center;
  font-size:22px; font-weight:600;
  letter-spacing:-0.02em;
  color:#ffffff;
  margin:0 0 12px;
}

/* Ocultar branding y subtítulo originales */
.login-card .login-brand,
.login-card > .login-sub{ display:none !important; }

/* Labels y inputs en modo dark */
.login-card label{
  display:none !important; /* en mobile usamos placeholders */
}
.login-card input[type="email"],
.login-card input[type="text"],
.login-card input[type="password"]{
  width:100% !important;
  padding:14px 16px !important;
  background:#1c1c1e !important;
  border:1px solid #2a2a2d !important;
  border-radius:14px !important;
  color:#ffffff !important;
  font-size:15px !important;
  font-family:inherit !important;
  transition:border-color .15s, background .15s;
}
.login-card input::placeholder{
  color:#7a7a82 !important;
  font-size:15px !important;
}
.login-card input:focus{
  outline:none !important;
  border-color:#e87722 !important;
  background:#222224 !important;
  box-shadow:0 0 0 3px rgba(232,119,34,0.12) !important;
}

/* Eye toggle adaptado a dark */
.fh-input-eye{ position:relative; }
.fh-input-eye input{ padding-right:46px !important; }
.fh-input-eye .eye-btn{
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  width:32px; height:32px;
  border:none; background:transparent;
  border-radius:8px;
  display:grid; place-items:center;
  color:#7a7a82; cursor:pointer;
  transition:background .12s, color .12s;
}
.fh-input-eye .eye-btn:hover{ background:#222224; color:#ffffff; }
.fh-input-eye .eye-btn svg{ width:18px; height:18px; }

/* Separador sutil entre inputs y botón */
.lm-divider{
  height:1px; background:#1f1f22;
  margin:6px 0 2px;
}

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

/* Botón Cambiar clave (secundario dark) */
.btn-change-pass{
  width:100%;
  padding:12px 14px;
  background:#1c1c1e;
  border:1px solid #2a2a2d;
  border-radius:14px;
  color:#d8d6d0;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .12s, border-color .12s, color .12s;
  font-family:inherit;
}
.btn-change-pass:hover{ background:#222224; border-color:#3a3a3e; color:#ffffff; }
.btn-change-pass svg{ width:15px; height:15px; }

/* Mensaje de error / modo conexión */
.login-card .login-error{
  color:#ff8a85 !important;
  font-size:13px;
  font-weight:500;
  text-align:center;
  min-height:18px;
  margin-top:4px;
}
.login-card .login-mode{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11.5px;
  color:#7a7a82;
  margin-top:6px;
  letter-spacing:0.02em;
}
.login-card .login-mode .dot{
  width:6px; height:6px; border-radius:50%;
  background:#5ec38c;
  box-shadow:0 0 8px rgba(94,195,140,0.4);
}
.login-card .login-mode.warn .dot{ background:#f0c87a; }

/* Footer dentro del card */
.login-card .login-foot{
  text-align:center;
  font-size:11.5px;
  color:#7a7a82 !important;
  margin-top:8px !important;
  letter-spacing:0.02em;
}

/* ===== Frase motivacional DEBAJO de la card ===== */
.lm-quote{
  width:100%;
  max-width:380px;
  text-align:center;
  color:#0a0a0b;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.lm-quote .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.2em;
  color:#e87722;
  margin-bottom:8px;
}
.lm-quote .eyebrow .dot{
  width:5px; height:5px; border-radius:50%;
  background:#e87722;
  box-shadow:0 0 8px rgba(232,119,34,0.5);
}
.lm-quote .phrase{
  font-size:15px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:-0.01em;
  color:#0a0a0b;
}
.lm-quote .phrase em{
  font-style:normal;
  background:linear-gradient(135deg,#e87722,#b08a3e);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:600;
}

/* ===== Modal cambiar clave (reusa estilos pero adaptado) ===== */
.fh-modal-pass{
  position:fixed; inset:0; z-index:99999;
  background:rgba(10,10,11,0.65);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:18px;
  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:380px;
  background:#0f0f10;
  border:1px solid #1f1f22;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  padding:24px 22px 20px;
  position:relative;
  color:#fff;
}
.fh-modal-pass h3{
  margin:0 0 4px;
  font-size:17px; font-weight:600;
  letter-spacing:-0.02em; color:#ffffff;
}
.fh-modal-pass .sub{
  margin:0 0 14px;
  font-size:12.5px; color:#9a9aa1;
  line-height:1.4;
}
.fh-modal-pass label{
  display:block !important; font-size:11px; font-weight:600;
  color:#d8d6d0; margin:10px 0 5px;
  letter-spacing:0.04em; text-transform:uppercase;
}
.fh-modal-pass input{
  width:100%; padding:11px 14px;
  background:#1c1c1e;
  border:1px solid #2a2a2d;
  border-radius:12px;
  font-size:14px; color:#fff;
  font-family:inherit;
}
.fh-modal-pass input:focus{
  outline:none; border-color:#e87722;
  background:#222224;
  box-shadow:0 0 0 3px rgba(232,119,34,0.12);
}
.fh-modal-pass .mp-actions{
  margin-top:16px;
  display:flex; gap:8px; justify-content:flex-end;
}
.fh-modal-pass .mp-actions button{
  padding:10px 14px; border-radius:10px;
  border:1px solid #2a2a2d; background:#1c1c1e;
  cursor:pointer; font-size:13px; font-weight:500;
  font-family:inherit; color:#d8d6d0;
}
.fh-modal-pass .mp-actions button:hover{ background:#222224; color:#fff; }
.fh-modal-pass .mp-actions .primary{
  background:#e87722; border-color:#e87722; color:#fff;
}
.fh-modal-pass .mp-actions .primary:hover{ background:#d96911; color:#fff; }
.fh-modal-pass .mp-msg{
  margin-top:10px; font-size:12.5px;
  min-height:16px; text-align:left;
}
.fh-modal-pass .mp-msg.ok{ color:#5ec38c; }
.fh-modal-pass .mp-msg.err{ color:#ff8a85; }
.fh-modal-pass .mp-close{
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border:none; background:transparent;
  border-radius:8px; cursor:pointer; color:#7a7a82;
  display:grid; place-items:center;
}
.fh-modal-pass .mp-close:hover{ background:#1f1f22; color:#fff; }
.fh-modal-pass .mp-close svg{ width:16px; height:16px; }

/* Responsive ajuste pantallas muy chicas */
@media (max-width: 380px){
  .login-card{ padding:26px 20px 22px !important; }
  .lm-logo{ width:56px; height:56px; }
  .lm-title{ font-size:20px; }
}