/* Portada de inicio de sesión: misma de la app VENTAS (EP SUNSUCA) */
/* ---------- Login overlay (portada EP SUNSUCA) ----------
   Las medidas internas de la tarjeta van en cqw (relativas al ancho de la propia tarjeta),
   así se ve igual en escritorio y en el celular. */
#login{
  --login-bg:url("../img/login_fondo.jpg");--accent:#7FD0EC;
  position:fixed;inset:0;background:#060f16;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;z-index:999;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
}
.login-stage{position:relative;flex:none;width:min(100vw,calc(100vh*1500/844));aspect-ratio:1500/844;
  background:var(--login-bg) center/cover no-repeat;container-type:inline-size;}
/* logo y lema de SUNSUCA (el logo es una pieza con fondo negro: "screen" lo funde con la imagen) */
.login-logo{position:absolute;left:6.64%;top:18.2%;width:36.5%;height:auto;mix-blend-mode:screen;}
.login-tag{position:absolute;left:7%;top:55.6%;margin:0;font-size:2.62cqw;line-height:1.28;font-weight:400;color:#c3ccd4;}
.login-tag b{font-weight:600;color:#3b93b3;}
.login-card{
  position:absolute;left:59.04%;top:20.18%;width:26.94%;min-height:58.6%;display:flex;container-type:inline-size;
  border-radius:24px;background:rgba(5,14,22,.20);border:1px solid rgba(200,235,248,.38);box-shadow:none;
}
.lc-inner{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:6cqw 8.9cqw;}
.login-card h1{margin:0 0 2.6cqw;font-size:10.8cqw;font-weight:700;letter-spacing:.02em;color:var(--accent);}
.lc-welcome{font-size:6.3cqw;font-weight:500;color:#eef6fa;margin-bottom:4.1cqw;}
.lc-sub{font-size:5.4cqw;font-weight:500;color:#eef6fa;margin-bottom:5.6cqw;}
.lf{position:relative;margin-bottom:4.3cqw;}
.lf > svg{position:absolute;left:4.1cqw;top:50%;transform:translateY(-50%);width:5.9cqw;height:5.9cqw;
  stroke:#d7eef7;fill:none;stroke-width:1.6;pointer-events:none;}
.lf input{width:100%;height:12.2cqw;border-radius:4.5cqw;border:2px solid rgba(190,230,245,.85);background:rgba(6,18,28,.38);
  color:#fff;font-family:inherit;font-size:4.8cqw;padding:0 4.5cqw 0 13.4cqw;outline:none;}
.lf.has-eye input{padding-right:13.4cqw;}
.lf input::placeholder{color:rgba(232,243,248,.82);}
.lf input:focus{border-color:#c8ecf8;background:rgba(8,24,34,.5);}
.login-card:has(#lgMsg:not(:empty)) .lf input{border-color:#ff8d98;background:rgba(255,107,120,.12);}
.eye{position:absolute;right:2.6cqw;top:50%;transform:translateY(-50%);width:8.9cqw;height:8.9cqw;border:0;border-radius:3cqw;
  background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.eye:hover{background:rgba(150,211,232,.18);}
.eye svg{width:6.3cqw;height:6.3cqw;stroke:#d7eef7;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.eye .ico-on{display:none;}
.eye.shown .ico-off{display:none;}
.eye.shown .ico-on{display:block;}
.btn-ingresar{width:100%;height:12.6cqw;border:0;border-radius:3.7cqw;cursor:pointer;font-family:inherit;font-size:5cqw;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0a2a3a;
  background:linear-gradient(180deg,#a9dcee,#8cccdf);opacity:.92;}
.btn-ingresar:hover{filter:brightness(1.06);}
.btn-ingresar:disabled{opacity:.7;cursor:default;filter:none;}
.lc-hint{margin:4.5cqw 0 0;font-size:3.3cqw;line-height:1.5;color:rgba(240,247,250,.92);}
/* sin tarjeta de fondo: la sombra suave mantiene legible el texto sobre la imagen */
.login-card h1,.lc-welcome,.lc-sub,.lc-hint,.lf input{text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.85);}
@keyframes shakeErr{0%,100%{transform:translateX(0);}20%{transform:translateX(-2.6cqw);}40%{transform:translateX(2.6cqw);}60%{transform:translateX(-1.8cqw);}80%{transform:translateX(1.8cqw);}}
@media (max-width:820px), (max-aspect-ratio:5/4){
  #loginOverlay{align-items:flex-start;}
  .login-stage{width:100%;aspect-ratio:auto;min-height:100%;background:none;display:flex;flex-direction:column;align-items:center;
    padding:18px 16px 28px;container-type:normal;}
  .login-logo{position:static;width:min(78vw,330px);}
  .login-tag{position:static;font-size:15px;text-align:center;margin:6px 0 20px;}
  .login-card{position:static;width:100%;max-width:400px;min-height:0;}
}
#lgMsg{min-height:0;margin:-1.5cqw 0 3cqw;font-size:3.6cqw;line-height:1.35;color:#ffb3ba;font-weight:600}
#lgMsg:empty{display:none}
#login[hidden]{display:none!important}
#login *{box-sizing:border-box}
html:has(#login:not([hidden])){overflow:hidden}