:root {
  --bg: #0e1512;
  --panel: #16211b;
  --panel-2: #1c2a22;
  --border: #2a3d31;
  --text: #e8f0ea;
  --muted: #9fb4a6;
  --green: #34d17b;
  --amber: #e8b93d;
  --red: #e85d4a;
  --blue: #4aa3e8;
  --purple: #a97ee8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
}
a { color: var(--green); }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 22px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1100;
}
header .logo { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
header .logo span { color: var(--green); }
header .logo small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
nav { display: flex; gap: 4px; margin-left: auto; }
nav a {
  color: var(--muted); text-decoration: none; padding: 8px 14px;
  border-radius: 8px; font-size: 14px; font-weight: 600;
}
nav a:hover { color: var(--text); background: var(--panel-2); }
nav a.ativo { color: #0c130f; background: var(--green); }

/* ---------- filtros ---------- */
.filtros {
  padding: 10px 22px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 61px; z-index: 1000;
}
/* linha compacta sempre visível: abrir/fechar + limpar */
.filtros-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtros button {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.filtros button:hover { color: var(--text); border-color: var(--muted); }
.filtros button[hidden] { display: none; }
.f-toggle { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.f-toggle .conta {
  background: var(--green); color: #0c130f; font-size: 11.5px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; line-height: 1.5;
}
.f-toggle .conta[hidden] { display: none; }
.f-toggle .seta { font-size: 11px; color: var(--muted); transition: transform .2s ease; }
.f-toggle[aria-expanded="true"] .seta { transform: rotate(180deg); }

/* abre/fecha por grid-template-rows (0fr → 1fr): anima sem height:auto forjado */
.filtros-campos { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.filtros.fechado .filtros-campos { grid-template-rows: 0fr; }
.filtros-corte { overflow: hidden; min-height: 0; }
/* esconde do foco/leitor só depois da animação de fechamento */
.filtros.fechado .filtros-corte { visibility: hidden; transition: visibility 0s linear .22s; }
.filtros-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 12px; padding-top: 10px;
}
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; }
.filtro select, .filtro input {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13.5px; font-family: inherit;
}
.filtros.sem-anim .filtros-campos,
.filtros.sem-anim .filtros-corte,
.filtros.sem-anim .f-toggle .seta { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .filtros-campos, .filtros-corte, .f-toggle .seta { transition: none; }
}

/* ---------- layout mapa + painel ---------- */
.principal { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 0; }
/* z-index 0 isola o contexto de empilhamento: os controles do Leaflet
   (zoom/toggles/legendas, z-index interno até 1000) nunca passam por cima
   do header e da barra de filtros sticky */
#mapa { height: calc(100vh - 130px); min-height: 520px; background: #0a100d; position: relative; z-index: 0; }
.leaflet-container { background: #0a100d; }
.painel {
  height: calc(100vh - 130px); overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--border); padding: 18px;
}
.painel h2 { font-size: 20px; margin-bottom: 2px; }
.painel .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.voltar { background: none; border: none; color: var(--green); cursor: pointer; font-size: 13px; padding: 0 0 10px; display: none; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.card .valor { font-size: 22px; font-weight: 800; }
.card .rotulo { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

.status-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
.chip b { color: var(--text); }
.chip.aberto b { color: var(--amber); }
.chip.em_processo b { color: var(--blue); }
.chip.arquivado b { color: var(--muted); }
.chip.fechado b { color: var(--green); }
.chip.ti { background: #a97ee81f; border-color: #a97ee855; color: #c9a9f5; }
.chip.ti b { color: #d9c4fa; }

.grafico { margin-bottom: 18px; }
.grafico h3, .lista h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 8px; }
.lista h3 { display: flex; align-items: center; gap: 10px; }
.baixar {
  margin-left: auto; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  font-size: 11.5px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.baixar:hover { color: var(--text); border-color: var(--green); }
.baixar.compartilhar { margin-left: 0; }
.menu-share { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.menu-share[hidden] { display: none; }
.menu-share a, .menu-share button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.menu-share a:hover, .menu-share button:hover { color: var(--text); border-color: var(--green); }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.barra { flex: 1; background: linear-gradient(180deg, #e8734a, #b3402a); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.barra:hover { filter: brightness(1.3); }
.barra .dica {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; padding: 3px 7px; white-space: nowrap; z-index: 30;
}
.barra:hover .dica { display: block; }
.eixo { display: flex; gap: 3px; margin-top: 4px; }
.eixo span { flex: 1; font-size: 9px; color: var(--muted); text-align: center; }

/* ---------- ocorrências ---------- */
.ocorrencia {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.ocorrencia.tem-mapa { cursor: pointer; transition: border-color .15s, transform .15s; }
.ocorrencia.tem-mapa:hover { border-color: var(--green); transform: translateX(-2px); }
.ocorrencia.ativa { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pin { color: var(--green); font-weight: 600; margin-left: auto; white-space: nowrap; }
.pin.sem { color: var(--muted); font-weight: 400; font-style: italic; }
.oc-topo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 7px; }
.badge { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.b-desmatamento { background: #3d2419; color: #ff9d6b; }
.b-queimada { background: #40261270; color: #ffb03b; background: #402612; }
.b-mineracao_ilegal { background: #3d1930; color: #ff6bd4; }
.b-degradacao { background: #33301a; color: #d9c94a; }
.b-crime_fauna { background: #1a3327; color: #52d99a; }
.b-pesca_ilegal { background: #16303d; color: #56b8f0; }
.b-poluicao { background: #2c1a3d; color: #bd8bf5; }
.b-crime_administrativo { background: #262e35; color: #9fb8cc; }
.b-natureza { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.b-ti { background: #a97ee81f; color: #c9a9f5; border: 1px solid #a97ee855; text-transform: none; letter-spacing: .2px; }
.oc-data { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.oc-desc { font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
.oc-rodape { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); align-items: center; }
.oc-rodape .st { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); }
.st.aberto { color: var(--amber); border-color: #5c4a1e; }
.st.em_processo { color: var(--blue); border-color: #1e425c; }
.st.arquivado { color: var(--muted); }
.st.fechado { color: var(--green); border-color: #1e5c38; }
.st.nao_se_aplica { color: var(--muted); font-style: italic; }
.vazio { color: var(--muted); font-size: 13.5px; padding: 20px 0; text-align: center; }
.mais { width: 100%; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 9px; cursor: pointer; }

/* ---------- legenda ---------- */
.legenda {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 11.5px; color: var(--muted); line-height: 1.7;
}
.legenda i { display: inline-block; width: 14px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legenda i.ponto { width: 11px; height: 11px; border-radius: 50%; }
.toggle-ti label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text); font-weight: 600; }
.toggle-ti input { accent-color: var(--purple); width: 14px; height: 14px; cursor: pointer; }
.toggle-ti span { color: var(--muted); font-weight: 400; }
.leaflet-tooltip.dica-uf {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; font-size: 12.5px; padding: 6px 10px;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
}
.popup-oc { font-size: 12.5px; line-height: 1.55; }
.leaflet-popup-close-button { color: var(--muted) !important; }

/* ---------- páginas denunciar / fontes ---------- */
.pagina { max-width: 880px; margin: 0 auto; padding: 26px 22px 60px; }
.pagina h1 { font-size: 26px; margin-bottom: 6px; }
.pagina .desc { color: var(--muted); margin-bottom: 22px; line-height: 1.5; }
.aviso {
  background: #33260f; border: 1px solid #5c4a1e; color: #ffd77a;
  border-radius: 12px; padding: 13px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 22px;
}
.aviso b { color: #ffe6a8; }
form .campo { margin-bottom: 16px; }
form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
form label small { color: var(--muted); font-weight: 400; }
form input, form select, form textarea {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 14px;
  font-family: inherit;
}
form textarea { min-height: 120px; resize: vertical; }
.urgencias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.urgencias input { display: none; }
.urgencias span {
  display: block; text-align: center; padding: 10px 6px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; cursor: pointer; color: var(--muted);
}
.urgencias input:checked + span { border-color: var(--green); color: var(--text); background: var(--panel-2); }
.urgencias .risco input:checked + span { border-color: var(--red); color: #ffb0a5; }
.enviar {
  background: var(--green); color: #0c130f; font-weight: 800; font-size: 15px;
  border: none; border-radius: 10px; padding: 13px 26px; cursor: pointer; width: 100%;
}
.enviar:hover { filter: brightness(1.1); }
.resultado { display: none; }
.resumo-denuncia { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.resumo-denuncia dt { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 10px; }
.resumo-denuncia dd { font-size: 14px; margin-left: 0; }
.orgao { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.orgao h4 { font-size: 15px; margin-bottom: 4px; }
.orgao .canal { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.orgao .canal b { color: var(--green); font-size: 15px; }

.filtros-fontes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros-fontes button {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.filtros-fontes button.ativo { background: var(--green); color: #0c130f; border-color: var(--green); font-weight: 700; }
.grade-fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fonte-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.fonte-card h4 { font-size: 15px; margin-bottom: 3px; }
.fonte-card .meta { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.fonte-card p { font-size: 13px; color: var(--muted); line-height: 1.45; margin-bottom: 8px; }
.fonte-card .tag-dados { font-size: 11px; color: var(--blue); }

footer { padding: 18px 22px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); line-height: 1.6; }

@media (max-width: 980px) {
  .principal { grid-template-columns: 1fr; }
  #mapa { height: 52vh; min-height: 380px; }
  .painel { height: auto; border-left: none; border-top: 1px solid var(--border); }
  .grade-fontes { grid-template-columns: 1fr; }
  .urgencias { grid-template-columns: 1fr 1fr; }
  header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  header .logo { font-size: 16px; }
  nav { margin-left: 0; width: 100%; justify-content: flex-start; }
  nav a { padding: 7px 10px; font-size: 13px; }
  .legenda { font-size: 9.5px; line-height: 1.5; padding: 6px 8px; max-width: 44vw; }
  .legenda i { width: 10px; height: 8px; margin-right: 4px; }
  .legenda i.ponto { width: 8px; height: 8px; }
  .filtros { padding: 10px 14px 12px; }
  .filtros-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 600px) {
  .filtros-grade { grid-template-columns: 1fr 1fr; }
  .filtro-municipio { grid-column: span 2; }
  .filtros-barra button { flex: 1; }
}