/* ==========================================================
   TARSIS | Login  v2  (pantalla dividida)
   Paleta: #062B60 azul · #F0C04D amarillo · #A8C0D2 celeste
           #CAD1DD gris azulado · #FEFDFC blanco cálido
   ========================================================== */
:root{
  --navy:#062B60;
  --navy-2:#0B3C80;
  --navy-3:#164F99;
  --deep:#041229;
  --gold:#F0C04D;
  --gold-dark:#E2AE30;
  --sky:#A8C0D2;
  --mist:#CAD1DD;
  --paper:#FEFDFC;
  --ink:#0A1F3F;
  --muted:#5D6B82;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--paper);
}

/* ---------- Estructura: escena | panel ---------- */
.login-page{
  display:flex;
  min-height:100vh;
}

/* ---------- Escena (izquierda) ---------- */
.login-scene{
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:100vh;
  overflow:hidden;
  color:var(--paper);
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 62%, var(--navy-3) 100%);
}
.scene-swoosh{
  position:absolute; top:0; right:0;
  width:min(80%,720px); height:auto;
  pointer-events:none;
}
.scene-copy{
  position:relative; z-index:2;
  padding:clamp(40px,6vw,90px) clamp(28px,4vw,72px) 0;
  max-width:min(640px,100%);
}
.scene-copy::before{
  content:"";
  display:block;
  width:56px; height:5px; border-radius:3px;
  background:var(--gold);
  margin-bottom:28px;
}
.scene-copy h1{
  margin:0 0 18px;
  font-size:clamp(1.85rem,3vw,3.1rem);
  font-weight:600; line-height:1.15; letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.scene-copy p{
  margin:0; max-width:420px;
  font-size:.98rem; line-height:1.7;
  color:rgba(202,209,221,.9);
}
.scene-art{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:44%;
  pointer-events:none;
}
.scene-truck{
  animation:drive 38s linear infinite;
}
@keyframes drive{
  from{ transform:translateX(-460px); }
  to  { transform:translateX(980px); }
}

/* ---------- Panel de acceso (derecha) ---------- */
.login-panel{
  position:relative; z-index:3;
  flex:0 0 clamp(480px,40vw,650px);
  min-width:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:40px clamp(32px,3.5vw,58px) 28px;
  background:var(--paper);
  border-left:6px solid var(--gold);
  box-shadow:-30px 0 60px -20px rgba(2,12,32,.55);
}
.panel-main{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:480px; margin:0 auto;
}
.login-logo{
  display:block;
  height:76px; width:auto; max-width:100%;
  margin:0 0 36px -4px;
  mix-blend-mode:multiply;
}
.login-header h2{
  margin:0 0 8px;
  font-size:1.9rem; font-weight:600; color:var(--navy);
  letter-spacing:-.02em;
}
.login-header p{
  margin:0 0 32px;
  font-size:.92rem; color:var(--muted);
}

.panel-main label{
  display:block;
  margin-bottom:8px;
  font-size:.82rem; font-weight:600; color:var(--navy);
}
.panel-main .form-group{ margin-bottom:22px; }

.input-group-custom{ position:relative; }
.input-group-custom > i:first-child{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:1.2rem; color:var(--sky);
  pointer-events:none; transition:color .2s;
}
.input-group-custom .form-control{
  height:54px;
  padding:0 50px 0 48px;
  font-family:inherit; font-size:.95rem; color:var(--ink);
  background:#F2F5F9;
  border:0;
  border-bottom:2px solid var(--mist);
  border-radius:10px 10px 0 0;
  transition:border-color .2s, background .2s;
}
.input-group-custom .form-control::placeholder{ color:#97A3B7; }
.input-group-custom .form-control:focus{
  background:#E9EEF5;
  border-bottom-color:var(--navy);
  box-shadow:none; outline:0;
}
.input-group-custom:focus-within > i:first-child{ color:var(--navy); }
.input-group-custom .form-control:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px #F2F5F9 inset;
  -webkit-text-fill-color:var(--ink);
}

.show-password{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:10px; background:transparent;
  color:var(--muted); font-size:1.2rem; cursor:pointer;
}
.show-password:hover{ color:var(--navy); background:rgba(6,43,96,.07); }
.show-password:focus-visible{ outline:2px solid var(--navy); }

.login-btn{
  margin-top:8px;
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px 0 26px;
  font-family:inherit; font-size:.96rem; font-weight:600;
  color:var(--paper);
  background:var(--navy);
  border:0; border-radius:14px;
  box-shadow:0 14px 26px -14px rgba(6,43,96,.9);
  transition:background .2s, color .2s, transform .15s;
}
.login-btn i{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--navy);
  background:var(--gold); border-radius:10px;
  transition:transform .2s;
}
.login-btn:hover{ color:var(--paper); background:var(--navy-2); transform:translateY(-1px); }
.login-btn:hover i{ transform:translateX(3px); }
.login-btn:focus{ outline:0; box-shadow:0 0 0 4px rgba(240,192,77,.5); }

.login-footer{
  width:100%; max-width:480px; margin:28px auto 0;
  padding-top:18px;
  border-top:1px solid var(--mist);
}
.login-footer p{ margin:0 0 2px; font-size:.75rem; color:var(--muted); }
.login-footer span{ font-size:.7rem; color:#8D99AD; }

/* ---------- Pantallas de escritorio más compactas ---------- */
@media (min-width:992px) and (max-width:1199px){
  .login-panel{flex-basis:clamp(440px,43vw,520px);padding-left:28px;padding-right:28px;}
  .scene-copy{padding:52px 30px 0;}
  .scene-copy h1{font-size:clamp(1.75rem,3vw,2.5rem);}
  .scene-copy p{font-size:.9rem;}
  .scene-art{height:40%;}
}

/* ---------- Tablet / móvil ---------- */
@media (max-width:991px){
  .login-page{ flex-direction:column; }
  .login-scene{ flex:none; min-height:300px; height:300px; }
  .scene-copy{ padding:32px 28px 0; }
  .scene-copy::before{ margin-bottom:16px; }
  .scene-copy h1{ font-size:1.55rem; margin:0; }
  .scene-copy p{ display:none; }
  .scene-art{ height:52%; }
  .login-panel{
    flex:1 0 auto; min-height:0;
    border-left:0; border-top:6px solid var(--gold);
    box-shadow:0 -20px 40px -20px rgba(2,12,32,.5);
    padding:32px 24px 24px;
  }
  .panel-main,.login-footer{max-width:480px;}
  .login-logo{ height:62px; margin-bottom:28px; }
}

@media (max-width:575px){
  .login-scene{height:270px;min-height:270px;}
  .scene-copy{padding:26px 22px 0;}
  .scene-copy h1{font-size:clamp(1.35rem,6vw,1.55rem);max-width:340px;}
  .scene-art{height:48%;}
  .login-panel{padding:28px 22px 24px;}
  .login-header h2{font-size:1.7rem;}
}

@media (prefers-reduced-motion:reduce){
  .scene-truck{ animation:none; transform:translateX(120px); }
  .login-btn, .login-btn i{ transition:none; }
}