/* Login del panel (templates/login.html): pantalla dividida, marca índigo a la izquierda y formulario a la derecha.
   Recuperar contraseña sigue con acceso.css. Siempre claro, como el mockup (mockups-login/Login2.dc.html). */
:root{color-scheme:light;
  --lg-brand:#1e1b4b; --lg-brand-soft:#c7d2fe;
  --lg-bg:#fafafa; --lg-field:#fff; --lg-ink:#18181b; --lg-mut:#52525b; --lg-mut2:#71717a; --lg-check:#3f3f46;
  --lg-line:#e4e4e7; --lg-border:#d4d4d8; --lg-accent:#4f46e5; --lg-accent-hover:#4338ca; --lg-ring:rgba(79,70,229,.18);
  --lg-err:#b42318; --lg-err-ring:rgba(180,35,24,.14);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font:16px/1.45 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--lg-bg);color:var(--lg-ink);-webkit-font-smoothing:antialiased}

.lg{min-height:100vh;min-height:100dvh;display:flex}

/* --- marca --- */
.lg-brand{position:relative;overflow:hidden;flex:0 0 55%;background:var(--lg-brand);color:#fff;padding:48px 56px;display:flex;flex-direction:column}
.lg-lines{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;pointer-events:none}
.lg-logo{position:relative;display:flex;align-items:center;gap:12px}
.lg-mono{width:40px;height:40px;flex:none;border-radius:11px;background:#fff;color:var(--lg-brand);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.lg-name{font-size:17px;font-weight:600}
.lg-name span{font-weight:400;color:var(--lg-brand-soft)}
.lg-space{flex:1}
.lg-claim{position:relative;max-width:460px}
.lg-title{margin:0;font-size:46px;line-height:1.08;font-weight:600;letter-spacing:-1.4px;overflow-wrap:break-word}
.lg-sub{margin:18px 0 0;font-size:17px;line-height:1.5;color:var(--lg-brand-soft)}

/* --- formulario --- */
.lg-main{flex:1 1 45%;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.lg-box{width:100%;max-width:360px}
h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.6px}
.lg-lead{margin:8px 0 0;font-size:15px;color:var(--lg-mut)}
.lg-form{margin-top:28px}
.lg-label{display:block;font-size:14px;font-weight:600}
.lg-pass{position:relative;margin-top:8px}
.lg-pass input{width:100%;height:50px;border-radius:10px;border:1px solid var(--lg-border);background:var(--lg-field);color:var(--lg-ink);padding:0 52px 0 14px;font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.lg-pass input:focus{border-color:var(--lg-accent);box-shadow:0 0 0 3px var(--lg-ring)}
.lg-pass input.calm:focus{border-color:var(--lg-border);box-shadow:none}   /* al cargar: cursor en el campo, sin borde de foco */
.lg-pass input[aria-invalid="true"]{border-color:var(--lg-err)}
.lg-pass input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--lg-err-ring)}
.lg-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--lg-mut);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lg-eye:hover{color:var(--lg-ink)}
.lg-eye:focus-visible{outline:2px solid var(--lg-accent);outline-offset:-2px}
.lg-err{margin-top:8px;font-size:14px;color:var(--lg-err)}
.lg-check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;font-size:14px;color:var(--lg-check);cursor:pointer}
.lg-check input{width:18px;height:18px;margin:0;accent-color:var(--lg-accent)}
.lg-submit{width:100%;height:50px;margin-top:14px;border-radius:10px;border:0;background:var(--lg-accent);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.lg-submit:hover{background:var(--lg-accent-hover)}
.lg-submit:focus-visible{outline:2px solid var(--lg-accent);outline-offset:2px}
.lg-submit:disabled{opacity:.7;cursor:default}
.lg-forgot{text-align:center;margin-top:16px}
.lg-forgot a{font-size:14px;color:var(--lg-mut);text-decoration:none}
.lg-forgot a:hover{color:var(--lg-ink)}
.lg-foot{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--lg-line);font-size:13px;color:var(--lg-mut2)}
code{background:rgba(127,127,127,.15);padding:2px 6px;border-radius:6px;font-size:13px}

/* --- celular y tablet chica: franja de marca arriba --- */
@media (max-width: 899px){
  .lg{flex-direction:column}
  .lg-brand{flex:none;padding:24px 20px 28px}
  .lg-lines{height:100%}
  .lg-space{flex:none;height:28px}
  .lg-title{font-size:28px;letter-spacing:-.8px}
  .lg-sub{display:none}
  .lg-main{flex:1;align-items:flex-start;padding:32px 16px 40px}
}