/* Pantalla de acceso de usuarios */
.login-page{background:var(--navy-900)}
.login{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px var(--gutter);overflow:hidden;
  background:radial-gradient(circle at 50% 30%,var(--navy-800),var(--navy-900) 70%)}
.login-bars{position:absolute;right:-6%;bottom:-10%;width:min(60vw,520px);height:85%;display:flex;gap:7%;align-items:flex-end;opacity:.08;pointer-events:none}
.login-bars i{flex:1;border-radius:var(--radius-pill);transform:skewX(-20deg);background:var(--coral)}
.login-bars i:nth-child(1){height:40%}.login-bars i:nth-child(2){height:65%}.login-bars i:nth-child(3){height:100%;background:var(--cream)}

.login-card{position:relative;width:100%;max-width:420px;background:var(--cream);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column}
.login-logo{align-self:center;background:var(--navy-900);border-radius:var(--radius);padding:4px 18px;margin-bottom:24px}
.login-logo img{height:72px;width:auto}
.login-card .kicker{margin-bottom:6px}
.login-card h1{font-size:2rem;text-transform:uppercase;font-weight:900;margin-bottom:6px}
.login-card .muted{font-size:.95rem;margin-bottom:22px}
.login-card label{font:600 .76rem var(--font-display);text-transform:uppercase;letter-spacing:.12em;color:var(--navy-700);margin:0 0 6px}
.login-card input{font:400 1rem var(--font-body);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;width:100%;margin-bottom:16px}
.login-card input:focus{outline:none;border-color:var(--coral)}
.pass{position:relative}
.pass input{padding-right:84px}
.pass button{position:absolute;right:6px;top:6px;height:38px;padding:0 12px;border:0;border-radius:9px;background:var(--cream-200);color:var(--navy-900);
  font:600 .8rem var(--font-display);cursor:pointer}
.login-card .btn{justify-content:center;margin-top:4px}
.login-error{margin:-4px 0 14px;color:#B3261E;font-weight:700;font-size:.9rem}
.login-foot{margin:20px 0 6px;text-align:center;font-size:.9rem;color:var(--muted)}
.login-foot a{color:var(--navy-900);font-weight:700}
.login-back{align-self:center;font:600 .78rem var(--font-display);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-decoration:none;margin-top:8px}
.login-back:hover{color:var(--coral-600)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (max-width:420px){.login-card{padding:26px 20px}.login-card h1{font-size:1.7rem}}