/* Telas dos Municípios (a lista e uma cidade) e a de Debates ("Em breve"), por cima de report.css. */

/* a lista: um cartão por cidade, com a foto da cidade no formato da tecla */
.cidades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.cidade{display:flex;flex-direction:column;gap:16px;height:100%}
.cidade .lugar{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--surface-2)}
.cidade h2{font-size:1.5rem;line-height:1.2}
.cidade h2 a{text-decoration:none}
.cidade .uf{color:var(--muted);font:600 var(--step-small)/1 var(--text);letter-spacing:0}
.prefeito-mini{display:flex;gap:16px;align-items:center}
.prefeito-mini .mini{flex:none;width:64px;height:80px;object-fit:cover;border-radius:var(--r);background:var(--surface-2)}
.prefeito-mini p{display:flex;flex-direction:column;gap:2px;min-width:0}
.prefeito-mini b{font:700 1.125rem/1.3 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.rot{color:var(--muted);font-size:var(--step-small);font-weight:600}
.partido{color:var(--muted)}
.cidade .tecla{align-self:flex-start;margin-top:auto}
.pendente-txt{color:var(--muted)}

/* uma cidade: o prefeito, os avisos e o plano pesquisável */
.prefeito{display:flex;gap:28px;align-items:flex-start}
.prefeito img{flex:none;width:132px;height:176px;object-fit:cover;border-radius:var(--r);background:var(--surface-2)}
.prefeito div{min-width:0}
.prefeito h2{font-size:1.75rem;line-height:1.15;overflow-wrap:anywhere}
.partido-linha{margin-top:6px;font-weight:600}
.caveat{max-width:62ch;margin-top:12px;color:var(--muted);font-size:var(--step-small)}
.cassacao{margin-top:16px;font-weight:600}
.plano .fonte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:24px}
.plano .fonte .meta{color:var(--muted)}
.plano .filtros{align-items:flex-end}
.paginas{display:grid;gap:16px}
.pagina{min-width:0;padding:24px 28px;border-radius:var(--r);background:var(--surface)}
.pagina h3{margin-bottom:12px;color:var(--muted);font:600 var(--step-small)/1.3 var(--text);letter-spacing:0}
.pagina .texto{max-width:72ch;white-space:pre-line;overflow-wrap:anywhere;line-height:1.6}
.pagina mark{padding:0 2px;border-radius:4px;background:var(--confirma);color:var(--on-confirma)}
.aviso-pagina{margin-bottom:14px;padding:12px 16px;border-radius:var(--r);background:var(--surface-2);font-size:var(--step-small)}
.pagina.sem_texto .aviso-pagina{margin:0}

/* debates: em breve */
.breve{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.breve img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.breve h2{font-size:2rem}
.breve p{max-width:52ch;margin-top:12px}
.breve-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:980px){.cidades{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .cidades{grid-template-columns:minmax(0,1fr)}
  .prefeito{flex-direction:column;gap:16px}
  .prefeito img{width:104px;height:138px}
  .pagina{padding:18px 20px}
  .breve{grid-template-columns:minmax(0,1fr);gap:24px}
  .breve-acoes .tecla{flex:1 1 100%}
}
.plano .campo.busca{max-width:640px}

/* Emendas Pix de uma cidade: o total, as barras mês a mês e uma tecla por emenda */
.emendas h3{margin:40px 0 16px;font-size:1.25rem;line-height:1.2}
.emendas-total{max-width:24ch;font:700 var(--step-head)/1.08 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.emendas-gasto{margin-top:16px;font:600 var(--step-lead)/1.3 var(--text)}
.anos,.meses-botoes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.anos .tecla,.meses-botoes .tecla{min-width:64px}
.tecla[aria-checked=true]{background:var(--ink);color:var(--on-ink);border-bottom-color:transparent;transform:translateY(3px)}
.mes-cartao{margin-top:8px}
.mes-titulo{font:700 1.375rem/1.2 var(--display);letter-spacing:-.01em}
.mes-valor{margin-top:10px;font-weight:600;font-variant-numeric:tabular-nums}
.mes-emendas{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.mes-emendas li{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.mes-para{color:var(--muted)}
.mes-mov{font-variant-numeric:tabular-nums}
.emendas-mais{margin-top:16px}
.emendas-mais .tecla{width:100%}
.emendas-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.emenda h4{font:700 1.25rem/1.25 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.emenda-meta{margin-top:6px;color:var(--muted);font-weight:600}
.emenda-linha{margin-top:14px;overflow-wrap:anywhere}
.emenda .longo summary,.emenda .metas summary{cursor:pointer}
.emenda .longo p{margin-top:8px;white-space:pre-line}
.emenda .metas{margin-top:12px}
.emenda .metas ul{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:var(--step-small)}
/* a fonte às vezes manda texto sem espaço nenhum ("Aquisiçãodeequipamento…"): quebra em qualquer ponto
   em vez de esticar a tecla para fora da coluna */
.emenda,.emenda .metas li{min-width:0;overflow-wrap:anywhere}
.emenda-datas{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:4px;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.emendas-mais+.aviso{margin-top:40px}
.emendas>div>.aviso{margin-top:16px}
.emendas-links{margin-top:24px}
@media (max-width:900px){.emendas-lista{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .emendas-links .tecla{width:100%;text-align:center}
}

/* a escolha do Mandato: uma tecla por Mandato, a do que está na tela apertada; quebra em linhas no celular */
.mandatos{margin-bottom:20px}
.mandatos ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.mandatos .tecla{min-height:48px;display:inline-flex;align-items:center;text-decoration:none}
.mandatos .tecla[aria-current=true]{background:var(--ink);color:var(--on-ink);border-bottom-color:transparent;transform:translateY(3px)}
.mandatos .tecla:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:760px){
  .mandatos .tecla{flex:1 1 100%;justify-content:center}
}

/* as três abas da cidade: teclas grandes, sempre à vista (três em linha; o texto quebra em duas linhas no celular) */
.abas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-bottom:28px}
.aba{min-height:60px;padding:6px 10px;font-size:1.125rem}
.aba[aria-selected=true]{background:var(--ink);color:var(--on-ink);border-bottom-color:transparent;transform:translateY(3px)}
.aba:focus-visible,.tecla:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.painel>.cartao,.painel>.aviso{margin-top:0}
.painel>.aviso{margin-top:16px}
.painel[hidden]{display:none}

/* o plano como livro: uma página por vez, Anterior e Próxima em cima e embaixo */
.pagina-status{margin:16px 0 12px;font:700 1.25rem/1.3 var(--display);letter-spacing:-.01em}
.livro-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.livro-nav .tecla{min-height:60px;font-size:1.125rem}
.livro-nav .tecla:disabled{opacity:.4;cursor:not-allowed;transform:none}
.resultados{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.voltar-lista{margin-top:4px}
@media (max-width:560px){
  .abas{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .aba{font-size:1rem;padding:6px 6px}
  .resultados .tecla{flex:1 1 100%}
}

/* o caminho do dinheiro: quatro teclas no resumo da cidade e um indicador compacto em cada emenda */
.etapas{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.etapa{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:var(--r);background:var(--surface);overflow-wrap:anywhere}
.etapa-nome{font-weight:700}
.etapa-nome small{font-weight:400;color:var(--muted)}
.etapa-valor{font:700 1.375rem/1.15 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.etapa-frase{color:var(--muted);font-size:var(--step-small)}
.mes-frase{margin-top:10px;font-weight:600;overflow-wrap:anywhere}
.mes-cartao .emendas-lista{margin-top:16px}
.mes-cartao .cartao{background:var(--surface-2)}
.emenda-estado{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.passos{flex:none;margin:0;padding:0;list-style:none;display:flex;gap:4px}
.passos li{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:6px;font:700 .8125rem/1 var(--text)}
.passos li.feito{background:var(--confirma);color:var(--on-confirma);border-color:var(--confirma)}
.emenda-frase{min-width:0;overflow-wrap:anywhere}
.emenda p.emenda-datas{margin:10px 0 0;padding:0;border:0;color:var(--muted);font-size:var(--step-small)}
.todas{margin-top:16px}
.todas h4{margin:24px 0 8px;font:700 1.125rem/1.2 var(--display)}
.todas-ul{margin:0;padding:0;list-style:none;border-radius:var(--r);background:var(--surface);overflow:hidden}
.todas-ul li{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,2.4fr) minmax(0,1fr);gap:4px 16px;padding:12px 16px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.todas-ul li:first-child{border-top:0}
.todas-valor{font-variant-numeric:tabular-nums}
.todas-etapa{font-weight:700}
.todas-para{color:var(--muted)}
@media (max-width:900px){.etapas{grid-template-columns:repeat(2,minmax(0,1fr))}.todas-ul li{grid-template-columns:minmax(0,1fr)}}

/* gastos da prefeitura: o total, o mês escolhido, a busca por empresa */
.gastos h3{margin:40px 0 16px;font-size:1.25rem;line-height:1.2}
.gastos-total{max-width:30ch;font:700 var(--step-head)/1.12 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.meses-botoes .tecla.sem-dados{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:104px;min-height:48px;gap:2px;opacity:.55;cursor:not-allowed;transform:none}
.meses-botoes .tecla small{font-size:.75rem;line-height:1.15;text-align:center}
.gasto-pago{margin-top:12px;font:700 1.75rem/1.15 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gasto-fino{margin-top:6px;color:var(--muted);font-size:var(--step-small);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mes-cartao h5{margin:28px 0 10px;font:700 1.125rem/1.2 var(--display);letter-spacing:-.01em}
.linhas{margin:0;padding:0;list-style:none;display:grid;gap:0;border-radius:var(--r);background:var(--surface);overflow:hidden}
.linhas li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 16px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.linhas li:first-child{border-top:0}
.linhas .nome{text-transform:uppercase;font-size:var(--step-small);letter-spacing:.01em;overflow-wrap:anywhere}
.linhas .valor{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.gasto-pf{margin-top:12px;font-weight:600;overflow-wrap:anywhere}
.origens{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.origens li{display:grid;gap:6px;min-width:0}
.origem-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;overflow-wrap:anywhere}
.origem-topo b{font-variant-numeric:tabular-nums}
.barra-origem{height:14px;border-radius:7px;background:var(--surface);overflow:hidden}
.barra-origem span{display:block;height:100%;background:var(--ink)}
.origens details{color:var(--muted);font-size:var(--step-small)}
.origens summary{cursor:pointer;min-height:24px}
.origens details ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;overflow-wrap:anywhere}
.gastos-busca{margin-top:40px}
.gastos-busca .campo.busca{max-width:640px}
.empresas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start}
.empresa{min-width:0}
.empresa h4{font:700 1.125rem/1.25 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.empresa .gasto-fino{margin-top:4px}
.empresa-total{margin-top:10px;font-weight:700;font-variant-numeric:tabular-nums}
.empresa ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.empresa li{display:flex;justify-content:space-between;gap:12px}
.gastos>div>.aviso{margin-top:16px}
.gastos-busca+.aviso{margin-top:40px}
@media (max-width:900px){.empresas{grid-template-columns:minmax(0,1fr)}}
.origens li.repasse{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}

/* gastos da prefeitura: Entrou (verde) x Saiu (laranja), nunca vermelho */
.es-periodo{margin:0 0 10px;color:var(--muted);font-weight:600}
.entrou-saiu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.es-bloco{min-width:0;padding:16px 18px;border-radius:var(--r);border-bottom:4px solid transparent}
.es-bloco.entrou{background:var(--confirma);color:var(--on-confirma);border-bottom-color:var(--ledge-confirma)}
.es-bloco.saiu{background:var(--corrige);color:var(--on-corrige);border-bottom-color:var(--ledge-corrige)}
.es-rotulo{display:flex;align-items:center;gap:8px;font:700 1.125rem/1.2 var(--display)}
.es-seta{font-size:1.5rem;line-height:1}
.es-valor{margin-top:8px;font:700 clamp(1.25rem,2.4vw,2rem)/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.entrou-saiu.grande .es-valor{font-size:clamp(1.5rem,3.6vw,2.5rem)}
.es-diferenca{margin-top:14px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#gastos-sem-repasses{margin-top:12px}
.es-legenda{display:flex;gap:18px;margin:0 0 8px;font-size:var(--step-small);font-weight:600}
.es-legenda span::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:4px;vertical-align:-2px}
.es-legenda .entrou::before{background:var(--confirma)}
.es-legenda .saiu::before{background:var(--corrige)}
.es-rolagem{overflow-x:auto;margin-bottom:12px;padding-bottom:6px;border-radius:var(--r);background:var(--surface)}
.es-grafico{display:flex;min-width:100%;width:max-content;gap:4px;padding:10px}
.col-mes{flex:1 0 56px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:48px;padding:6px 4px;border:2px solid transparent;border-radius:var(--r);background:none;color:var(--ink);font:inherit;cursor:pointer}
.col-mes:hover:not(:disabled){background:var(--bg)}
.col-mes[aria-pressed=true]{border-color:var(--ink);background:var(--surface-2);font-weight:700}
.col-mes:disabled{opacity:.45;cursor:not-allowed}
.col-barras{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%;height:150px}
.barra{display:block;width:16px;min-height:2px;border-radius:4px 4px 0 0}
.barra.entrou{background:var(--confirma)}
.barra.saiu{background:var(--corrige)}
.col-rotulo{display:flex;flex-direction:column;align-items:center;font-size:var(--step-small);line-height:1.15;text-transform:capitalize}
.col-rotulo small{font-size:.75rem;color:var(--muted)}
.col-mes:disabled .col-barras{border-bottom:2px dashed var(--control)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.col-mes{position:relative}
@media (max-width:520px){.entrou-saiu{grid-template-columns:minmax(0,1fr)}}

/* campanha e patrimônio do prefeito (aba Prefeito) */
.campanha{margin-top:40px}
.campanha h3{margin:32px 0 16px;font-size:1.25rem;line-height:1.2}
.campanha h4{margin:28px 0 10px;font:700 1.125rem/1.2 var(--display);letter-spacing:-.01em}
.campanha>div>.aviso{margin-top:16px}
.campanha .linhas .gasto-fino{grid-column:1 / -1;margin:0}
.camp-resto{margin-top:12px;color:var(--muted);font-size:var(--step-small)}
.camp-resto summary{cursor:pointer;display:flex;align-items:center;min-height:48px}
.camp-resto .linhas{margin-top:8px}

/* população e valor por habitante; parecer federal da emenda */
.por-habitante{margin-top:6px;font-size:var(--step-small);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.etapa .por-habitante{display:block;color:var(--muted)}
.emenda-analise{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.emenda-analise .emenda-linha{margin-top:0;font-weight:600}
.emenda-analise .reprovado{margin-top:10px;padding:10px 14px;border-radius:var(--r);background:var(--corrige);color:var(--on-corrige);font-weight:700;font-variant-numeric:tabular-nums}
.emenda .parecer{margin-top:8px}
.emenda .parecer summary{cursor:pointer;display:flex;align-items:center;min-height:48px;font-weight:600}
.emenda .parecer .fonte-texto{display:block;margin-top:6px;white-space:pre-line;overflow-wrap:anywhere}

/* gasto com pessoal frente ao limite da LRF (aba Gastos) */
.pessoal{margin-bottom:8px}
.pessoal h3{margin-top:0}
.pessoal-frase{max-width:46ch;font:700 1.375rem/1.25 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.barra-lrf{position:relative;height:20px;margin-top:18px;border-radius:10px;background:var(--surface);overflow:hidden}
.barra-lrf .enche{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.barra-lrf .enche.acima{background:var(--corrige)}
.barra-lrf .marca{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--bg)}
.barra-lrf .marca.maximo{width:4px;margin-left:-2px;background:var(--corrige)}
.lrf-limites{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.lrf-limites li{display:flex;align-items:center;gap:8px}
.lrf-limites .chave{width:14px;height:14px;border-radius:4px;background:var(--bg);border:2px solid var(--ink)}
.lrf-limites .chave.maximo{background:var(--corrige);border-color:var(--corrige)}
.pessoal+.empty,.pessoal+.empty+div{margin-top:32px}

/* coincidências entre doadores da campanha e empresas pagas (aba Gastos) */
.coincidencias{margin-top:40px}
.coincidencias+.aviso{margin-top:40px}
.coincidencias .coinc-intro{max-width:56ch;font-weight:600}
.coincidencias .empresas,.coincidencias .empty{margin-top:16px}
.coincidencias>.aviso{margin-top:16px}
.metodo{margin-top:12px;color:var(--muted);font-size:var(--step-small)}
.metodo summary{cursor:pointer;display:flex;align-items:center;min-height:48px}
.metodo p{max-width:62ch}