/* La imagen cubre toda la pantalla; los campos reales se ubican encima de los dibujados.
   --w es el ancho del lienzo (imagen 1536x1024 escalada tipo "cover"). */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#e6f4fa;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{--w:max(100vw,150vh);position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w)/1.5);
  transform:translate(-50%,-50%);background:url(/assets/img/login.png) center/100% 100% no-repeat}
.login-form{position:absolute;inset:0;margin:0}
.m-title{display:none}
.f{position:absolute;margin:0;font-family:inherit}
.f-user,.f-pass{
  background:#f6f9fc;border:0;outline:0;color:#17415f;border-radius:calc(var(--w)*.004);
  padding:0 calc(var(--w)*.004);font-size:max(14px,calc(var(--w)*.0128))}
.f-user::placeholder,.f-pass::placeholder{color:#7f9bb5;opacity:1}
.f-user{left:61.5%;top:43.65%;width:23.9%;height:4.9%}
.f-pass{left:61.5%;top:52.3%;width:22.6%;height:4.9%}
.f-eye{left:84.4%;top:52.2%;width:3.2%;height:5.1%;background:transparent;border:0;cursor:pointer;border-radius:6px}
.f-go{left:57.75%;top:60.25%;width:30.6%;height:5.9%;background:transparent;border:0;cursor:pointer;border-radius:calc(var(--w)*.0045);color:transparent}
.f-go span{position:absolute;opacity:0}
.f-go:hover{background:rgba(255,255,255,.12)}
.f-go:active{background:rgba(0,0,0,.08)}
.f-user:focus,.f-pass:focus{box-shadow:0 0 0 2px #3fae7a}
.f-eye:focus-visible,.f-go:focus-visible{outline:3px solid #1b5e8c;outline-offset:2px}
.f-err{left:57.75%;top:68.1%;width:30.6%;height:5.2%;background:#fff;color:#b3261e;display:flex;align-items:center;justify-content:center;
  font-size:max(13px,calc(var(--w)*.0095));border-radius:calc(var(--w)*.004);font-weight:600}

/* Pantallas casi cuadradas o verticales: el formulario dibujado quedaría recortado,
   así que se usa la imagen de fondo con una tarjeta de acceso real encima. */
@media (max-aspect-ratio:6/5){
  html,body{overflow:auto}
  body{background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),url(/assets/img/login.png) 22% center/cover no-repeat fixed}
  .stage{position:static;transform:none;width:auto;height:auto;min-height:100%;background:none;display:flex;align-items:center;justify-content:center;padding:24px}
  .login-form{position:static;display:flex;flex-direction:column;gap:14px;width:min(420px,100%);background:rgba(255,255,255,.95);
    padding:28px 24px;border-radius:18px;box-shadow:0 10px 40px rgba(27,94,140,.25)}
  .m-title{display:block;margin:0 0 6px;font-size:26px;line-height:1.15;color:#1f7a4d;text-align:center}
  .m-title small{display:block;margin-top:6px;font-size:15px;font-weight:500;color:#1b5e8c}
  .f{position:static;width:100%;height:auto}
  .f-user,.f-pass{height:50px;border:1px solid #cfe0ec;border-radius:10px;padding:0 14px;font-size:16px}
  .f-eye{display:none}
  .f-go{height:50px;background:#3fae7a;color:#fff;font-size:17px;font-weight:600}
  .f-go span{position:static;opacity:1}
  .f-go:hover{background:#369a6b}
  .f-err{height:auto;padding:10px;font-size:14px;background:#fdeceb}
}