/* ════════════════════════════════════════
   Portal Distribuidores FDR · Login split-screen
   (mismo lenguaje visual que el ERP)
   ════════════════════════════════════════ */

.ls-screen{
  display:flex; min-height:100vh; overflow-x:hidden;
  font-family:'Montserrat',-apple-system,sans-serif;
}

/* ══ PANEL IZQUIERDO ══ */
.ls-panel-left{
  flex:1; position:relative; overflow:hidden; min-height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:2.5rem 3rem;
  background:linear-gradient(145deg,#06164a 0%,#0e2670 55%,#1a3fa0 100%);
}
.ls-circle-1{
  position:absolute; top:-100px; right:-60px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,30,36,.2) 0%,transparent 65%);
  pointer-events:none;
}
.ls-circle-2{
  position:absolute; bottom:-120px; left:-80px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,30,36,.12) 0%,transparent 65%);
  pointer-events:none;
}
.ls-texture{
  position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(-55deg,
    rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 44px);
}

/* Slideshow */
#login-slideshow{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
@keyframes floatA{0%,100%{transform:translateY(0) scale(1.04) rotate(-.5deg)}50%{transform:translateY(-18px) scale(1.06) rotate(.5deg)}}
@keyframes floatB{0%,100%{transform:translateY(-10px) scale(1.03) rotate(.4deg)}50%{transform:translateY(10px) scale(1.05) rotate(-.4deg)}}
@keyframes floatC{0%,100%{transform:translateY(6px) scale(1.04) rotate(.3deg)}50%{transform:translateY(-14px) scale(1.06) rotate(-.3deg)}}
.ls-img{
  position:absolute; width:44%; height:auto; object-fit:contain;
  opacity:0; transition:opacity 1.2s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55));
  will-change:transform,opacity;
}
.ls-img.active{opacity:1}
.ls-img.float-a{animation:floatA 5.5s ease-in-out infinite}
.ls-img.float-b{animation:floatB 6.2s ease-in-out infinite}
.ls-img.float-c{animation:floatC 4.8s ease-in-out infinite}

/* Logo arriba */
.ls-top{position:relative; z-index:2; display:flex; align-items:center}
.ls-logo-box img{
  height:100px; width:auto; max-width:340px;
  display:block; object-fit:contain;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.3));
}

/* Texto abajo */
.ls-bottom{position:relative; z-index:2}
.ls-tag{
  font-size:.56rem; font-weight:700; letter-spacing:.35em;
  color:rgba(255,255,255,.4); text-transform:uppercase; margin-bottom:.65rem;
}
.ls-headline{
  font-size:2.1rem; font-weight:900; line-height:1.15;
  color:#fff; letter-spacing:-.02em; margin:0;
}
.ls-headline em{font-style:normal; color:#e31e24}
.ls-dots{display:flex; gap:.4rem; margin-top:1.6rem; align-items:center}
.ls-dot-a{width:28px; height:3px; background:#e31e24; border-radius:2px}
.ls-dot-b{width:7px; height:3px; background:rgba(255,255,255,.22); border-radius:2px}

/* ══ PANEL DERECHO ══ */
.ls-panel-right{
  width:480px; min-width:480px; background:#f2f4f8;
  display:flex; flex-direction:column; position:relative; overflow-y:auto;
}
.ls-top-bar{
  height:5px; flex-shrink:0;
  background:linear-gradient(90deg,#e31e24 40%,#1a3fa0 100%);
}
.ls-right-logo{
  background:#fff; border-bottom:1px solid #e2e6ef;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 2.5rem 1.6rem; flex-shrink:0;
}
.ls-right-logo img{
  height:120px; width:auto; max-width:320px; object-fit:contain;
  transition:transform .5s ease;
}
.ls-right-logo img:hover{transform:scale(1.03)}
.ls-brand-tag{
  margin-top:.8rem; font-size:.56rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:#c4c9d4;
}

.ls-form-wrap{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem 3rem;
}
.ls-form-inner{width:100%; max-width:340px}

.ls-form-title{
  font-size:1.45rem; font-weight:900;
  color:#0e2670; letter-spacing:-.01em; margin:0 0 .3rem;
}
.ls-form-sub{font-size:.8rem; color:#6b7280; margin:0 0 1.6rem}

.ls-divider{display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem}
.ls-divider-line{flex:1; height:1px; background:#e2e6ef}
.ls-divider-dot{width:6px; height:6px; border-radius:50%; background:#e31e24}

.ls-field{margin-bottom:1rem}
.ls-field label{
  display:flex; align-items:center; gap:.4rem;
  font-size:.6rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#1a3fa0; margin-bottom:.38rem;
}
.ls-field label svg{opacity:.6}
.ls-input-wrap{position:relative}
.ls-input{
  width:100%; padding:.72rem 1rem;
  background:#fff; border:1.5px solid #e2e6ef; border-radius:10px;
  color:#111827; font-family:'Montserrat',sans-serif; font-size:.86rem;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.ls-input:focus{border-color:#1a3fa0; box-shadow:0 0 0 3px rgba(26,63,160,.1)}
.ls-input::placeholder{color:#d1d5db}
.ls-eye{
  position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:#c4c9d4;
  padding:0; transition:color .2s; display:flex;
}
.ls-eye:hover{color:#1a3fa0}

/* Fila de 2 campos (registro) */
.ls-row{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}

/* Texto de ayuda bajo un campo */
.ls-hint{
  display:block; margin-top:.3rem;
  font-size:.66rem; color:#9aa2b1; font-weight:500; line-height:1.35;
}

/* Botón principal */
.ls-btn{
  width:100%; padding:.95rem 1.5rem; margin-top:.4rem;
  background:#e31e24; border:none; border-radius:10px; color:#fff;
  font-family:'Montserrat',sans-serif; font-size:.8rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  box-shadow:0 6px 22px rgba(227,30,36,.38);
  transition:background .18s, box-shadow .18s, transform .12s;
}
.ls-btn:hover{background:#c8181e; box-shadow:0 10px 28px rgba(227,30,36,.45); transform:translateY(-1px)}
.ls-btn:active{transform:scale(.97)}
.ls-btn:disabled{opacity:.6; cursor:not-allowed; transform:none}

/* Cambiar login/registro */
.ls-switch{
  text-align:center; margin-top:1.2rem;
  font-size:.75rem; color:#6b7280; font-weight:600;
}
.ls-switch a{color:#1a3fa0; font-weight:800; cursor:pointer; text-decoration:none}
.ls-switch a:hover{color:#e31e24}

/* Mensajes */
.auth-msg{
  border-radius:0 8px 8px 0; padding:.65rem 1rem;
  font-size:.78rem; margin-bottom:1.1rem; font-weight:600;
}
.auth-msg.err{background:#fff0f0; border-left:3px solid #e31e24; color:#e31e24}
.auth-msg.ok{background:#eefaf1; border-left:3px solid #2fa84f; color:#227a3a}

.ls-right-footer{
  text-align:center; padding:1.1rem;
  border-top:1px solid #e2e6ef; flex-shrink:0;
}
.ls-right-footer span{
  font-size:.56rem; font-weight:700; letter-spacing:.22em;
  color:#c4c9d4; text-transform:uppercase;
}

/* ══ RESPONSIVE ══ */
@media (max-width:900px){
  .ls-panel-left{display:none !important}
  .ls-panel-right{width:100% !important; min-width:0 !important; min-height:100vh}
  .ls-form-wrap{padding:2rem 1.5rem}
  .ls-right-logo{padding:1.6rem 1.5rem 1.2rem}
  .ls-right-logo img{height:90px}
}