/* ---------------------------------------------------------------
   Meu local mudou? — 2º turno 2026
   Mapa claro ocupando a tela, busca flutuante, painel que sobe.
   Tom: claro, quente e convidativo — não parece repartição.
   --------------------------------------------------------------- */

:root{
  --bg:#ffffff;
  --warm:#faf6f1;
  --ink:#1a1613;
  --dim:#7c736a;
  --line:#ebe5dd;
  --acc:#1a73e8;          /* azul de navegação — 4.5:1 com branco, passa AA */
  --acc-soft:#e8f0fe;
  --sim:#d93025;          /* mudou */
  --nao:#1e8e3e;          /* não mudou */
  --parcial:#b06000;      /* mudou em parte */
  /* "mudou" é atenção com ação a tomar, não erro: âmbar, não vermelho.
     Vermelho fica só para o local antigo, que é o que NÃO se deve fazer. */
  --alerta:#9a5b00;
  --alerta-ico:#f0a01c;
  --alerta-bg:#fff7e9;
  --sh:0 10px 34px -10px rgba(26,22,19,.22), 0 2px 8px -2px rgba(26,22,19,.08);
  --sh-lg:0 -14px 44px -12px rgba(26,22,19,.20);
  --spring:cubic-bezier(.22,1.3,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  background:var(--warm);color:var(--ink);
  font-family:'Jakarta',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
/* Imagem do mapa já na primeira pintura: a biblioteca do mapa só carrega
   quando a pessoa escolhe a cidade, e sem isto a tela ficava um retângulo
   liso parecendo falha. Quando o mapa real desenha, o canvas cobre a imagem;
   se nunca carregar (sem rede), ela continua valendo como fundo. */
#map{
  position:fixed;inset:0;z-index:0;
  background:#f1f0ec url("mapa-brasil.webp") center center / cover no-repeat;
}

/* ---------------- busca ----------------
   O campo mora sempre dentro do painel. No passo 2 o CSS o prende no topo da
   tela — mover o nó no DOM tirava o foco e fechava o teclado do celular. */
#slot-busca{display:block;margin-bottom:4px}
.searchwrap{position:relative;min-width:0}

.search{
  display:flex;align-items:center;gap:11px;
  height:62px;border-radius:18px;padding:0 18px;
  background:var(--warm);border:1.5px solid transparent;
  transition:border-color .16s,background .16s;
}
.search:focus-within{background:var(--bg);border-color:var(--acc)}
.search .lupa{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:var(--dim);
  stroke-width:2.2;stroke-linecap:round}
.search input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:inherit;font-size:18px;font-weight:650;color:var(--ink);letter-spacing:-.01em;
}
.search input::placeholder{color:#a79d93;font-weight:600}
.search input:disabled{color:var(--dim)}

.limpar{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;
  background:#efebe5;display:grid;place-items:center;cursor:pointer;
  transition:background .14s,transform .14s var(--spring);
}
.limpar:active{transform:scale(.9)}
.limpar svg{width:13px;height:13px;fill:none;stroke:#776f66;stroke-width:2.6;stroke-linecap:round}

.round{
  width:100%;height:54px;border-radius:16px;gap:9px;margin-top:11px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:var(--warm);cursor:pointer;
  transition:transform .16s var(--spring),background .14s;
}
.round:active{transform:scale(.98)}
.round svg{width:23px;height:23px;flex:0 0 auto;fill:none;stroke:var(--acc);
  stroke-width:2.1;stroke-linecap:round}
.round svg .fill{fill:var(--acc);stroke:none}
.round .rot{font-family:inherit;font-size:15px;font-weight:750;color:var(--dim);letter-spacing:-.01em}

/* passo 2: a mesma marcação vira a barra flutuante sobre o mapa */
body:not(.passo1) #slot-busca{
  position:fixed;z-index:20;
  top:max(14px,env(safe-area-inset-top));left:14px;right:14px;
  display:flex;gap:10px;align-items:flex-start;margin:0;
}
body:not(.passo1) #slot-busca .searchwrap{flex:1}
body:not(.passo1) #slot-busca .search{
  height:56px;border-radius:999px;padding:0 20px;
  background:var(--bg);border-color:transparent;box-shadow:var(--sh);
}
body:not(.passo1) #slot-busca .search input{font-size:17px}
body:not(.passo1) #slot-busca .round{
  width:56px;height:56px;border-radius:50%;margin-top:0;flex:0 0 auto;
  background:var(--bg);box-shadow:var(--sh);
}
body:not(.passo1) #slot-busca .round .rot{display:none}

/* sugestões */
.sug{
  list-style:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:var(--bg);border-radius:22px;overflow:hidden;max-height:300px;overflow-y:auto;
  box-shadow:var(--sh);border:1px solid var(--line);
}
.sug li{
  padding:15px 20px;cursor:pointer;font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:10px;letter-spacing:-.01em;
}
.sug li+li{border-top:1px solid var(--line)}
.sug li:hover{background:var(--warm)}
.sug .uf{margin-left:auto;color:var(--dim);font-size:12.5px;font-weight:800;letter-spacing:.06em}
.sug .flag{
  background:#fce8e6;color:var(--sim);font-size:11px;font-weight:800;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}

/* ---------------- chips de modo ---------------- */
body.passo1 .chips{display:none}
.chips{
  position:fixed;z-index:19;
  top:calc(max(14px,env(safe-area-inset-top)) + 66px);left:0;right:0;
  display:flex;gap:8px;padding:0 14px 4px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chip-tab{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  background:var(--bg);border:none;border-radius:999px;
  padding:11px 15px;font-family:inherit;font-size:14px;font-weight:750;
  color:var(--ink);letter-spacing:-.01em;cursor:pointer;box-shadow:var(--sh);
  transition:background .16s,color .16s,transform .16s var(--spring);
}
.chip-tab .ico{font-size:15px;line-height:1}
.chip-tab:active{transform:scale(.95)}
.chip-tab.on{background:var(--acc);color:#fff}

/* ---------------- painel que sobe ---------------- */
.sheet{
  position:fixed;z-index:18;left:0;right:0;bottom:0;
  background:var(--bg);
  border-radius:28px 28px 0 0;
  box-shadow:var(--sh-lg);
  max-height:var(--sheet-h,74vh);display:flex;flex-direction:column;
  transition:max-height .42s var(--spring);
  touch-action:pan-y;
}
/* durante o arrasto a altura acompanha o dedo, sem transição */
.sheet.arrastando{transition:none}
.grip{
  flex:0 0 auto;display:block;width:100%;height:30px;border:none;background:none;
  cursor:grab;position:relative;touch-action:none;
}
.sheet.arrastando .grip{cursor:grabbing}
.grip::after{
  content:"";position:absolute;left:50%;top:13px;transform:translateX(-50%);
  width:40px;height:4.5px;border-radius:999px;background:#ddd5cb;
}
.sheet-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 20px calc(24px + env(safe-area-inset-bottom));
}

/* ---------------- intro ---------------- */
#intro{margin-bottom:22px}
#intro h1{
  font-size:clamp(29px,7.6vw,35px);line-height:1.06;font-weight:800;
  letter-spacing:-.042em;word-spacing:.07em;
}
#intro h1 em{font-style:normal;color:var(--acc)}
#intro p{margin-top:11px;color:var(--dim);font-size:14.5px;line-height:1.5;font-weight:500;
  text-wrap:pretty}

.dica-mapa{
  background:var(--acc-soft);color:#1b4e8f;border-radius:16px;
  padding:13px 15px;font-size:13px;line-height:1.5;font-weight:500;
  margin-bottom:16px;text-wrap:pretty;
}
.dica-mapa b{font-weight:800}
.dica-mapa b.am{color:#8a5100}

/* ---------------- campos ---------------- */
.fld{display:block;position:relative;margin-bottom:14px}
.fld>span{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px;
}
.fld input{
  width:100%;background:var(--warm);color:var(--ink);
  border:1.5px solid transparent;border-radius:18px;
  padding:16px 18px;font-size:17px;font-weight:650;font-family:inherit;
  transition:border-color .16s,background .16s;
}
.fld input::placeholder{color:#b3a99e;font-weight:600}
.fld input:focus{outline:none;background:var(--bg);border-color:var(--acc)}
.row{display:flex;gap:11px}
.row .sm{flex:1}
.row .sm input{text-align:center;font-size:24px;font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}

.hint{color:var(--dim);font-size:14px;line-height:1.5;margin:6px 0 18px;font-weight:550}
.hint a{color:var(--acc);font-weight:750}
.erro{
  background:#fce8e6;color:var(--sim);font-size:14.5px;font-weight:650;line-height:1.45;
  border-radius:16px;padding:14px 16px;margin-top:14px;
}

/* ---------------- botões ---------------- */
button,.rota{font-family:inherit;cursor:pointer;border:none}
.primary{
  width:100%;background:var(--acc);color:#fff;border-radius:18px;padding:18px;
  font-size:17.5px;font-weight:800;letter-spacing:-.012em;word-spacing:.05em;
  box-shadow:0 8px 20px -8px rgba(26,115,232,.55);
  transition:transform .15s var(--spring),filter .15s;
}
.primary:active{transform:scale(.975);filter:brightness(1.06)}
.ghost{
  width:100%;background:var(--warm);color:var(--dim);border-radius:18px;padding:16px;
  font-size:15.5px;font-weight:750;transition:background .15s,color .15s;
}
.ghost:active{background:#f2ece4;color:var(--ink)}

/* a ação mais repetida do site: fica colada no topo, nunca exige rolagem */
.volta-bar{
  position:sticky;top:0;z-index:6;
  margin:-4px -20px 9px;padding:5px 20px 7px;
  background:var(--bg);               /* sólido: o conteúdo não pode vazar por trás */
}
.volta-bar::after{                     /* só o esmaecido na borda de baixo */
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(180deg,var(--bg),rgba(255,255,255,0));
  pointer-events:none;
}
.voltar-topo{
  display:flex;align-items:center;gap:7px;
  background:var(--acc-soft);color:var(--acc);border:none;border-radius:999px;
  padding:9px 15px;font-family:inherit;font-size:13.5px;font-weight:800;
  letter-spacing:-.01em;cursor:pointer;
  transition:background .14s,transform .14s var(--spring);
}
.voltar-topo:active{transform:scale(.96);background:#d7e5fb}
.voltar-topo .ic{width:16px;height:16px;stroke-width:2.4}

/* ---------------- veredito ---------------- */
.verdict{
  text-align:center;padding:19px 20px 20px;border-radius:22px;margin-bottom:11px;
  animation:pop .5s var(--spring) both;
}
.verdict.mudou{background:var(--alerta-bg)}
.verdict.igual{background:#e9f6ed}
.verdict.parcial{background:var(--acc-soft)}
.vico{
  width:44px;height:44px;border-radius:50%;margin:0 auto 11px;
  display:grid;place-items:center;color:#fff;
  animation:selo .55s var(--spring) both .08s;
}
.vico .ic{width:22px;height:22px;stroke-width:2.7}
.mudou .vico{background:var(--alerta-ico);box-shadow:0 8px 20px -6px rgba(240,160,28,.6)}
.igual .vico{background:var(--nao);box-shadow:0 8px 20px -6px rgba(30,142,62,.5)}
.parcial .vico{background:var(--acc);box-shadow:0 8px 20px -6px rgba(26,115,232,.5)}
@keyframes selo{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.verdict h2{font-size:clamp(24px,6.6vw,29px);line-height:1.06;font-weight:800;
  letter-spacing:-.038em;word-spacing:.05em;text-wrap:balance}
.mudou h2{color:var(--alerta)}
.igual h2{color:var(--nao)}
.parcial h2{color:#13529f}
.verdict p{margin-top:7px;font-size:13.5px;line-height:1.4;font-weight:500;color:#6d655c;
  max-width:30ch;margin-left:auto;margin-right:auto;text-wrap:pretty}

@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#resp>*{animation:rise .44s var(--spring) both}
#resp>*:nth-child(2){animation-delay:.06s}
#resp>*:nth-child(3){animation-delay:.11s}
#resp>*:nth-child(4){animation-delay:.16s}
#resp>*:nth-child(5){animation-delay:.21s}

/* ---------------- cartões ---------------- */
.card{
  background:var(--bg);border:1.5px solid var(--line);border-radius:26px;
  padding:18px;margin-bottom:11px;
}
.kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:9px;
}
.card h3{font-size:20.5px;line-height:1.22;font-weight:800;
  letter-spacing:-.028em;word-spacing:.04em;text-wrap:balance}
.end{margin-top:8px;font-size:14.5px;line-height:1.42;color:#5c554d;font-weight:500}
.meta{margin-top:13px;display:flex;flex-direction:column;gap:8px;
  font-size:13px;color:var(--dim);line-height:1.45;font-weight:500;
  font-variant-numeric:tabular-nums}
.meta b{color:var(--ink);font-weight:700}
.aviso{
  margin-top:15px;background:#fef7e0;color:var(--parcial);border-radius:16px;
  padding:13px 15px;font-size:13.5px;line-height:1.5;font-weight:600;
}

.rotas{display:flex;gap:8px;margin-top:16px}
.rota{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;color:#fff;
  padding:14px 6px;border-radius:16px;font-size:14px;font-weight:700;
  letter-spacing:-.01em;transition:transform .15s var(--spring);
}
.rota .ic{width:16px;height:16px;stroke-width:2.1}
.rota:active{transform:scale(.96)}
.waze{background:#0b93c4}
.gmaps{background:#188038}
.apple{background:#5f6368}

.antigo{background:var(--warm);border-color:transparent}
.antigo .kicker{color:var(--sim)}
.antigo h3{font-size:19px;color:#9b9188;text-decoration:line-through;
  text-decoration-color:rgba(217,48,37,.6);text-decoration-thickness:2px}
.antigo .end{font-size:15px;color:#9b9188;text-decoration:line-through;
  text-decoration-color:rgba(217,48,37,.35)}

.transf{background:#fdfaf3;border-color:#f0e4ca}
.transf .kicker{color:var(--parcial)}
.tblk{padding:15px 0;border-top:1px solid #efe5d2}
.tblk:first-child{border-top:none;padding-top:2px}
.chips-sec{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.chip{
  background:#fff;border:1.5px solid #ece0c6;color:var(--parcial);border-radius:999px;
  padding:9px 14px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:transform .14s var(--spring),background .14s;
}
.chip:active{transform:scale(.95);background:#fdf3e0}
.tdest{display:flex;flex-direction:column;gap:3px}
.tdest span{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#a89a7e;margin-bottom:3px}
.tdest span .ic{width:14px;height:14px;stroke-width:2.3}
.tdest b{font-size:17px;font-weight:800;color:var(--ink);line-height:1.22;letter-spacing:-.02em}
.tdest i{font-style:normal;font-size:14px;color:var(--dim);line-height:1.4}

.perto-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--bg);border:1.5px solid var(--line);border-radius:20px;
  padding:15px 16px;margin-bottom:9px;color:var(--ink);
  transition:border-color .15s,transform .15s var(--spring);
}
.perto-item:active{transform:scale(.985)}
.perto-item.alerta{border-color:#eedfbe;background:#fdfaf3}
.pi-d{flex:0 0 auto;min-width:54px;font-size:12.5px;font-weight:800;color:var(--acc);
  font-variant-numeric:tabular-nums}
.perto-item.alerta .pi-d{color:var(--parcial)}
.pi-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pi-t b{font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.015em}
.pi-t i{font-style:normal;font-size:12.5px;color:var(--dim);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-f{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--parcial)}

/* saída para a fonte oficial: quando o nosso dado não basta */
.tse-links{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.tse{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--bg);border:1.5px solid var(--line);border-radius:18px;
  padding:13px 15px;color:var(--ink);
  transition:border-color .15s,transform .15s var(--spring);
}
.tse:active{transform:scale(.985)}
/* atalho dentro das abas de busca: é saída, não ação principal — fica mais leve */
.tse.saida{margin-top:14px;background:var(--warm);border-color:transparent}
.tse.saida .tse-ic{background:var(--bg)}
.tse:hover{border-color:#cfd8e6}
.tse-ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;
}
.tse-ic .ic{width:19px;height:19px;stroke-width:2}
.tse-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tse-txt b{font-size:14.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.tse-txt i{font-style:normal;font-size:12.5px;color:var(--dim);line-height:1.35;font-weight:500}
.tse .ar{margin-left:auto;flex:0 0 auto;width:16px;height:16px;color:#bdb5ab;stroke-width:2.4}

.tse-links.compacto .tse{padding:11px 13px;gap:10px}
.tse-links.compacto .tse-ic{width:32px;height:32px;border-radius:10px}
.tse-links.compacto .tse-ic .ic{width:16px;height:16px}
.tse-links.compacto .tse-txt b{font-size:13.5px}
.tse-links.compacto .tse-txt i{font-size:11.5px}

.acoes{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.fonte{color:#a9a098;font-size:12px;line-height:1.55;text-align:center;
  padding:16px 4px 0;font-weight:550}

/* ---------------- ícones ---------------- */
.ic{
  width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.chip-tab .ic{width:17.5px;height:17.5px;stroke-width:2.05}

/* metadados: uma linha por informação, com ícone alinhado ao texto */
.mi{display:flex;align-items:flex-start;gap:10px}
.mi .ic{width:18px;height:18px;margin-top:1px;color:#a89d92;stroke-width:2.1}

/* ---------------- marcadores ---------------- */
.mk{
  width:44px;height:44px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--acc);
  box-shadow:0 6px 18px -4px rgba(26,22,19,.35);
}
.mk .ic{width:21px;height:21px;stroke-width:2}
.mk.atual{width:54px;height:54px;border:3.5px solid var(--acc)}
.mk.atual .ic{width:25px;height:25px}
.mk.velho{border:3px solid #c3bbb1;color:#9a9188;background:#f4f1ed}
.mk.velho .ic{width:19px;height:19px}
.mk.eu{width:22px;height:22px;background:var(--acc);border:3.5px solid #fff;
  box-shadow:0 0 0 7px rgba(26,115,232,.20),0 6px 14px -3px rgba(26,22,19,.3)}

/* ---------------- desktop: painel lateral, como num app de mapas ---------- */
@media (min-width:900px){
  body:not(.passo1) #slot-busca{left:22px;right:auto;width:430px;top:22px}
  .chips{left:22px;right:auto;width:430px;top:92px;padding:0 0 4px}
  .sheet{
    left:22px;right:auto;width:430px;top:154px;bottom:22px;
    border-radius:28px;max-height:none;
  }
  .sheet.compacto{max-height:none}
  .grip{display:none}
  .sheet-body{padding:26px 24px 26px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}