/* ============================================================
   LOGIN — versión "Sobrio"
   styles/login.css (se carga después de styles.css y responsive.css)

   Mismo esquema de antes (imagen a la izquierda, formulario a la
   derecha) con menos ruido: ciudad en silueta, ruta punteada entre dos
   pines y un formulario más grande. Todo va bajo .lg para no chocar con
   las reglas viejas de .login-*.
   ============================================================ */
.login-screen.lg{background:#fff;font-family:Urbanist,system-ui,sans-serif}
.lg .lg-izq{flex:1.15;min-width:0;background:#0d1b2e;position:relative;overflow:hidden;color:#fff;padding:48px}
.lg .lg-titulo{position:relative;z-index:2}
.lg .lg-titulo h2{margin:0;font-size:44px;font-weight:900;letter-spacing:-.5px;line-height:1.05;color:#fff}
.lg .lg-titulo h2 em{font-style:normal;color:#38CEA6}
.lg .lg-titulo p{margin:10px 0 0;color:#a9b6c6;font-size:16px;font-weight:600}
.lg .lg-ciudad{position:absolute;left:0;right:0;bottom:0;width:100%;height:68%;object-fit:cover;object-position:center bottom;display:block}

.lg .lg-der{width:520px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:40px;overflow-y:auto}
.lg .lg-form{width:100%;max-width:380px}
.lg .lg-marca{display:flex;align-items:center;gap:10px;margin-bottom:36px}
.lg .lg-logo{width:52px;height:52px;border-radius:10px;object-fit:contain;background:#fff;display:block}
.lg .lg-marca span{display:block;font-weight:900;font-size:22px;color:#0f111e;line-height:1.1}
.lg .lg-marca small{display:block;font-weight:700;font-size:12px;color:#8a97a8;letter-spacing:.08em;text-transform:uppercase}
.lg h1{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.3px;color:#0f111e}
.lg .lg-sub{margin:0 0 28px;color:#5b6b7f;font-size:15px}
.lg .lg-campo{position:relative;margin-bottom:18px}
.lg .lg-campo label{display:block;margin:0 0 6px;font-weight:700;font-size:14px;color:#0f111e}
.lg .lg-campo input{width:100%;height:48px;border:1.5px solid #dfe5ec;border-radius:10px;padding:0 14px;font:500 15px Urbanist,system-ui,sans-serif;color:#0f111e;background:#fff;box-sizing:border-box}
.lg .lg-campo input:focus{outline:none;border-color:#38CEA6;box-shadow:0 0 0 4px rgba(56,206,166,.18)}
.lg .lg-campo input.lg-mal{border-color:#D71D5C}
.lg #loginPass{padding-right:84px}
.lg .lg-ver{position:absolute;right:8px;bottom:8px;height:32px;border:0;background:none;color:#5b6b7f;font:700 13px Urbanist,system-ui,sans-serif;cursor:pointer;padding:0 8px;border-radius:6px}
.lg .lg-ver:hover{background:#f5f7f9}
.lg .lg-recordar{display:flex;align-items:center;gap:8px;margin:-4px 0 22px;font-weight:600;font-size:14px;color:#5b6b7f;cursor:pointer}
.lg .lg-recordar input{width:16px;height:16px;accent-color:#1f9e7d;margin:0}
/* El botón siempre se ve activo: si falta algo, avisa al darle. */
.lg .login-btn.lg-btn,.lg .login-btn.lg-btn.ready{height:50px;padding:0;margin:0;border-radius:10px;background:#0d1b2e;color:#fff;font:800 16px Urbanist,system-ui,sans-serif;letter-spacing:0;box-shadow:none}
.lg .login-btn.lg-btn:hover{background:#13284a}
.lg .login-btn.lg-btn:disabled{opacity:.7;cursor:default}
.lg .login-error{text-align:left;font-size:14px}
.lg .lg-pie{margin:28px 0 0;color:#8a97a8;font-size:12.5px}

html[data-theme=dark] .login-screen.lg,html[data-theme=dark] .lg .lg-der{background:#0f1520}
html[data-theme=dark] .lg h1,html[data-theme=dark] .lg .lg-marca span,html[data-theme=dark] .lg .lg-campo label{color:#e8edf3}
html[data-theme=dark] .lg .lg-campo input{background:#141b28;border-color:#2a3446;color:#e8edf3}

@media (max-width:900px){.lg .lg-der{width:460px}}
@media (max-width:768px){
  .lg .lg-izq{display:none}
  .lg .lg-der{width:100%;padding:32px 16px}
}