/* Tela de login do VIGIA: mapa do RN com as viagens saindo da base de Parnamirim */
:root{
  --papel:#eef2f0;       /* terreno do RN */
  --vizinho:#e2e8e5;     /* estados vizinhos */
  --curva:#d6dfdb;       /* curvas de nivel */
  --agua:#bcd6e2;        /* mar, rios e acudes */
  --divisa:#9aa8a2;      /* divisa de estado */
  --rodovia:#e7b443;     /* rodovias federais */
  --rodovia-borda:#9a7a2c;
  --rota:#16a34a;        /* viagem monitorada (cor da marca) */
  --rota-escura:#166534;
  --tinta:#13232d;
  --tinta-2:#5a6b75;
  --folha:#ffffff;
  --erro:#b42318;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Barlow,system-ui,sans-serif;color:var(--tinta);background:var(--papel);
  display:grid;grid-template-columns:minmax(0,1fr) 440px;min-height:100%}

/* ---------- mapa ---------- */
.mapa{position:relative;overflow:hidden;background:var(--agua)}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
.mapa .terra{fill:var(--vizinho)}
.mapa .rn{fill:var(--papel)}
.mapa .divisa{fill:none;stroke:var(--divisa);stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round}
.mapa .curva{fill:none;stroke:var(--curva);stroke-width:1.2}
.mapa .rio{fill:none;stroke:var(--agua);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mapa .acude{fill:var(--agua)}
.mapa .estrada{fill:none;stroke:#c3ccc8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mapa .br-borda{fill:none;stroke:var(--rodovia-borda);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.mapa .br{fill:none;stroke:var(--rodovia);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.mapa .rota{fill:none;stroke:var(--rota);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.mapa .rotulo{font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:15px;fill:var(--tinta);
  paint-order:stroke;stroke:var(--papel);stroke-width:4px;stroke-linejoin:round}
.mapa .rotulo.no-mar{stroke:var(--agua)}
.mapa .rotulo.capital{font-weight:700;font-size:18px}
.mapa .rotulo.base{font-weight:700;font-size:17px;fill:var(--rota-escura)}
.mapa .estado{font-family:Barlow,sans-serif;font-size:15px;fill:#8a9a93;letter-spacing:.32em}
.mapa .mar-nome{font-family:Barlow,sans-serif;font-style:italic;font-size:17px;fill:#5d8aa0;letter-spacing:.3em}
.mapa .cidade{fill:var(--folha);stroke:var(--tinta);stroke-width:1.6}
.mapa .destino{fill:var(--rota-escura);stroke:var(--folha);stroke-width:2}
.mapa .escudo path{fill:var(--folha);stroke:var(--tinta);stroke-width:1.3}
.mapa .escudo text{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;font-size:10.5px;fill:var(--tinta);text-anchor:middle}
.mapa .caminhao .halo{fill:var(--rota);opacity:.18}
.mapa .caminhao .corpo{fill:var(--rota-escura);stroke:var(--folha);stroke-width:2.5}
.mapa .pulso{fill:none;stroke:var(--rota);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulso 2.6s ease-out infinite}
@keyframes pulso{from{transform:scale(.4);opacity:.9}to{transform:scale(2.6);opacity:0}}

.legenda{position:absolute;left:28px;bottom:24px;display:flex;gap:18px;align-items:center;
  font-size:14px;color:var(--tinta-2);background:rgba(255,255,255,.85);backdrop-filter:blur(4px);
  border:1px solid #d6dfdb;border-radius:6px;padding:8px 12px}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.legenda i{display:inline-block;width:22px;height:5px;border-radius:3px}
.legenda i.base{width:14px;height:14px;border-radius:50%;background:var(--rota-escura);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rota-escura)}

/* entrada do mapa: um so momento orquestrado */
.revela{opacity:0;animation:aparece .9s ease forwards}
@keyframes aparece{to{opacity:1}}

/* ---------- painel ---------- */
.painel{background:var(--folha);border-left:1px solid #d6dfdb;display:flex;flex-direction:column;
  justify-content:center;padding:48px 48px 28px;position:relative;z-index:1}
.marca{display:flex;align-items:center;gap:14px;margin-bottom:40px}
.marca svg{width:52px;height:52px;flex:none}
.marca h1{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;font-size:40px;line-height:1;margin:0;letter-spacing:.04em}
.marca p{margin:4px 0 0;color:var(--tinta-2);font-size:15px;line-height:1.35}
.saudacao{font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:26px;margin:0 0 6px}
.apoio{margin:0 0 28px;color:var(--tinta-2);font-size:16px;line-height:1.45;max-width:32ch}
.painel label{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.campo{margin-bottom:18px}
.painel input{width:100%;height:48px;border:1.5px solid #c5d0cb;border-radius:6px;background:#fbfcfb;color:var(--tinta);
  font:500 17px Barlow,sans-serif;padding:0 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.painel input:focus{border-color:var(--rota);box-shadow:0 0 0 3px rgba(22,163,74,.22);background:#fff}
#login{text-transform:uppercase}
.entrar{position:relative;overflow:hidden;width:100%;height:52px;margin-top:6px;border:0;border-radius:6px;
  background:var(--rota-escura);color:#fff;font:700 18px "Barlow Semi Condensed",sans-serif;letter-spacing:.03em;cursor:pointer}
.entrar:hover{background:#14532d}
.entrar:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.entrar .trilho{position:absolute;left:0;bottom:0;height:4px;width:0;background:#86efac}
.entrar.indo .trilho{animation:trilho 1.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes trilho{to{width:100%}}
.alerta{border-left:4px solid var(--erro);background:#fdf0ef;color:#7a1810;padding:10px 12px;border-radius:4px;margin:0 0 20px;font-size:15px;line-height:1.4}
.alerta.ok{border-color:var(--rota);background:#eefbf2;color:#14532d}
.alerta a{color:inherit;font-weight:600}
.rodape{margin-top:auto;padding-top:32px;color:#8a989f;font-size:13px}

@media (max-width:900px){
  body{grid-template-columns:1fr;grid-template-rows:30vh auto}
  .painel{border-left:0;border-top:1px solid #d6dfdb;padding:28px 16px 20px;justify-content:flex-start}
  .marca{margin-bottom:24px}
  .saudacao{font-size:22px}
  .apoio{margin-bottom:20px}
  .legenda{display:none}
}
@media (prefers-reduced-motion:reduce){
  .revela{animation:none;opacity:1}
  .mapa .pulso{animation:none;opacity:.5}
  .entrar.indo .trilho{animation:none;width:100%}
}