/* Pantallas de acceso — reutiliza la paleta de Operaciones (brand.css,
   fuente de verdad: static/app.css). Requiere brand.css cargado antes. */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  color:var(--jld-ink);
  background:
    radial-gradient(720px 480px at 12% -8%, #1ca4b933, transparent 60%),
    radial-gradient(680px 460px at 108% 108%, #102a3a1f, transparent 60%),
    linear-gradient(180deg,#f3f8f9,#e7f0f1);
}
.auth-shell{width:min(430px,100%);display:grid;gap:22px;justify-items:center}
.auth-shell .jld-badge{width:56px;height:56px;border-radius:16px;font-size:1.05rem;box-shadow:0 14px 28px -10px #1ca4b966}
.auth-card{
  width:100%;
  background:#fff;
  border:1px solid var(--jld-line);
  border-radius:22px;
  padding:38px 36px 34px;
  box-shadow:0 24px 60px -18px #102a3a30, 0 2px 10px #102a3a12;
}
.brand{
  color:var(--jld-blue);
  font-weight:800;
  letter-spacing:.14em;
  font-size:.72rem;
  text-transform:uppercase;
  margin:0 0 8px;
  text-align:center;
}
h1{margin:0 0 8px;font-size:1.7rem;letter-spacing:-.01em;text-align:center}
.auth-card>p:not(.brand):not(.error){
  margin:0 0 6px;color:var(--jld-muted);font-size:.92rem;line-height:1.5;text-align:center;
}
form{display:grid;gap:16px;margin-top:26px}
label{display:grid;gap:7px;font-weight:700;font-size:.84rem;color:var(--jld-ink)}
input{
  width:100%;
  padding:13px 14px;
  border:1.5px solid #d3e0e2;
  border-radius:11px;
  font:inherit;
  font-size:.96rem;
  background:#fbfdfd;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:hover{border-color:#b8ccd0}
input:focus{
  outline:none;
  border-color:var(--jld-cyan);
  background:#fff;
  box-shadow:0 0 0 4px #1ca4b91f;
}
button{
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg,var(--jld-cyan),var(--jld-blue));
  color:#fff;
  padding:14px;
  font:inherit;
  font-weight:800;
  font-size:.98rem;
  letter-spacing:.01em;
  cursor:pointer;
  margin-top:4px;
  box-shadow:0 12px 24px -10px #1ca4b970;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover{transform:translateY(-1px);box-shadow:0 16px 30px -10px #1ca4b98a}
button:active{transform:translateY(0);filter:brightness(.96)}
.password-field{position:relative;display:block}
.password-field input{padding-right:76px}
.password-field .toggle-password{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;box-shadow:none;color:var(--jld-blue);
  font-weight:700;font-size:.78rem;padding:7px 10px;margin:0;border-radius:8px;
}
.password-field .toggle-password:hover{background:#1ca4b91a;transform:translateY(-50%)}
.password-field .toggle-password:active{transform:translateY(-50%);filter:none}
.error{
  padding:12px 14px;
  border-radius:10px;
  background:#fff0ef;
  color:var(--jld-red);
  font-weight:700;
  font-size:.88rem;
  text-align:center;
}
@media (prefers-color-scheme:dark){
  body{
    color:#eaf3f4;
    background:
      radial-gradient(720px 480px at 12% -8%, #1ca4b922, transparent 60%),
      radial-gradient(680px 460px at 108% 108%, #102a3a55, transparent 60%),
      linear-gradient(180deg,#0d1e22,#0a171a);
  }
  .auth-card{background:#122a2f;border-color:#1e3a40;box-shadow:0 24px 60px -18px #00000066}
  h1{color:#eaf3f4}
  label{color:#c7dce0}
  input{background:#0e2226;border-color:#28474d;color:#eaf3f4}
  input:focus{background:#0e2226}
  .auth-card>p:not(.brand):not(.error){color:#8fa9ae}
}