/* =====================================================================
   Boletim de Atualizações Direta · Tela de login
   Fundo escuro com uma rede de pontos e linhas animada (canvas em
   login.js) e card central no mesmo azul de dentro do sistema
   (barra do topo e herói: #041a55 → #0838a8 → #0a4fd0 → #0b6cff).
   ===================================================================== */
:root{
  --fundo-1:#020716;
  --fundo-2:#051541;
  --azul-1:#062369;
  --azul-2:#0a4fd0;
  --azul-3:#0b6cff;
  --azul-luz:#4d94ff;
  --ink:#0f1b3d;
  --muted:#6b7897;
  --line:#dbe5f5;
  --campo:#f5f8fe;
  --erro-bg:#fde8e8;
  --erro-fg:#9b1c1c;
  /* cor da rede animada (lida pelo login.js) */
  --rede-cor:110,165,255;
  --rede-luz:205,225,255;
}
*{box-sizing:border-box}
html,body{height:100%}
body.login-page{
  margin:0;min-height:100vh;overflow-x:hidden;
  font:16px/1.5 "Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--fundo-1);
}
body.login-page::before{ /* brilhos difusos atrás da rede, como na foto */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 8% 28%,rgba(11,108,255,.48),transparent 62%),
    radial-gradient(50vmax 40vmax at 95% 78%,rgba(123,63,228,.30),transparent 60%),
    radial-gradient(40vmax 30vmax at 55% 40%,rgba(8,56,168,.45),transparent 70%),
    linear-gradient(180deg,var(--fundo-2),var(--fundo-1));
  animation:respira 14s ease-in-out infinite alternate;
}
body.login-page::after{ /* vinheta: bordas mais escuras */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(1,4,16,.68) 100%);
}
/* clicar duas vezes no fundo ou no cartão não seleciona texto; os campos continuam normais */
body.login-page{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.login-page input,body.login-page .login-contatos a{-webkit-user-select:text;user-select:text}
@keyframes respira{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}

/* ---------- cenário ---------- */
.ceu{position:fixed;inset:0;z-index:1;pointer-events:none}
.ceu canvas{display:block;width:100%;height:100%}

/* ---------- layout ---------- */
.login-layout{
  position:relative;z-index:2;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 16px 24px;
}

/* ---------- card ---------- */
.login-card{
  width:100%;max-width:430px;overflow:hidden;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(77,148,255,.25),0 0 70px -12px rgba(11,108,255,.42),0 50px 90px -40px rgba(0,0,0,.9);
}
.login-card-topo{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:38px 34px 46px;
  background:
    radial-gradient(420px 220px at 10% -10%,rgba(11,108,255,.55),transparent 60%),
    radial-gradient(360px 220px at 100% 110%,rgba(123,63,228,.35),transparent 60%),
    linear-gradient(160deg,#041a55 0%,#0838a8 62%,#0a4fd0 100%);
}
.login-card-topo::before{ /* estrelinhas no topo do card */
  content:"";position:absolute;inset:0;opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 30% 64%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 58%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 12%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 66% 44%,#fff 50%,transparent 51%);
  animation:pisca 4s ease-in-out infinite alternate;
}
@keyframes pisca{from{opacity:.35}to{opacity:.85}}
.login-card-topo h1{
  position:relative;margin:0 0 12px;font-weight:300;letter-spacing:.08em;
  font-size:clamp(1.55rem,4.6vw,2rem);text-transform:uppercase;line-height:1.15;
}
.login-card-topo p{position:relative;margin:0 auto;max-width:330px;color:rgba(255,255,255,.88);font-size:1rem}

.login-card-corpo{padding:28px 36px 24px;text-align:center}

.login-card-topo h1.logo-topo{margin:0 0 16px;line-height:0}
.logo-topo img{
  display:block;width:100%;max-width:260px;height:auto;margin:0 auto;
  filter:drop-shadow(0 4px 14px rgba(0,10,25,.55));
}
.logo-topo::after{ /* brilho passando pela logo */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;
  background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(../img/logo-direta-branca.png) center/contain no-repeat;
          mask:url(../img/logo-direta-branca.png) center/contain no-repeat;
  animation:brilho 5s ease-in-out 1.2s infinite;
}
.logo-topo{position:relative;max-width:260px;margin-left:auto!important;margin-right:auto!important}
@keyframes brilho{0%{background-position:150% 0}25%,100%{background-position:-50% 0}}

.login-card-corpo h2{margin:4px 0 2px;font-size:1.75rem;font-weight:800;color:var(--azul-1)}
.login-subtitulo{margin:0 0 22px;color:var(--muted)}

.erro-box{
  display:none;text-align:left;margin:0 0 16px;padding:10px 14px;border-radius:11px;
  background:var(--erro-bg);color:var(--erro-fg);font-weight:600;font-size:.95rem;
  border:1px solid #f6c9c9;overflow-wrap:anywhere;
}
.erro-box.show{display:block;animation:treme .35s ease}
@keyframes treme{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.campo{position:relative;margin-bottom:14px}
.campo-icone{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#8b99b8;display:grid;place-items:center;pointer-events:none;transition:color .15s;
}
.campo .form-control{
  width:100%;height:58px;padding:0 16px 0 54px;
  font:inherit;font-size:1.05rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.campo-senha .form-control{padding-right:54px}
.campo .form-control::placeholder{color:#97a3bd}
.campo .form-control:focus{outline:none;border-color:var(--azul-3);box-shadow:0 0 0 4px rgba(11,108,255,.16)}
.campo:focus-within .campo-icone{color:var(--azul-3)}

.btn-olho{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:10px;background:transparent;
  color:#8b99b8;cursor:pointer;display:grid;place-items:center;
}
.btn-olho:hover{color:var(--azul-3);background:#e8f0ff}
.btn-olho .icon-hide{display:none}
.btn-olho.on .icon-show{display:none}
.btn-olho.on .icon-hide{display:block}

.login-opcoes{display:flex;align-items:center;margin:4px 2px 22px}
.form-check{display:flex;align-items:center;gap:9px;cursor:pointer}
.form-check-input{width:19px;height:19px;margin:0;accent-color:#0a4fd0;cursor:pointer}
.form-check-label{color:#4b5878;font-weight:700;cursor:pointer;user-select:none}

.btn-acessar{
  width:100%;height:60px;border:0;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font:inherit;font-size:1.2rem;font-weight:700;color:#fff;
  background:linear-gradient(100deg,#062369 0%,#0838a8 45%,#0b6cff 100%);
  box-shadow:0 18px 30px -16px rgba(11,108,255,.85);
  transition:transform .12s,filter .15s,box-shadow .15s;
}
.btn-acessar:hover{filter:brightness(1.08)}
.btn-acessar:hover svg{transform:translateX(4px)}
.btn-acessar svg{transition:transform .15s}
.btn-acessar:active{transform:translateY(1px)}
.btn-acessar:disabled{opacity:.75;cursor:wait}

.login-versao{
  display:inline-block;margin:22px 0 0;padding:3px 13px;border-radius:999px;
  background:#eef3ff;border:1px solid #d6e2fb;color:#5a6f9c;font-size:.82rem;font-weight:700;
}

/* ---------- rodapé de contatos ---------- */
.login-contatos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:22px;
  color:rgba(205,222,255,.88);font-size:.92rem;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.login-contatos span{display:inline-flex;align-items:center;gap:7px}
.login-contatos a{color:#fff;text-decoration:none}
.login-contatos a:hover{text-decoration:underline}

@media (max-width:480px){
  .login-card-topo{padding:30px 22px 36px}
  .login-card-corpo{padding:24px 20px 20px}
  .login-contatos{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .logo-topo::after,.login-card-topo::before,body.login-page::before{animation:none}
}