/* Identidade da campanha — Saymon Veiga 2090, Deputado Federal (PR), PODEMOS.
   Tema: TDAH, Autismo e Neurodivergencia.

   Acessibilidade aqui nao e enfeite, e o proprio tema da campanha. Por isso:
   - todo texto de leitura passa em contraste AA;
   - laranja so aparece em display grande ou com texto escuro em cima: em texto
     pequeno com branco ele fica em 3.4:1 e reprova;
   - nenhuma transicao roda sem checar prefers-reduced-motion;
   - foco sempre visivel e alvo de toque de no minimo 44px;
   - campo sempre com <label> de verdade, nunca so placeholder. */

:root {
  --azul: #1B3FCC;
  --azul-escuro: #13228C;
  --azul-claro: #EEF0FD;
  --laranja: #F2711C;
  /* Fora do sistema de cores do guia, de proposito: laranja sobre azul royal
     da 2,7:1 de contraste, abaixo do minimo da WCAG. Este dourado da 5,1:1.
     Usado so onde a paleta do guia deixaria texto ilegivel. */
  --dourado: #FFC40C;
  --creme: #FAF7F0;
  --tinta: #1F2328;
  --cinza: #5B6070;
  --borda: #DCD6CB;
  --branco: #fff;
  --ok: #0F7A3D;
  --erro: #B3261E;
  /* Vermelho do canal de denuncia. Mais fechado que o vermelho do arco-iris
     para passar contraste AA com texto branco (6:1) — o botao carrega texto
     pequeno em celular. */
  --vermelho: #C0271A;
  --raio: .75rem;
  --sombra: 0 1px 2px rgba(20,22,28,.06), 0 6px 20px rgba(20,22,28,.07);
  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Qualquer regra nossa com `display` vence o display:none que o navegador da a
   [hidden] — regra de autor ganha de regra de user agent. Foi assim que a
   paginacao aparecia com "Pagina 1 de 1": o JS punha hidden=true e o
   `.paginacao { display: flex }` desfazia em silencio. Uma linha aqui fecha a
   classe inteira do problema, em vez de caçar elemento por elemento. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--texto);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

.envelope { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }
.envelope-estreito { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); }
h2 { font-size: clamp(1.1rem, 3vw, 1.35rem); margin-top: 0; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--azul); font-weight: 600; }

/* ---- Marca ---- */
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.infinito { width: 42px; height: 21px; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-cargo { font-family: var(--display); font-weight: 700; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.marca-nome { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
/* O numero, na combinacao que o guia manda: laranja sobre azul royal. Sozinhas,
   essas duas cores dao 2,72:1 de contraste — abaixo do minimo de 3:1 da WCAG.
   O fio de grafite em volta do glifo resolve, porque a norma mede a cor
   ADJACENTE ao texto: laranja sobre grafite da 5,38:1.

   O fio precisa ser escuro. Marfim nao serve (2,74:1) e branco tambem nao
   (2,94:1): este laranja tem luminancia media, so contrasta com escuro.

   text-shadow em oito direcoes em vez de -webkit-text-stroke: o stroke e
   centrado no contorno e come a espessura da letra, que ja e pesada aqui. */
.numero { font-family: var(--display); font-weight: 800; background: var(--azul); color: var(--laranja);
  border-radius: .45rem; padding: .1rem .5rem; font-size: 1.05rem;
  text-shadow:
     1px  0 0 var(--tinta),  -1px  0 0 var(--tinta),
     0  1px 0 var(--tinta),   0  -1px 0 var(--tinta),
     1px  1px 0 var(--tinta),  1px -1px 0 var(--tinta),
    -1px  1px 0 var(--tinta), -1px -1px 0 var(--tinta); }

.barra-topo { background: var(--branco); border-bottom: 1px solid var(--borda); }
.barra-topo > * { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }

.faixa-tema { display: inline-flex; align-items: center; gap: .5rem; background: var(--tinta); color: var(--branco); border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; font-weight: 600; }
.faixa-tema .infinito { width: 32px; height: 16px; }

/* ---- Hero ---- */
.hero { background: var(--azul); color: var(--branco); padding: 2.5rem 0 3rem; }
.hero h1 { color: var(--branco); max-width: 18ch; }
.hero .destaque { color: var(--dourado); }
.hero p { color: rgba(255,255,255,.92); max-width: 46ch; }
.hero :focus-visible { outline-color: var(--dourado); }

/* ---- Cartoes ---- */
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.4rem; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 1.25rem; }
.cartao-flutua { margin-top: -2rem; position: relative; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.metrica { background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--azul); border-radius: var(--raio); padding: .9rem 1rem; }
.metrica b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metrica span { font-size: .82rem; color: var(--cinza); }
.metrica-apoio { border-left-color: var(--laranja); }

/* ---- Formulario ---- */
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.campo .ajuda { font-size: .82rem; color: var(--cinza); margin: .3rem 0 0; }
/* search e textarea faltavam na lista: a busca do topo saia miuda ao lado dos
   outros filtros e o campo de anotacao da ficha saia monoespaçado. */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=file], input[type=search], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; color: var(--tinta); background: var(--branco);
  border: 1.5px solid var(--borda); border-radius: .55rem;
}
textarea { min-height: 92px; resize: vertical; }
#relato { min-height: 180px; }
input:read-only { background: #F7F4EF; color: var(--cinza); }
.opcional { font-weight: 400; color: var(--cinza); }

.aceite { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.aceite input { width: 22px; height: 22px; min-height: 0; margin: .15rem 0 0; flex: none; accent-color: var(--azul); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 48px; padding: .75rem 1.25rem; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--branco); background: var(--azul); border: 2px solid var(--azul); border-radius: .55rem; cursor: pointer; }
.btn:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn-secundario { color: var(--azul); background: var(--branco); }
.btn-secundario:hover { background: var(--azul-claro); }
.btn-linha { width: auto; }
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.hero :focus-visible, .barra-painel :focus-visible { outline-color: var(--dourado); }

/* ---- Recado de estado (aria-live) ---- */
.recado { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: .55rem; font-weight: 600; font-size: .95rem; }
.recado:empty { display: none; }
.recado-ok { background: #E6F4EC; color: var(--ok); border: 1px solid #B8E0C8; }
.recado-erro { background: #FBEAE9; color: var(--erro); border: 1px solid #F1C4C1; }

/* ---- Tabelas ---- */
.rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .8rem; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); background: #FAF8F4; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.posicao { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--creme); font-family: var(--display); font-weight: 800; font-size: .8rem; }
tbody tr:first-child .posicao { background: var(--dourado); }
.vazio { padding: 1.5rem; text-align: center; color: var(--cinza); font-size: .92rem; }

/* ---- Abas do painel ---- */
/* Navegacao lateral, como no OraCRM que a equipe ja usa. Em faixa horizontal
   as sete secoes quebravam em duas linhas e a segunda linha lia como enfeite;
   em coluna todas ficam visiveis o tempo todo e a secao aberta e obvia. */
.painel-grade { max-width: 1240px; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.painel-conteudo { min-width: 0; }

.abas { display: flex; flex-direction: column; gap: .15rem; margin: 0; position: sticky; top: 1rem; }
.aba { appearance: none; text-align: left; width: 100%; background: none; border: 0; border-left: 3px solid transparent; padding: .6rem .8rem; font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--cinza); cursor: pointer; border-radius: .5rem; }
.aba:hover { color: var(--tinta); background: rgba(27,50,196,.05); }
.aba[aria-selected="true"] { color: var(--azul); background: var(--azul-claro); border-left-color: var(--azul); }
.conta-aba:not(:empty) { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--azul); color: var(--branco); font-size: .72rem; line-height: 1.5; vertical-align: middle; }

@media (max-width: 900px) {
  /* Sem largura para a coluna, volta a ser faixa — rolavel, nunca em duas linhas. */
  .painel-grade { grid-template-columns: 1fr; gap: 0; }
  .abas { flex-direction: row; position: static; overflow-x: auto; gap: .35rem;
    margin: 0 0 1.25rem; padding-bottom: .25rem; border-bottom: 2px solid var(--borda); }
  .aba { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent;
    border-radius: .4rem .4rem 0 0; margin-bottom: -2px; }
  .aba[aria-selected="true"] { border-bottom-color: var(--azul); }
}

/* ---- Filtros ---- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; align-items: end; margin-bottom: 1.25rem; }
.filtros .campo { margin-bottom: 0; }

/* ---- Painel ---- */
.barra-painel { background: var(--azul); color: var(--branco); }
.barra-painel .envelope { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.barra-painel .marca-cargo { color: rgba(255,255,255,.75); }
.barra-painel .marca-nome { color: var(--branco); }
.quem { font-size: .88rem; color: rgba(255,255,255,.92); text-align: right; }
.quem b { display: block; font-weight: 700; }
.btn-sair { min-height: 40px; width: auto; padding: .4rem 1rem; font-size: .88rem; background: transparent; color: var(--branco); border-color: rgba(255,255,255,.5); }
.btn-sair:hover { background: rgba(255,255,255,.14); border-color: var(--branco); }
.painel-corpo { padding: 1.5rem 0 3rem; }

.aviso { background: #FFF7E0; border: 1px solid #F5E1A8; border-left: 4px solid var(--dourado); border-radius: var(--raio); padding: 1rem 1.1rem; font-size: .93rem; }

/* ---- Barra de evolucao (sem lib de grafico) ---- */
.evo { display: flex; flex-direction: column; gap: .45rem; }
.evo-linha { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .88rem; }
.evo-barra { height: 12px; border-radius: 999px; background: var(--azul); min-width: 4px; }
.evo-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Rodape ---- */
.rodape { margin-top: 3rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--borda); font-size: .8rem; color: var(--cinza); }
.rodape .legal { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.nota-voto { font-size: .85rem; color: var(--cinza); }
.nota-voto strong { color: var(--tinta); }

.pula-para { position: absolute; left: -9999px; }
.pula-para:focus { left: .5rem; top: .5rem; z-index: 10; background: var(--branco); padding: .6rem 1rem; border-radius: .5rem; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .aba, .metrica { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}

/* Cadastrar apoiador e a acao mais frequente do dia: fica no cabecalho, em
   destaque, visivel de qualquer secao — nao escondida atras de um <details>. */
.acoes-topo { display: flex; align-items: center; gap: .75rem; }
.btn-novo { min-height: 40px; width: auto; padding: .4rem 1rem; font-size: .88rem;
  background: var(--dourado); border-color: var(--dourado); color: var(--tinta); white-space: nowrap; }
.btn-novo:hover { background: #E6B00A; border-color: #E6B00A; color: var(--tinta); }
.titulo-lista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.titulo-lista h2 { margin-bottom: .5rem; }

@media (max-width: 620px) {
  /* Em 375px o cabecalho estourava e o "Sair" saia da tela. O nome de quem
     esta logado e a primeira coisa a sair: quem abriu a sessao sabe quem e. */
  .so-largo { display: none; }
  .acoes-topo { gap: .4rem; }
  .acoes-topo .quem { display: none; }
  .barra-painel .envelope { gap: .5rem; }
}
.ajuda-solta { font-size: .85rem; color: var(--cinza); margin: 0 0 1rem; }
.aceite { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; font-size: .9rem; line-height: 1.4; }
.aceite input { margin-top: .15rem; flex: none; }

.paginacao { display: flex; gap: .9rem; align-items: center; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; font-size: .9rem; color: var(--cinza); }
.paginacao button[disabled] { opacity: .4; cursor: not-allowed; }

/* ===== Central de Mobilizacao (ADR-0017) =====
   Tela da lideranca, desenhada para uma mao em pe na rua. Tudo empilhado numa
   coluna, alvo de toque grande, e o link de captacao acima da dobra — que era
   exatamente o que o painel da Coordenacao nao entregava no celular. */
.central { background: var(--creme); }
.central-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; background: var(--azul); color: var(--branco); position: sticky; top: 0; z-index: 5; }
.central-quem b { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.central-quem span { font-size: .78rem; opacity: .85; }
.central-corpo { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 3rem; }

.bloco-captar { text-align: center; }
.bloco-captar .qr { display: block; margin: 1rem auto; width: 240px; height: 240px; max-width: 70vw;
  background: var(--branco); padding: .6rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.bloco-captar input[readonly] { font-size: .82rem; text-align: center; color: var(--cinza); }
.acoes-captar { display: grid; gap: .6rem; margin-top: .9rem; }

.placar { margin: 1.25rem 0; }
.placar .metrica { border-left-width: 6px; }

/* Cada pessoa e um cartao, nao uma linha de tabela: no celular a tabela de 6
   colunas do painel vira rolagem horizontal, que ninguem usa de pe. */
.pessoas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.pessoa { border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; background: var(--branco);
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: start; }
.pessoa-quem b { display: block; font-weight: 700; line-height: 1.25; }
.pessoa-quem span { font-size: .84rem; color: var(--cinza); }
.pessoa-acoes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pessoa .recado { grid-column: 1 / -1; margin: 0; }
.pessoa .recado:empty { display: none; }

.etiqueta { align-self: start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .25rem .55rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul-escuro); white-space: nowrap; }
.etiqueta-contato { background: #FFF1DF; color: #8A4A12; }
.etiqueta-apoiador { background: #E6F4EC; color: var(--ok); }
.etiqueta-mobilizador { background: #FFF3C4; color: #7A5B00; }

/* Verde do WhatsApp de proposito: e o botao que a lideranca procura sem ler. */
.btn-zap { background: #25D366; border-color: #25D366; color: #06331A; text-decoration: none; }
.btn-zap:hover { background: #1FBA57; border-color: #1FBA57; }
.topo-funil { display: flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--cinza); }

.rodape-central { margin-top: 1.5rem; text-align: center; font-size: .85rem; color: var(--cinza); }

@media (max-width: 380px) {
  .pessoa-acoes { grid-template-columns: 1fr; }
}

/* Paginas juridicas (privacidade, termos). Coluna estreita e entrelinha larga:
   sao textos que a pessoa le de verdade quando esta com duvida, e nao um bloco
   para rolar ate o fim. Nada de letra miuda de proposito. */
.documento { padding: 2rem 1.25rem 4rem; }
.documento h1 { font-family: var(--display); font-size: 1.9rem; margin: 0 0 .35rem; }
.documento h2 { font-family: var(--display); font-size: 1.15rem; margin: 2.2rem 0 .6rem; color: var(--azul-escuro); }
.documento p, .documento li { font-size: 1rem; line-height: 1.65; color: var(--tinta); }
.documento ul { padding-left: 1.2rem; margin: .6rem 0 1rem; }
.documento li { margin-bottom: .4rem; }
.documento a { color: var(--azul); }
.documento .atualizado { font-size: .88rem; color: var(--cinza); margin: 0 0 1.8rem; }
.documento .rodape { margin-top: 3rem; border-top: 1px solid var(--borda); padding-top: 1.2rem; }

/* ===== Ficha da pessoa =====
   <dialog> nativo: foco preso, Esc fecha, fundo inerte — de graca. */
/* ficha-lateral: painel colado na direita, e nao caixa no meio da tela.
   Com modal centralizado a lista some atras do fundo escuro; num painel lateral
   a equipe desce a lista trabalhando pessoa por pessoa sem perder o lugar. E o
   <dialog> continua entregando Esc, foco preso e fundo inerte de graca. */
.ficha { width: min(460px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0 0 0 auto; padding: 0; border: none; border-radius: 0;
  box-shadow: -8px 0 32px rgba(20,22,28,.18); overflow: hidden;
  display: flex; flex-direction: column; }
/* display:flex acima vale mais que o display:none que o navegador da ao
   <dialog> fechado (regra de autor ganha da regra do navegador). Sem isto a
   ficha fechada fica pendurada no fim da pagina como um bloco de 460x900. */
.ficha:not([open]) { display: none; }
.ficha[open] { animation: entra-lateral .18s ease-out; }
@keyframes entra-lateral { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }
/* Fundo mais leve que o de modal: a lista atras precisa continuar legivel. */
.ficha::backdrop { background: rgba(20,22,28,.28); }
.ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--azul); color: var(--branco); position: sticky; top: 0; }
.ficha-topo h2 { margin: 0; font-family: var(--display); font-size: 1.15rem; }
.ficha-x { background: transparent; border: none; color: var(--branco); font-size: 1.25rem; cursor: pointer; line-height: 1; padding: .25rem .5rem; }
.ficha-corpo { padding: 1.25rem; overflow-y: auto; flex: 1; }
.ficha-corpo h3 { font-family: var(--display); font-size: 1rem; margin: 1.8rem 0 .7rem; color: var(--azul-escuro); }

.ficha-dados { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.ficha-dados dt { font-size: .8rem; color: var(--cinza); font-weight: 600; }
.ficha-dados dd { margin: 0; font-size: .95rem; }
.ficha-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.1rem; }

/* Historico em coluna, do mais recente para o mais antigo. */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.linha-tempo li { border-left: 3px solid var(--borda); padding: .1rem 0 .1rem .8rem; }
.linha-tempo .linha-tipo { font-weight: 700; font-size: .85rem; color: var(--azul-escuro); }
.linha-tempo .linha-quando { display: block; font-size: .78rem; color: var(--cinza); }
.linha-tempo p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; }
.linha-tempo .vazio { border-left: none; padding: 1rem 0; }

/* Linha da tabela vira alvo: e o gesto que todo mundo ja tenta antes de
   procurar um botao. */
.linha-pessoa { cursor: pointer; }
.linha-pessoa:hover td { background: var(--azul-claro); }
.linha-pessoa:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* Cabecalho ordenavel: seta so na coluna ativa, para nao poluir. */
.ord { background: none; border: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.ord:hover { color: var(--azul); }
.ord[data-dir="desc"]::after { content: "\2193"; }
.ord[data-dir="asc"]::after { content: "\2191"; }

/* Equipe: quem tem acesso. Desativado fica visivel mas apagado — sumir da
   lista faria a coordenacao achar que a pessoa foi excluida. */
.linha-inativa td { opacity: .55; }
.sub { font-size: .82rem; color: var(--cinza); }
.acoes-linha { display: flex; gap: .4rem; flex-wrap: wrap; }
.acoes-linha .btn { font-size: .82rem; min-height: 34px; padding: .3rem .7rem; }

/* ===== Visao geral: ritmo e funil ===== */
.ritmo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }

.funil { display: grid; gap: 1.1rem; }
.etapa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.etapa-topo b { font-family: var(--display); font-size: .95rem; }
.etapa-topo span { font-variant-numeric: tabular-nums; font-weight: 700; }
.etapa-topo em { font-style: normal; font-weight: 400; color: var(--cinza); font-size: .85rem; }
.etapa-trilho { background: var(--creme); border-radius: 999px; height: 14px; overflow: hidden; }
.etapa-barra { display: block; height: 100%; border-radius: 999px; }
.etapa-captado { background: var(--azul); }
.etapa-contato { background: var(--laranja); }
.etapa-apoiador { background: var(--ok); }
.etapa-mobilizador { background: var(--dourado); }
.etapa-ajuda { margin: .3rem 0 0; font-size: .8rem; color: var(--cinza); }

/* A linha da tabela abre a ficha, mas nada na tela dizia isso — quem nao sabia
   que existe ficha nunca clicava. */
.dica-ficha { margin: 0 0 .6rem; font-size: .85rem; color: var(--azul-escuro);
  background: var(--azul-claro); border-radius: .45rem; padding: .55rem .8rem; }

@media (max-width: 560px) {
  /* No celular painel lateral estreito nao faz sentido: ocupa a tela toda. */
  .ficha { width: 100vw; }
}

/* Precisam de contato: a lista de trabalho do dia. Fica no topo da Visao geral
   porque e a unica coisa da tela que diz o que FAZER, e nao o que aconteceu. */
.parados { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.parado { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem 1rem; align-items: center;
  border: 1px solid var(--borda); border-left: 4px solid var(--laranja);
  border-radius: var(--raio); padding: .7rem .9rem; background: var(--branco); cursor: pointer; }
.parado:hover { background: var(--azul-claro); }
.parado:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.parado-quem b { display: block; line-height: 1.25; }
.parado-quem span { font-size: .82rem; color: var(--cinza); }
.parado-tempo { font-size: .82rem; font-weight: 700; color: var(--laranja); white-space: nowrap; }
.parado .btn { width: auto; min-height: 36px; padding: .35rem .8rem; font-size: .85rem; }
.parados .vazio { border: none; }

@media (max-width: 560px) {
  .parado { grid-template-columns: 1fr; }
  .parado .btn { width: 100%; }
}

/* ===== Mapa do territorio =====
   Escala sequencial de uma cor so: duas cores em mapa de intensidade fazem o
   olho ler categoria onde existe grandeza. Municipio sem ninguem fica no creme
   do fundo — ausencia nao pode competir com presenca. */
.mapa-controles { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.mapa-controles .btn[aria-pressed="true"] { background: var(--azul); color: var(--branco); }

.mapa-caixa { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); padding: .5rem; }
.mapa-pr { width: 100%; height: auto; display: block; }
/* Traco bege no lugar de branco: com stroke branco sobre cartao branco o
   estado inteiro sumia — so a mancha azul aparecia, sem contorno para dizer
   onde ela fica dentro do Parana. */
.mapa-pr path { stroke: #C9C3B7; stroke-width: .4; cursor: pointer; }
.mapa-pr path.f0 { fill: #F4EFE7; }
.mapa-pr path.f1 { fill: #DDE2FA; }
.mapa-pr path.f2 { fill: #B9C2F1; }
.mapa-pr path.f3 { fill: #8593E4; }
.mapa-pr path.f4 { fill: #4A5CD2; }
.mapa-pr path.f5 { fill: var(--azul); }
.mapa-pr path:hover { stroke: var(--tinta); stroke-width: 1.4; }
.mapa-pr path.mun-ativo { stroke: var(--laranja); stroke-width: 2; }

.mapa-legenda { display: flex; align-items: center; gap: .2rem; margin: .6rem 0 0; font-size: .8rem; color: var(--cinza); }
.mapa-legenda i { width: 26px; height: 12px; display: block; }
.mapa-legenda i.f1 { background: #DDE2FA; } .mapa-legenda i.f2 { background: #B9C2F1; }
.mapa-legenda i.f3 { background: #8593E4; } .mapa-legenda i.f4 { background: #4A5CD2; }
.mapa-legenda i.f5 { background: var(--azul); }
.mapa-legenda span:first-child { margin-right: .35rem; }
.mapa-legenda span:last-child { margin-left: .35rem; }

.linha-mun { cursor: pointer; }
.linha-mun:hover { background: var(--azul-claro); }
.linha-mun:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* ===== Pagina de relato =====
   O bloco de canais oficiais vem ANTES do formulario e em destaque de alerta:
   quem esta com o filho sendo maltratado precisa do Disque 100 hoje, nao de um
   mandato que talvez comece em fevereiro. */
.entrada { font-size: 1.05rem; color: var(--tinta); margin: 0 0 1.5rem; }

.aviso-urgente { border: 2px solid var(--laranja); border-radius: var(--raio);
  background: #FFF6F1; padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; }
.aviso-urgente h2 { font-size: 1.05rem; margin: 0 0 .6rem; color: #8A2F0B; }
.aviso-urgente ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.aviso-urgente li { margin-bottom: .35rem; font-size: .95rem; }
.aviso-urgente p { margin: 0; font-size: .92rem; }

.lista-clara { margin: .5rem 0 0; padding-left: 1.2rem; }
.lista-clara li { margin-bottom: .45rem; font-size: .95rem; }

.cartao-relato { border-left: 4px solid var(--vermelho); }

/* Botao do canal de denuncia. Vermelho tem funcao aqui: e o unico caminho da
   pagina que nao pede apoio, e precisa ser encontrado por quem chegou nervoso,
   no celular, sem paciencia para procurar. */
.btn-denuncia { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco);
  width: auto; text-decoration: none; gap: .55rem; }
.btn-denuncia:hover { background: #A11F14; border-color: #A11F14; color: var(--branco); }

.hero .btn-denuncia { display: inline-flex; margin-top: 1.5rem; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.hero-nota { margin: .5rem 0 0; font-size: .88rem; color: rgba(255,255,255,.85); }

@media (max-width: 560px) {
  /* No celular ocupa a largura toda: alvo do tamanho do polegar. */
  .hero .btn-denuncia { display: flex; width: 100%; }
}
.cartao-relato .btn { margin-top: 1rem; }

.links-topo { display: flex; gap: 1rem; align-items: center; }

/* ===== Relatos no painel =====
   Cartao e nao linha de tabela: o que importa num relato e o texto, e texto nao
   cabe em celula sem virar reticencias. */
.relatos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.relato { border: 1px solid var(--borda); border-radius: var(--raio); padding: .85rem 1rem;
  background: var(--branco); cursor: pointer; }
.relato:hover { background: var(--azul-claro); }
.relato:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.relato-novo { border-left: 4px solid var(--laranja); }
.relato-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.relato-topo b { font-family: var(--display); font-size: .95rem; }
.relato-resumo { margin: .4rem 0 .5rem; font-size: .92rem; color: var(--tinta); }
.relato-pe { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--cinza); }
.pode-contato { color: var(--ok); font-weight: 600; }
.relato-texto { white-space: pre-wrap; background: var(--creme); border-radius: .5rem;
  padding: .8rem .9rem; font-size: .95rem; margin: 0 0 1rem; }

.etiqueta { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
  white-space: nowrap; background: var(--creme); color: var(--cinza); }
.etiqueta-nova { background: var(--laranja); color: var(--tinta); }
.etiqueta-em_analise { background: var(--azul-claro); color: var(--azul); }
.etiqueta-encaminhada { background: #DFF3E6; color: var(--ok); }

/* Botao de cadastrar da Central: alvo do tamanho do polegar, porque quem usa
   essa tela esta de pe, na rua, com uma mao so. */
.btn-cadastrar { min-height: 54px; font-size: 1.05rem; margin-bottom: 1rem;
  background: var(--dourado); border-color: var(--dourado); color: var(--tinta); }
.btn-cadastrar:hover { background: #E6B00A; border-color: #E6B00A; color: var(--tinta); }

.promessa { background: var(--azul-claro); border-radius: .5rem; padding: .7rem .9rem;
  margin: 0 0 1.25rem; font-size: .92rem; color: var(--azul-escuro); }
.titulo-secao { font-family: var(--display); font-size: 1rem; color: var(--azul-escuro);
  margin: 1.8rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }

@media (max-width: 560px) {
  /* A caixa de canais urgentes e importante, mas nao pode ocupar uma tela
     inteira antes do formulario no celular. */
  .aviso-urgente { padding: .9rem 1rem; }
  .aviso-urgente li, .aviso-urgente p { font-size: .88rem; }
  .entrada { font-size: 1rem; }
}

/* Filtros recolhidos no celular. Classe e nao [hidden] de proposito: o form
   continua no DOM e no leitor de tela quando aberto, e o botao carrega o
   aria-expanded. */
.so-estreito { display: none; }
.filtros-recolhidos { display: none; }
.tem-filtro { border-color: var(--laranja); color: var(--laranja); }

@media (max-width: 900px) {
  .so-estreito { display: inline-flex; width: auto; min-height: 44px;
    padding: .5rem 1.1rem; font-size: .92rem; margin-bottom: 1rem; }

  /* Faixa de secoes: sem barra de rolagem a vista e com o item ativo inteiro
     na tela — meia palavra cortada faz a pessoa achar que a secao nao existe. */
  .abas { scrollbar-width: none; scroll-snap-type: x proximity; }
  .abas::-webkit-scrollbar { display: none; }
  .aba { scroll-snap-align: start; }
}

/* ===== Barra inferior (so no celular) =====
   Navegacao no alcance do polegar, como em app nativo. Cinco alvos de 56px:
   abaixo disso o dedo erra, e errar navegacao no meio da rua faz a pessoa
   desistir da ferramenta. */
.barra-inferior { display: none; }

.lista-secoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-secoes button { width: 100%; text-align: left; background: none; border: 1px solid var(--borda);
  border-radius: .55rem; padding: .85rem 1rem; font-family: var(--display); font-weight: 700;
  font-size: .95rem; color: var(--tinta); cursor: pointer; min-height: 48px; }
.lista-secoes button:hover { background: var(--azul-claro); }
.lista-secoes .secao-atual { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); }

@media (max-width: 900px) {
  /* A faixa horizontal sai de cena: quem navega e a barra de baixo. */
  .abas { display: none; }
  .painel-grade { grid-template-columns: 1fr; }

  .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--branco); border-top: 1px solid var(--borda);
    box-shadow: 0 -2px 12px rgba(20,22,28,.08);
    padding-bottom: env(safe-area-inset-bottom); }
  .barra-inferior button { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .15rem; min-height: 56px; padding: .4rem .2rem;
    background: none; border: 0; cursor: pointer; color: var(--cinza);
    font-family: var(--display); font-weight: 700; font-size: .68rem; position: relative; }
  .barra-inferior svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .barra-inferior [aria-current="page"] { color: var(--azul); }
  .barra-inferior [aria-current="page"]::before { content: ""; position: absolute; top: 0;
    left: 50%; transform: translateX(-50%); width: 28px; height: 3px;
    background: var(--azul); border-radius: 0 0 3px 3px; }
  .barra-inferior:focus-within button:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }

  /* Ponto de aviso: denuncia nova nao pode depender de a pessoa abrir a aba. */
  .ponto { position: absolute; top: .35rem; right: 50%; transform: translateX(22px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--vermelho); color: var(--branco); font-size: .62rem;
    line-height: 16px; text-align: center; }
  #ponto-base { background: var(--azul); width: 8px; height: 8px; min-width: 0; padding: 0;
    transform: translateX(14px); }

  /* Espaco para a barra nao cobrir o fim da pagina nem o botao de acao. */
  .painel-corpo { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ===== Conversa dentro da ficha =====
   Balao de cada lado, como qualquer app de mensagem: quem responde precisa
   distinguir num relance o que a pessoa disse do que a campanha disse. */
.conversa { max-height: 320px; overflow-y: auto; background: var(--creme);
  border-radius: .6rem; padding: .8rem; display: grid; gap: .5rem; margin-bottom: .8rem; }
.msg { max-width: 85%; border-radius: .7rem; padding: .5rem .7rem; }
.msg p { margin: 0; font-size: .92rem; white-space: pre-wrap; }
.msg span { font-size: .72rem; color: var(--cinza); }
.msg-dela { background: var(--branco); border: 1px solid var(--borda); justify-self: start; }
.msg-nossa { background: var(--azul-claro); justify-self: end; }
.msg-nossa span { color: var(--azul-escuro); }

.responder textarea { margin-bottom: .5rem; min-height: 60px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Meta da campanha =====
   Fica no alto da Visao geral porque e a unica coisa da tela que responde
   "estamos perto ou longe". O resto responde "o que aconteceu". */
.meta { background: var(--azul); color: var(--branco); border-radius: var(--raio);
  padding: 1.1rem 1.25rem; }
.meta-topo { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.meta-topo b { font-family: var(--display); font-size: 2rem; line-height: 1; }
.meta-topo span { font-size: .95rem; color: rgba(255,255,255,.85); }
.meta-topo em { margin-left: auto; font-style: normal; font-family: var(--display);
  font-weight: 800; font-size: 1.5rem; color: var(--dourado); }
.meta-trilho { background: rgba(255,255,255,.22); border-radius: 999px; height: 14px;
  overflow: hidden; margin: .8rem 0 .6rem; }
.meta-barra { display: block; height: 100%; background: var(--dourado); border-radius: 999px; }
.meta-nota { margin: 0; font-size: .85rem; color: rgba(255,255,255,.85); }

/* Placar na Central: lista, nao tabela. Tabela de quatro colunas em 375px vira
   rolagem lateral, e ninguem rola para o lado no meio da rua. */
.lista-mun, .ranking-simples { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.lista-mun li, .ranking-simples li { display: flex; align-items: baseline; gap: .5rem;
  padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: .55rem; background: var(--branco); }
.lista-mun .pos { font-family: var(--display); font-weight: 800; color: var(--azul); min-width: 1.2rem; }
.lista-mun b, .ranking-simples b { flex: 1; }
.ranking-simples .cidade { font-size: .82rem; color: var(--cinza); }
.lista-mun .conta, .ranking-simples .conta { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lista-mun em, .ranking-simples em { font-style: normal; font-weight: 400; color: var(--cinza); font-size: .8rem; }

/* ===== Marcadores =====
   Botao que alterna, e nao caixa de selecao: em celular o alvo fica do tamanho
   do dedo e o estado (marcado/nao) se le de longe pela cor. */
.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.etiqueta-botao { border: 1.5px solid var(--borda); background: var(--branco); color: var(--cinza);
  border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; min-height: 36px; }
.etiqueta-botao:hover { border-color: var(--azul); color: var(--azul); }
.etiqueta-botao.marcada { background: var(--azul); border-color: var(--azul); color: var(--branco); }
/* O ponto discreto marca o que e dado de saude — sem alarde na tela de quem
   trabalha, mas visivel para quem for marcar. */
.etiqueta-botao.sensivel { border-style: dashed; }
.etiqueta-botao.sensivel.marcada { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.etiqueta-botao[disabled] { opacity: .5; cursor: progress; }

/* Na tabela, so leitura. */
.etiqueta-mini { display: inline-block; background: var(--azul-claro); color: var(--azul-escuro);
  border-radius: 999px; padding: 0 .5rem; font-size: .72rem; font-weight: 700;
  margin-right: .25rem; white-space: nowrap; }

/* Bloco opcional de autodeclaracao: separado do resto por borda, para nao ser
   confundido com campo obrigatorio. */
.declaracao { border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.1rem .6rem; margin: 0 0 1.25rem; }
.declaracao legend { font-family: var(--display); font-weight: 700; font-size: .95rem;
  padding: 0 .4rem; }
.declaracao .ajuda { margin: 0 0 .8rem; }
.aceite-saude { background: var(--azul-claro); border-radius: .5rem; padding: .7rem .8rem; }

/* Busca por IA. O aviso de que e IA fica junto do campo, nao escondido num
   rodape: a Resolucao 23.755 exige aviso destacado e acessivel, e mesmo em uso
   interno quem le o resultado precisa saber que uma maquina interpretou. */
.busca-ia { background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--dourado);
  border-radius: var(--raio); padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.busca-ia label { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.busca-ia-linha { display: flex; gap: .6rem; }
.busca-ia-linha input { flex: 1; }
.busca-ia .ajuda { margin-top: .5rem; }

@media (max-width: 560px) {
  .busca-ia-linha { flex-direction: column; }
  .busca-ia-linha .btn { width: 100%; }
}

/* Zona de perigo da ficha. Separada e vermelha de proposito: apagar alguem a
   pedido e uma acao legitima e frequente, mas irreversivel, e nao pode ficar
   parecida com "salvar anotacao" logo acima. */
.zona-perigo { margin-top: 1.75rem; padding: 1rem 1.1rem; border: 1px solid var(--erro, #c0392b);
  border-left-width: 4px; border-radius: var(--raio); background: #fdf3f2; }
.zona-perigo h3 { margin-top: 0; color: var(--erro, #c0392b); }
:root[data-tema="escuro"] .zona-perigo,
[data-tema="escuro"] .zona-perigo { background: #2a1a19; }
.btn-perigo { background: var(--erro, #c0392b); border-color: var(--erro, #c0392b); color: #fff; }
.btn-perigo:hover:not(:disabled) { filter: brightness(1.1); }

/* Bloco de assinatura do guia de comunicacao: nome, descritor e slogan, nesta
   ordem. O guia manda em toda peca — a linha descritiva diz do que se trata e o
   slogan diz de quem se trata. */
.assinatura { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .9rem;
  font-family: var(--display); line-height: 1.35; }
.assinatura strong { font-size: .95rem; letter-spacing: .04em; color: var(--azul); }
.assinatura span { font-size: .85rem; color: var(--cinza); }
.assinatura em { font-size: .9rem; font-style: normal; font-weight: 700; color: var(--tinta); }

/* As tres lutas. Vem antes do formulario porque o guia diz que o pedido ao
   eleitor e claro — votar 2090 por estas tres coisas — e pedir apoio sem dizer
   para que e pedir no escuro. */
.lutas { display: grid; gap: .9rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.luta { background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--azul);
  border-radius: var(--raio); padding: .9rem 1.1rem; }
.luta:nth-child(2) { border-left-color: var(--laranja); }
.luta:nth-child(3) { border-left-color: var(--tinta); }
.luta h3 { margin: 0 0 .3rem; font-size: 1rem; }
.luta p { margin: 0; font-size: .92rem; color: var(--cinza); }
.luta .blindagem { margin-top: .45rem; font-size: .85rem; color: var(--tinta); }