/* Versión web: pantalla de inicio de sesión y botón de salida.
   Usa las variables de color y fuente del dashboard (plantilla_dashboard.html). */
body.bloqueado .wrap{display:none;}
body:not(.bloqueado) .login{display:none;}

.login{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;
  background:
    radial-gradient(circle at 15% 20%,rgba(0,168,228,.35),transparent 45%),
    radial-gradient(circle at 85% 85%,rgba(183,195,0,.18),transparent 40%),
    linear-gradient(135deg,#002A4A 0%,#003C68 45%,var(--corp-azuloscuro) 100%);
}
.login-card{
  width:100%;max-width:400px;background:var(--surface);border-radius:18px;
  padding:32px 28px 26px;box-shadow:0 24px 60px rgba(0,20,40,.45);
  display:flex;flex-direction:column;gap:16px;
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.login-brand h1{color:var(--ink);font-size:19px;}
.login-brand p{margin:2px 0 0;font-size:12.5px;color:var(--ink-faint);}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.login-card input{
  font-size:15px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.login-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.login-card button{
  margin-top:4px;min-height:44px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(120deg,#003C68,var(--corp-azuloscuro));color:#fff;
  font-size:15px;font-weight:600;letter-spacing:.2px;transition:filter .15s;
}
.login-card button:hover{filter:brightness(1.12);}
.login-card button:disabled{filter:grayscale(.4) brightness(1.2);cursor:progress;}
.login-msg{margin:0;min-height:18px;font-size:13px;color:var(--ink-soft);text-align:center;}
.login-msg.error{color:var(--red);}
.login-pie{margin:4px 0 0;font-size:11.5px;color:var(--ink-faint);text-align:center;}

.btn-salir{
  order:2;display:flex;align-items:center;gap:6px;min-height:38px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:8px 14px;font-size:12.5px;color:#EAF3F8;transition:background .15s;
}
.btn-salir:hover{background:rgba(255,255,255,.2);}
.btn-salir svg{width:15px;height:15px;}