/* =====================================================================
   BSIM-Pro · Acceso
   Identidad "sala de control": grafito, azul Cherenkov, retícula técnica,
   tipografía de ingeniería (Space Grotesk / IBM Plex).
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --g-950:#070B10; --g-900:#0C131B; --g-800:#121C26; --g-700:#1A2733; --g-600:#263646;
  --ck-600:#3D5BFF; --ck-500:#4C7DFF; --ck-400:#8AB4FF; --ck-100:#E3ECFF; --ck-50:#F1F5FF;
  --amber:#FFB020; --green:#22C55E; --red:#EF4444;
  --ink:#0E1620; --muted:#5B6B7C; --line:#D9E0E7; --bg:#EEF1F4;
  --f-head:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
html,body{height:100%}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}

.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)}

/* ---------- Lado de marca ---------- */
.lp-brand{position:relative;overflow:hidden;color:#E6EDF5;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;
  background:
    linear-gradient(rgba(138,180,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(138,180,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(155deg,var(--g-800),var(--g-950) 70%)}
.lp-grid{position:absolute;inset:0;width:100%;height:100%}
.lp-brand-in{position:relative;z-index:1;max-width:540px}
.lp-logo{display:flex;align-items:center;gap:18px;margin-bottom:40px}
.lp-logo img{width:76px;height:76px;border-radius:18px;box-shadow:0 0 0 1px rgba(138,180,255,.25),0 14px 40px rgba(61,91,255,.35)}
.lp-logo b{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.lp-logo b i{font-style:normal;font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--ck-400);border:1.5px solid var(--ck-500);border-radius:5px;padding:3px 7px 2px}
.lp-logo span{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#7F93AA;margin-top:9px}
.lp-brand h2{font-family:var(--f-head);font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin-bottom:16px;color:#fff}
.lp-brand h2 em{font-style:normal;color:var(--ck-400);text-shadow:0 0 24px rgba(76,125,255,.55)}
.lp-brand p{font-size:15.5px;line-height:1.65;color:#9DB0C4;max-width:480px}
.lp-points{list-style:none;margin-top:28px;display:grid;gap:10px}
.lp-points li{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:13px;font-weight:500;color:#C9D6E4;letter-spacing:.01em}
.lp-points i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18),0 0 10px rgba(34,197,94,.7);flex-shrink:0}
.lp-aviso{margin-top:32px;display:flex;gap:12px;align-items:flex-start;max-width:520px;padding:14px 16px;border-radius:8px;
  background:rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.35);border-left:4px solid var(--amber);font-size:12.5px;line-height:1.55;color:#C9D6E4}
.lp-aviso svg{width:20px;height:20px;color:var(--amber);flex-shrink:0;margin-top:1px}
.lp-aviso b{color:#fff;font-weight:600}
.lp-by{position:absolute;left:64px;bottom:30px;z-index:1;display:flex;align-items:center;gap:11px;font-size:11px;color:#6E8197;line-height:1.35}
.lp-by img{width:36px;height:36px}
.lp-by b{color:#B7C5D4;font-weight:600}

/* ---------- Formulario ---------- */
.lp-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;
  background:linear-gradient(rgba(14,22,32,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(14,22,32,.035) 1px,transparent 1px) 0 0/24px 24px,var(--bg)}
.login-box{width:100%;max-width:390px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 30px 24px;box-shadow:0 1px 2px rgba(14,22,32,.05),0 18px 40px rgba(14,22,32,.08);position:relative}
.login-box::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:10px 10px 0 0;background:linear-gradient(90deg,var(--ck-600),var(--ck-400))}
.login-box .logo{display:none;width:72px;height:72px;border-radius:16px;margin:0 auto 14px}
.tag-sys{display:inline-block;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ck-600);background:var(--ck-50);border:1px solid var(--ck-100);border-radius:4px;padding:3px 8px;margin-bottom:14px}
.login-box h1{font-family:var(--f-head);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.subtitle{color:var(--muted);font-size:14px;margin:0 0 22px}
.subtitle b{color:var(--ink);font-weight:600}
form{margin:0}
label{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#4A5A6B;margin:16px 0 7px}
input{width:100%;padding:12px 13px;border-radius:6px;border:1px solid #C9D3DD;background:#FBFCFD;font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
input:focus{outline:none;border-color:var(--ck-500);background:#fff;box-shadow:0 0 0 3px rgba(76,125,255,.18)}
.password-container{position:relative}
.password-container input{padding-right:46px}
.toggle-password{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:5px;color:#7B8A99;cursor:pointer}
.toggle-password:hover{background:var(--ck-50);color:var(--ck-600)}
.toggle-password svg{width:18px;height:18px}
button{width:100%;margin-top:24px;padding:13px;border:none;border-radius:6px;cursor:pointer;font-family:var(--f-head);font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:var(--g-800);box-shadow:inset 0 -2px 0 var(--ck-500),0 6px 16px rgba(14,22,32,.18);transition:background .15s,box-shadow .15s,transform .12s;display:flex;align-items:center;justify-content:center;gap:10px}
button::after{content:"→";font-family:var(--f-mono);color:var(--ck-400)}
button:hover{background:var(--g-700);box-shadow:inset 0 -2px 0 var(--ck-400),0 10px 22px rgba(14,22,32,.24);transform:translateY(-1px)}
.error{display:flex;gap:10px;align-items:center;background:#FEF2F2;color:#9F1D1D;border:1px solid #FBCACA;border-left:4px solid var(--red);padding:10px 13px;border-radius:6px;font-size:13.5px;margin-bottom:4px}
.error::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);flex-shrink:0}
.aviso-mini{margin-top:20px;padding:10px 12px;border-radius:6px;background:#FFF8EB;border:1px solid #F7DDA6;border-left:3px solid var(--amber);color:#6B4A0C;font-size:12px;line-height:1.5}
.aviso-mini b{color:#4A3307}
.footer{text-align:center;margin-top:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:#8A97A5}

/* ---------- Tablet y celular ---------- */
@media (max-width:900px){
  .login-page{grid-template-columns:1fr}
  .lp-brand{display:none}
  .lp-form{padding:32px 16px;align-items:flex-start;background:linear-gradient(180deg,var(--g-800) 0,var(--g-950) 220px,var(--bg) 220px)}
  .login-box{padding:26px 22px 20px}
  .login-box .logo{display:block}
  .login-box h1,.subtitle,.tag-sys-wrap{text-align:center}
  input{font-size:16px}
}