/* ============================================================================
   Login moderno — Factura 365. Reestiliza el login existente al sistema visual
   del dashboard (azul #1F6FEB, tarjeta redondeada, panel de marca). No cambia
   ningún control de servidor: solo presentación. (Rediseño look&feel, 14/09/2026)
   ============================================================================ */
:root {
  --lm-primary: #1f6feb;
  --lm-title: #16324f;
  --lm-text: #5f6f82;
}

html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #eef3fb 0%, #e6eefb 60%, #eaf1fb 100%);
  background-image: linear-gradient(135deg, #eef3fb 0%, #e6eefb 60%, #eaf1fb 100%) !important;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lm-stage {
  width: 100%;
  max-width: 920px;
  min-height: 540px;
  display: flex;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(16, 40, 79, .20);
}

/* ---- Panel de marca (estático) ---- */
.lm-brand {
  width: 42%;
  padding: 44px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #16324f 0%, #1f6feb 62%, #52a7ff 100%);
}
.lm-brand:before, .lm-brand:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.lm-brand:before { width: 260px; height: 260px; right: -90px; top: -90px; }
.lm-brand:after { width: 180px; height: 180px; left: -60px; bottom: -50px; }
.lm-logo { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; position: relative; z-index: 1; }
.lm-btitle { font-size: 26px; font-weight: 800; line-height: 1.25; position: relative; z-index: 1; }
.lm-bsub { font-size: 14px; color: rgba(255,255,255,.86); margin-top: 12px; line-height: 1.55; position: relative; z-index: 1; }
.lm-blist { margin-top: auto; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.lm-bli { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(255,255,255,.95); }
.lm-bck { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* ---- Panel del formulario ---- */
.lm-form { flex: 1; padding: 46px; display: flex; flex-direction: column; justify-content: center; }
.lm-formhead h1 { font-size: 24px; font-weight: 800; color: var(--lm-title); margin: 0; }
.lm-formhead p { font-size: 14px; color: var(--lm-text); margin: 8px 0 26px; }
.lm-form fieldset { border: none; margin: 0; padding: 0; min-width: 0; }

.lm-form .form-control {
  height: 48px; border: 1px solid #d8e2ef; border-radius: 12px; padding: 0 15px;
  font-size: 14px; color: #223548; box-shadow: none; background: #fff; transition: .18s ease;
}
.lm-form .form-control:focus { border-color: #85b6ff; box-shadow: 0 0 0 3px rgba(31,111,235,.14); }
.lm-form .form-group { margin-bottom: 16px; }

.lm-form .btn-primary, .lm-form .btn-primary:focus, .lm-form .btn-primary:active {
  height: 50px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #1f6feb 0%, #3f94ff 100%);
  font-size: 15px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 14px 26px rgba(31,111,235,.30); color: #fff; outline: none;
}
.lm-form .btn-primary:hover { background: linear-gradient(135deg, #1b63d1 0%, #2f86f0 100%); }

.lm-form a { color: var(--lm-primary); font-weight: 700; }
.lm-form a:hover { color: #144ea8; }
.lm-form .text-muted { color: #98a4b2 !important; font-size: 12px; }
.lm-form .alert-danger { border-radius: 12px; font-size: 13px; }

/* ---- Responsive: en móvil se muestra solo el formulario ---- */
@media (max-width: 820px) {
  .lm-brand { display: none; }
  .lm-stage { max-width: 440px; min-height: 0; }
  .lm-form { padding: 34px 26px; }
}