/* ════════════════════════════════════════════════════════════════════════════
   PORTAL DO CIDADÃO — capa de jornal com alma de órgão público.
   Casado com a identidade do sistema (azul #1a54bf, Raleway, brasão) e uma
   camada a mais de profundidade: azul-noite nas âncoras (manchete e rodapé),
   dourado heráldico só nos fios de eyebrow, neutros com viés de azul.
   Fontes das seções NOVAS em `em`: os botões A−/A+ da barra de acessibilidade
   mudam o font-size do .portal e a página inteira respira junto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A calha da barra de rolagem fica reservada mesmo quando a página é curta
   (o instante "Carregando…" entre uma página e outra): sem isso a barra
   some/volta e a página inteira treme na horizontal durante a transição. */
html {
    scrollbar-gutter: stable;
}

.portal {
    --p-noite: #0d2247;
    --p-noite-2: #123170;
    --p-ouro: #d9a441;
    --p-tinta: #16233d;
    --p-texto: #44506a;
    --p-borda: #e2e8f4;
    --p-gelo: #f6f8fc;
    /* Largura-mãe do conteúdo. Em telas grandes ela cresce (ver media queries
       abaixo), pra página não ficar espremida no meio de um monitor largo. */
    --p-largura: 1140px;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor-fundo);
    color: var(--p-texto);
    line-height: 1.65;
    /* Mata a faixa branca / rolagem lateral no celular: clipa qualquer vazamento
       horizontal na raiz. `clip` (não `hidden`) NÃO cria contêiner de rolagem, então
       não quebra `position: sticky` dos filhos. */
    overflow-x: clip;
}

.portal a { color: var(--cor-primaria); }

/* Telas grandes: a largura-mãe cresce quando há espaço sobrando. */
@media (min-width: 1440px) { .portal { --p-largura: 1280px; } }
@media (min-width: 1720px) { .portal { --p-largura: 1380px; } }

/* ── Barra de acessibilidade (funciona de verdade) ─────────────────────────── */

.pacess {
    background: var(--p-noite);
    font-size: 0.76em;
}

.pacess-conteudo {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
}

.pacess a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.pacess a:hover { color: #fff; text-decoration: underline; }

.pacess-pulos { display: flex; gap: 16px; }

.pacess-controles {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pacess-controles button {
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--fonte-principal);
    font-size: 1em;
    font-weight: 700;
    padding: 3px 9px;
    cursor: pointer;
}

.pacess-controles button:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pacess-controles button:disabled { opacity: 0.35; cursor: default; }
.pacess-controles button.ativo { background: rgba(255, 255, 255, 0.16); color: #fff; }

.pacess-restrito {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Cabeçalho branco ──────────────────────────────────────────────────────── */

/* A faixa branca do topo ganha textura: a arte geométrica entra ATRÁS de uma
   cortina branca (o ::before), virando marca d'água. O nome da câmara segue
   mandando na leitura; a arte só tira o vazio do branco chapado. */
.pcabecalho {
    position: relative;
    /* 25% da altura, não o centro: o miolo da arte é onde o X converge e fica
       lavado; um pouco acima pega os chanfros abertos dos dois lados, e a
       faixa larga do cabeçalho ganha textura simétrica de ponta a ponta. */
    background: #fff url('/images/fundo/back-1.png') center 25% / cover no-repeat;
    /* Sem borda embaixo: quem separa o cabeçalho do conteúdo agora é a
       própria faixa azul do menu. */
}

.pcabecalho::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.68);
    pointer-events: none;
}

/* Conteúdo e menu sobem acima da cortina (o menu é transparente de
   propósito: a arte atravessa a faixa branca inteira, sem emenda). */
.pcabecalho-conteudo,
.pcabecalho .pnav { position: relative; z-index: 1; }

.pcabecalho-conteudo {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 16px;
}

.pcabecalho-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* Mesma placa adaptativa do rodapé: com a marca d'água no cabeçalho, o fundo
   quadrado do PNG destoava da textura. Arredondado, ele vira emblema
   proposital — e a cor vem do próprio arquivo (componente BrasaoCamara). */
.pcabecalho-brasao {
    width: 100px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 3px 14px rgba(13, 34, 71, 0.20);
}

/* Brasão recortado dispensa a placa e assenta direto sobre o cabeçalho. */
.pcabecalho-brasao.brasao-sem-placa {
    background: transparent;
    padding: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(13, 34, 71, 0.18));
}

.pcabecalho-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pcabecalho-textos strong {
    /* Sombra mínima: só descola o nome da textura da marca d'água. */
    text-shadow: 0 1px 2px rgba(13, 34, 71, 0.16);
    font-size: 1.68em;
    font-weight: 800;
    color: var(--p-tinta);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pcabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcabecalho-busca {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 14px;
    /* Branco sólido + contorno firme: com a marca d'água no cabeçalho, o
       fundo gelo antigo se confundia com a textura e a busca sumia. O par de
       contraste está declarado logo abaixo, no bloco de alto contraste. */
    background: #fff;
    border: 1.5px solid #ccd6e8;
    border-radius: 999px;
    color: var(--p-texto);
    font-family: var(--fonte-principal);
    font-size: 0.85em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(13, 34, 71, 0.07);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.pcabecalho-busca:hover {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.08);
}

.pcabecalho-menu {
    display: none;
    background: none;
    border: none;
    color: var(--p-tinta);
    cursor: pointer;
    padding: 6px;
}

/* ── Navegação integrada ───────────────────────────────────────────────────── */

/* Faixa do menu num azul-noite INTERMEDIÁRIO: mais claro que a barra de
   acessibilidade (--p-noite) e mais fundo que o azul do herói (--cor-primaria).
   Os três tons empilhados dão profundidade ao topo. */
.pnav { background: var(--p-noite-2); }

.pnav-conteudo {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pnav a.pnav-link {
    position: relative;
    display: block;
    padding: 13px 16px;
    /* Texto claro sobre o azul: o item inativo respira a 84% e o ativo
       acende em branco puro. */
    color: rgba(255, 255, 255, 0.84);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 700;
    /* Sem canto arredondado: sobre o azul, o arredondado fazia o realce do
       hover parecer ter a borda esfumada. Retângulo limpo. */
    border-radius: 0;
    transition: color var(--transicao), background var(--transicao);
}

.pnav a.pnav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* O ícone dos itens só aparece no MENU MOBILE (ver media query 640px). */
.pnav-link-icone { display: none; }

.pnav a.pnav-link.ativo { color: #fff; }

/* O sublinhado ativo é UM elemento que desliza entre os itens (layoutId). */
.pnav-indicador {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    /* Sobre o azul, o sublinhado que desliza é branco. */
    background: #fff;
}

.pnav a.pnav-aovivo {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: var(--cor-perigo);
    font-size: 0.8em;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pnav-aovivo-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-perigo);
    animation: portal-pulso 1.2s infinite;
}

@keyframes portal-pulso {
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .pnav-aovivo-ponto, .phero-aovivo-ponto { animation: none; }
}

/* ── Manchete (a capa do jornal) ───────────────────────────────────────────── */

/* O mesmo céu do login do sistema: o cidadão e o servidor entram pela mesma
   porta visual. Sobre ele, a arte cívica do semicírculo do plenário — nada de
   marca de fornecedor em página de órgão público (CF, art. 37). */
.phero {
    position: relative;
    background: linear-gradient(135deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 50%, var(--p-capa-fim, #2e6fd4) 100%);
    color: #fff;
    overflow: hidden;
}

/* Marca d'água do brasão da câmara, como num papel timbrado: gigante, central,
   um sussurro atrás de tudo. invert(1) vira o fundo branco do PNG em preto e o
   blend `screen` faz preto sumir — sobra só o desenho em relevo branco; o
   contrast(1.3) esmaga resíduos de fundo quase-branco (artefatos do PNG). */
.phero-brasao-marca {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: min(460px, 40vw);
    max-height: 86%;
    object-fit: contain;
    filter: grayscale(1) invert(1) contrast(1.3) brightness(0.9);
    mix-blend-mode: screen;
    opacity: 0.11;
    pointer-events: none;
}

.phero a { color: #fff; }

/* Vinheta: queda de luz nos cantos, como numa fotografia — afunda as bordas
   e faz o centro avançar. Fica ABAIXO do conteúdo (z-index 1 contra 2) para
   escurecer o fundo, a névoa e o brasão sem sujar a leitura do texto. */
.phero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 88% at 50% 44%, transparent 38%, rgba(5, 18, 48, 0.52) 100%);
}

.phero-conteudo {
    z-index: 2;
    position: relative;
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
    gap: 48px;
    align-items: center;
    padding-block: 64px 44px;
}

.phero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--p-ouro);
}

.phero-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--p-ouro);
}

.phero-eyebrow-aovivo { color: #ff9d9d; }
.phero-eyebrow-aovivo::before { display: none; }

.phero-aovivo-ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.25);
    animation: portal-pulso 1.2s infinite;
}

.phero-titulo {
    margin: 16px 0 0;
    font-size: clamp(1.9em, 4.2vw, 2.9em);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-width: 17ch;
}

.phero-sub {
    margin: 18px 0 0;
    font-size: 1.02em;
    line-height: 1.7;
    color: #f2f6ff;
    max-width: 52ch;
}

.phero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Dourado institucional: a mesma família dos fios de eyebrow. Texto azul-noite
   em cima — amarelo com texto branco reprova em contraste. */
.phero a.phero-cta {
    display: inline-block;
    padding: 13px 26px;
    background: #f2c14e;
    color: var(--p-noite);
    border-radius: 999px;
    font-size: 0.92em;
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

.phero a.phero-cta:hover {
    transform: translateY(-2px);
    background: #f6cd6a;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.phero a.phero-cta-fantasma {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

/* O cartão vivo da capa (pauta de hoje / próxima sessão) */

.pcard {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 24px 60px rgba(4, 14, 38, 0.45);
    color: var(--p-texto);
}

.pcard a { color: var(--cor-primaria); }

.pcard-rotulo {
    display: block;
    font-size: 0.72em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cor-primaria);
    margin-bottom: 14px;
}

.pcard-pauta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pcard-pauta li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.88em;
    line-height: 1.45;
    color: var(--p-tinta);
}

.pcard-pauta em { color: #7a86a3; font-style: normal; }

.pcard-pauta-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    transform: translateY(-1px);
    background: #c9d2e4;
}

.pcard-pauta-ponto.aberta { background: var(--cor-alerta); animation: portal-pulso 1.2s infinite; }
.pcard-pauta-ponto.encerrada { background: var(--cor-sucesso); }

.pcard-pauta-texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard a.pcard-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.85em;
    font-weight: 800;
    text-decoration: none;
}

.pcard a.pcard-link:hover { text-decoration: underline; }

.pcard-data {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pcard-data-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 78px;
    background: var(--cor-primaria-clara);
    border-radius: 12px;
    color: var(--cor-primaria);
    flex-shrink: 0;
}

.pcard-data-bloco strong {
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pcard-data-bloco span {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pcard-data-detalhes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9em;
}

.pcard-data-detalhes strong { color: var(--p-tinta); font-size: 1.02em; }

/* Contadores dentro da manchete */

.phero-contadores {
    position: relative;
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-block: 20px 26px;
}

.phero-contador {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-inline: 8px;
}

.phero-contador + .phero-contador { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 28px; }

.phero-contador strong {
    font-size: 2em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.phero-contador span {
    font-size: 0.82em;
    color: #eef3fd;
    line-height: 1.3;
}

/* ── Cabeçalhos de seção ───────────────────────────────────────────────────── */

.psecao-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cor-primaria);
}

.psecao-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--p-ouro);
}

.psecao-titulo {
    margin: 10px 0 28px;
    font-size: 1.6em;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--p-tinta);
}

/* ── Serviços ao cidadão ───────────────────────────────────────────────────── */

.pservicos {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    padding-block: 64px 20px;
}

.pservicos-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pservicos a.pservico {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 26px 22px;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.pservicos a.pservico:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 84, 191, 0.35);
    box-shadow: 0 18px 40px rgba(13, 34, 71, 0.10);
}

.pservico-icone {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-clara);
    border-radius: 13px;
    color: var(--cor-primaria);
    margin-bottom: 4px;
}

/* display block: svg inline reserva espaço de linha de base embaixo e o ícone
   parecia colado na borda de cima da pastilha. */
.pservico-icone svg { width: 24px; height: 24px; display: block; }

.pservico strong {
    font-size: 1.02em;
    font-weight: 800;
    color: var(--p-tinta);
}

.pservico p {
    margin: 0;
    font-size: 0.86em;
    line-height: 1.6;
    color: var(--p-texto);
}

.pservico-seta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.82em;
    font-weight: 800;
    color: var(--cor-primaria);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transicao), transform var(--transicao);
}

.pservicos a.pservico:hover .pservico-seta { opacity: 1; transform: translateX(0); }

/* ── Últimas da Câmara ─────────────────────────────────────────────────────── */

.pfeed { background: #fff; margin-top: 44px; }

/* Cabeçalho fora do grid: assim a lista (esq.) e o card de publicações (dir.)
   começam no MESMO nível, sem o título empurrar só a coluna da esquerda. */
.pfeed-cabecalho {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    padding-top: 56px;
}
.pfeed-conteudo {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
    gap: 48px;
    padding-block: 18px 60px;
    align-items: start;
}

/* Sem publicações ainda: o feed ocupa o palco sozinho, sem coluna fantasma. */
.pfeed-conteudo.solo { grid-template-columns: minmax(0, 1fr); }
.pfeed-conteudo.solo .pfeed-lista { max-width: 820px; }

.pfeed-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pfeed a.pfeed-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.pfeed a.pfeed-item:hover {
    border-color: rgba(26, 84, 191, 0.4);
    box-shadow: 0 10px 26px rgba(13, 34, 71, 0.08);
}

.pfeed-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    background: var(--cor-primaria-clara);
    border-radius: 10px;
    color: var(--cor-primaria);
    flex-shrink: 0;
}

.pfeed-data strong {
    font-size: 1.25em;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.pfeed-data span {
    font-size: 0.66em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pfeed-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pfeed-titulo {
    font-size: 0.92em;
    color: var(--p-tinta);
    line-height: 1.45;
}

.pfeed-titulo strong { font-weight: 800; }

.pfeed-resultado { font-size: 0.8em; font-weight: 700; }
.pfeed-resultado.aprovada { color: #166534; }
.pfeed-resultado.rejeitada { color: #991b1b; }

.pfeed-publicacoes {
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    padding: 24px 26px;
    /* Sem margin-top: o cabeçalho saiu do grid, então este card já começa no
       mesmo nível do primeiro card da lista ao lado. */
}

.pfeed-publicacoes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pfeed-publicacoes li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 11px;
    border-bottom: 1px solid var(--p-gelo);
}

.pfeed-pub-tipo {
    padding: 2px 10px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 800;
    flex-shrink: 0;
}

.pfeed-pub-titulo {
    flex: 1;
    min-width: 0;
    font-size: 0.84em;
    color: var(--p-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pfeed a.pfeed-pub-pdf {
    font-size: 0.76em;
    font-weight: 800;
    text-decoration: none;
    color: var(--cor-primaria);
    flex-shrink: 0;
}

.pfeed a.pcard-link { color: var(--cor-primaria); display: inline-block; margin-top: 16px; font-size: 0.85em; font-weight: 800; text-decoration: none; }

/* ── Faixa LAI ─────────────────────────────────────────────────────────────── */

/* A faixa da LAI fecha o portal: um box CINZA com borda (callout), centralizado. */
.plai {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin: 40px auto;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 16px;
    padding: 22px 28px;
}
.plai-conteudo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--p-texto);
}
.plai-conteudo svg { color: var(--p-ouro); flex-shrink: 0; }
.plai-conteudo p { margin: 0; font-size: 0.9em; max-width: 62ch; }
.plai-conteudo strong { color: var(--p-tinta); }
.plai-conteudo a { color: var(--cor-primaria); text-decoration: underline; }

/* ── Rodapé institucional ──────────────────────────────────────────────────── */

.prodape {
    background: var(--p-noite);
    color: rgba(255, 255, 255, 0.78);
    margin-top: 24px;
}

.prodape a { color: #fff; }

.prodape-identidade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 44px 16px 26px;
    text-align: center;
}

/* A placa nasce branca e o componente BrasaoCamara a repinta na cor real do
   fundo do PNG (evita a emenda quando o branco do arquivo não é puro). */
.prodape-brasao {
    width: 108px;
    height: 108px;
    object-fit: contain;
    margin-bottom: 14px;
    background: #fff;
    border-radius: 20px;
    padding: 11px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Brasão já recortado (PNG transparente): sem placa, sem sombra de placa —
   ele assenta direto sobre o azul do rodapé. */
.prodape-brasao.brasao-sem-placa {
    background: transparent;
    padding: 0;
    box-shadow: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.prodape-identidade strong { color: #fff; font-size: 1.1em; font-weight: 800; }
.prodape-identidade span { font-size: 0.85em; }

.prodape-colunas {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-block: 26px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.86em;
}

.prodape-coluna p { margin: 5px 0 0; }

.prodape-titulo {
    display: block;
    color: #fff;
    font-weight: 800;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.prodape-credito {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 16px;
    text-align: center;
    font-size: 0.76em;
    opacity: 0.65;
}

/* ── Busca instantânea ─────────────────────────────────────────────────────── */

.pbusca-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(9, 18, 42, 0.62);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 16px 16px;
}

.pbusca-painel {
    width: min(640px, 100%);
    max-height: 72vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 10px 10px 18px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
}

.pbusca-campo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--p-borda);
    color: #7a86a3;
}

.pbusca-campo input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--fonte-principal);
    font-size: 1.05em;
    color: var(--p-tinta);
    background: none;
}

.pbusca-fechar {
    border: 1px solid var(--p-borda);
    background: var(--p-gelo);
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 700;
    color: #7a86a3;
    padding: 4px 8px;
    cursor: pointer;
}

.pbusca-dica {
    margin: 0;
    padding: 22px 18px;
    font-size: 0.88em;
    color: #7a86a3;
}

.pbusca-grupo { padding: 12px 8px 0; }

.pbusca-grupo-rotulo {
    display: block;
    padding: 0 10px 6px;
    font-size: 0.7em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7a86a3;
}

.pbusca-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
    font-family: var(--fonte-principal);
}

.pbusca-item:hover { background: var(--cor-primaria-clara); }

.pbusca-item-titulo { font-size: 0.92em; font-weight: 700; color: var(--p-tinta); }
.pbusca-item-detalhe { font-size: 0.78em; color: #7a86a3; }

/* ── Alto contraste (botão ◐ da barra de acessibilidade) ───────────────────── */

/* Preto e branco de verdade, amarelo só como acento sobre preto (par clássico
   de acessibilidade). Links de TEXTO sublinham; marcas, menus e cartões não —
   sublinhado neles é ruído, não ajuda ninguém. */
/* O modo vive de TOKENS, não de exceção: quem usa as variáveis abaixo vira
   preto e branco sozinho. As cores semânticas entraram no escopo depois de
   uma auditoria — sem elas, todo elemento novo que usasse --cor-primaria,
   --cor-sucesso, --cor-perigo ou --cor-neutra escapava do modo em silêncio,
   e a tela virava um P&B salpicado de azul, verde e vermelho.
   REGRA: cor nova no portal SEMPRE via token. */
.portal-alto-contraste {
    --p-noite: #000; --p-noite-2: #000; --p-gelo: #fff;
    --p-borda: #000; --p-texto: #000; --p-tinta: #000;
    --cor-primaria: #000;
    --cor-primaria-escura: #000;
    --cor-primaria-clara: #fff;
    --cor-sucesso: #000;
    --cor-perigo: #000;
    --cor-alerta: #000;
    --cor-neutra: #000;
}

.portal-alto-contraste a { text-decoration: underline; }
.portal-alto-contraste a.pcabecalho-marca { text-decoration: none; }

.portal-alto-contraste .pcabecalho-busca,
.portal-alto-contraste .pcard-pauta em,
.portal-alto-contraste .pnoticia-data,
.portal-alto-contraste .pbusca-dica,
.portal-alto-contraste .pbusca-item-detalhe,
.portal-alto-contraste .pfeed-resultado.aprovada,
.portal-alto-contraste .pfeed-resultado.rejeitada { color: #000; }

/* Manchete: fundo preto, textos brancos, acentos amarelos */
.portal-alto-contraste .phero { background: #000; }
/* Herói já é preto chapado no modo: vinheta sobre preto é ruído. */
.portal-alto-contraste .phero::after { display: none; }
.portal-alto-contraste .phero-brasao-marca { display: none; }
.portal-alto-contraste .phero-eyebrow { color: #ffd34d; }
.portal-alto-contraste .phero-eyebrow::before { background: #ffd34d; }
.portal-alto-contraste .phero-eyebrow-aovivo { color: #fff; }
.portal-alto-contraste .phero-aovivo-ponto { background: #ffd34d; box-shadow: none; animation: none; }
.portal-alto-contraste .phero-sub, .portal-alto-contraste .phero-contador span { color: #fff; }
.portal-alto-contraste .phero-contadores { border-top-color: #fff; }
.portal-alto-contraste .phero-contador + .phero-contador { border-left-color: #fff; }
.portal-alto-contraste .phero a.phero-cta { background: #ffd34d; color: #000; }
.portal-alto-contraste .phero a.phero-cta-fantasma { background: transparent; color: #fff; border-color: #fff; }

/* Cartão da capa e selos: branco com traço preto firme */
.portal-alto-contraste .pcard { box-shadow: none; border: 2px solid #fff; }
.portal-alto-contraste .pcard-pauta-ponto,
.portal-alto-contraste .pcard-pauta-ponto.aberta,
.portal-alto-contraste .pcard-pauta-ponto.encerrada { background: #000; animation: none; }
/* Alto contraste é branco chapado: a marca d'água do cabeçalho sai de cena. */
.portal-alto-contraste .pcabecalho { background-image: none; }
.portal-alto-contraste .pcabecalho::before { display: none; }
/* O menu azul volta a branco chapado com texto preto. */
.portal-alto-contraste .pnav { background: #fff; border-top: 2px solid #000; }
.portal-alto-contraste .pnav a.pnav-link { color: #000; }
.portal-alto-contraste .pnav a.pnav-link:hover { background: #000; color: #fff; }
.portal-alto-contraste .pnav-indicador { background: #000; }
.portal-alto-contraste .pnav a.pnav-aovivo { background: #fff; border: 2px solid #000; color: #000; }
.portal-alto-contraste .pnav-aovivo-ponto { background: #000; animation: none; }
.portal-alto-contraste .portal-selo { background: #fff; color: #000; border: 1.5px solid #000; }

/* Seções claras: pastilhas e blocos com contorno em vez de tinta pastel */
.portal-alto-contraste .psecao-eyebrow { color: #000; }
.portal-alto-contraste .psecao-eyebrow::before { background: #000; }
.portal-alto-contraste .pservico-icone { background: #fff; border: 2px solid #000; color: #000; }
.portal-alto-contraste .pfeed-data { background: #fff; border: 2px solid #000; color: #000; }
.portal-alto-contraste .pfeed-pub-tipo { background: #fff; border: 1.5px solid #000; color: #000; }
/* Box da LAI no alto contraste: branco, borda preta grossa, texto preto. */
.portal-alto-contraste .plai { background: #fff; border: 2px solid #000; }
.portal-alto-contraste .plai-conteudo,
.portal-alto-contraste .plai-conteudo svg,
.portal-alto-contraste .plai-conteudo strong,
.portal-alto-contraste .plai-conteudo a { color: #000; }
.portal-alto-contraste .pservicos a.pservico,
.portal-alto-contraste .pfeed a.pfeed-item,
.portal-alto-contraste .pnoticias-grade a.pnoticia-cartao { border-width: 2px; }

/* Rodapé e barra de acessibilidade */
.portal-alto-contraste .prodape { background: #000; color: #fff; }
.portal-alto-contraste .prodape-credito { opacity: 1; }
.portal-alto-contraste .pacess a, .portal-alto-contraste .pacess-controles button { color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS (A Câmara, Vereadores, Sessões, Publicações)
   Mantidas no visual anterior até a reforma chegar nelas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* position: relative segura a página que SAI da transição (vira absoluta e
   desvanece por cima da que entra — crossfade sem quadro branco no meio). */
.portal-conteudo { flex: 1; position: relative; }

/* Fundo OPACO: é ele que permite o dissolve verdadeiro — a página que sai
   desvanece por cima da nova sem o branco do corpo vazar no meio da troca.
   Altura mínima segue como rede de segurança da primeiríssima visita (sem
   cache ainda): o rodapé não sobe ao meio da tela nem nesse caso. */
.portal-pagina {
    background: var(--cor-fundo);
    min-height: 62vh;
}

/* Frase da presença sob a rosca: o número mora no centro do anel; aqui é a
   leitura por extenso, pro cidadão que prefere a frase ao gráfico. */
.pverdet-presenca-frase {
    margin-top: 12px;
    font-size: 0.82em;
    color: var(--p-texto);
}

/* No alto contraste a névoa não entra: preto e branco chapados, sem vapor. */
.portal-alto-contraste .nevoa { display: none; }

/* ── Mapa do site e Acessibilidade ───────────────────────────────────────── */

.pmapa-lista,
.pacessib-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.pmapa-lista li,
.pacessib-lista li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.pmapa-lista li:last-child,
.pacessib-lista li:last-child { border-bottom: none; }

.pmapa-link {
    font-weight: 700;
    font-size: 1.02em;
    width: fit-content;
}

.pmapa-texto,
.pacessib-lista li span {
    font-size: 0.88em;
    color: var(--p-texto);
}

.pacessib-lista li strong {
    font-weight: 700;
    color: var(--p-tinta);
}

/* ── VLibras: presente, sem gritar ────────────────────────────────────────
   O widget do gov.br chega em opacidade cheia e puxava o olho de todo mundo.
   Em repouso ele desce a 60%: continua achável por quem procura, mas para de
   competir com o conteúdo. Volta ao cheio no hover, no FOCO POR TECLADO
   (:focus-within — quem navega por Tab não pode perdê-lo) e enquanto o painel
   de tradução está aberto.
   A opacidade vai no contêiner e não no botão: o plugin crava
   `opacity: 1 !important` no botão, e brigar com isso seria frágil.
   Posição mantida no padrão de fábrica: mexer no eixo horizontal pioraria —
   em leitura ocidental a esquerda é onde o olho começa a varredura. */
div[vw] {
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

div[vw]:hover,
div[vw]:focus-within,
div[vw].active {
    opacity: 1;
}

/* No alto contraste, nada de meio-tom: quem ligou o modo pediu visibilidade
   máxima, e é justamente quem mais tende a precisar do widget.
   O seletor sobe até o body porque o widget é IRMÃO do #app, não filho do
   .portal — descendente direto não alcançaria. */
body:has(.portal-alto-contraste) div[vw] {
    opacity: 1;
}

/* ── Alto contraste: ficha da sessão, listas e gráficos ────────────────────
   O que os tokens não alcançam: hex cravado no CSS e cor que carrega
   SIGNIFICADO (o voto). Onde a cor significa, ela vira forma/textura — que é
   o que a acessibilidade pede mesmo fora deste modo. */

/* Textos com hex cravado: todos ao preto. */
.portal-alto-contraste .portal-placar-favor,
.portal-alto-contraste .portal-placar-contra,
.portal-alto-contraste .portal-votacao-ementa,
.portal-alto-contraste .portal-expediente-ementa,
.portal-alto-contraste .portal-doc-titulo,
.portal-alto-contraste .portal-presenca.ausente { color: #000; }

/* Fios quase-brancos que sumiam no modo: ao preto. */
.portal-alto-contraste .portal-placar-bloco,
.portal-alto-contraste .portal-votacao + .portal-votacao { border-top-color: #000; }
.portal-alto-contraste .portal-expediente-item,
.portal-alto-contraste .portal-lista-simples li { border-bottom-color: #000; }

/* Contorno na régua do modo (2px) e caixas que precisam se anunciar. */
.portal-alto-contraste .portal-pagina-cinza .portal-secao,
.portal-alto-contraste .portal-sessao-resumo { border-width: 2px; }
.portal-alto-contraste .portal-votacao-nota { border: 2px solid #000; }
.portal-alto-contraste .portal-votacao-posicao,
.portal-alto-contraste .portal-votacao-tipo { background: #fff; color: #000; border: 1.5px solid #000; }
.portal-alto-contraste .pcabecalho-brasao,
.portal-alto-contraste .prodape-brasao { filter: none; box-shadow: none; }

/* Placar: as três faixas se distinguem por TEXTURA, não por matiz —
   cheia (a favor), hachurada (contra) e listrada fina (abstenção). */
.portal-alto-contraste .portal-placar-barra { border: 1.5px solid #000; }
.portal-alto-contraste .portal-placar-barra-favor { background: #000; }
.portal-alto-contraste .portal-placar-barra-contra {
    background: repeating-linear-gradient(45deg, #000 0 4px, #fff 4px 8px);
}
.portal-alto-contraste .portal-placar-barra-abstencao {
    background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 5px);
}

/* Voto nominal: círculo cheio / quadrado / círculo vazado. O rótulo em texto
   ("— A favor") segue ao lado, então a forma é reforço, nunca a única pista. */
.portal-alto-contraste .portal-voto-ponto.favor { background: #000; }
.portal-alto-contraste .portal-voto-ponto.contra { background: #000; border-radius: 0; }
.portal-alto-contraste .portal-voto-ponto.abstencao { background: #fff; border: 2px solid #000; }

/* Rosca de presença: arco preto sobre trilho claro — lê-se como medidor.
   A legenda (rótulo + valor) é quem identifica cada fatia. O !important é
   para vencer o `style` inline que pinta a cor da série. */
.portal-alto-contraste .rosca-fatia { stroke: #000; }
.portal-alto-contraste .rosca-trilho { stroke: #d4d4d4; }
.portal-alto-contraste .rosca-legenda-cor { background: #000 !important; }

/* Varredura final (fase 3): o cinza-azulado #7a86a3 do texto secundário e os
   últimos hex semânticos que a auditoria encontrou fora do alcance dos tokens. */
.portal-alto-contraste .pbusca-campo,
.portal-alto-contraste .pbusca-fechar,
.portal-alto-contraste .pbusca-grupo-rotulo,
.portal-alto-contraste .pnoticia-artigo-conteudo,
.portal-alto-contraste .pvereador-partido,
.portal-alto-contraste .pverdet-nome-completo,
.portal-alto-contraste .pcompartilhar-rotulo,
.portal-alto-contraste .portal-contato-grade p { color: #000; }

/* A citação da notícia usava --p-gelo/--p-ouro (tokens que o alto contraste não
   redefine), então era a única parte do texto que não virava preto no branco.
   Aqui ela entra no padrão: fundo branco, texto preto, barra preta grossa. */
.portal-alto-contraste .pnoticia-artigo-conteudo blockquote {
    background: #fff;
    border-left: 4px solid #000;
}

.portal-alto-contraste .portal-selo-atual { background: #fff; color: #000; border: 1.5px solid #000; }

/* Par de contraste da busca do cabeçalho (o contorno dela é hex cravado). */
.portal-alto-contraste .pcabecalho-busca { border-color: #000; box-shadow: none; }

/* As pílulas de voto do perfil vinham DEPOIS da regra geral do modo e a
   venciam por ordem de arquivo — precisam da classe do voto no seletor. */
.portal-alto-contraste .pverdet-voto.favor,
.portal-alto-contraste .pverdet-voto.contra,
.portal-alto-contraste .pverdet-voto.abstencao { background: #fff; color: #000; border: 1.5px solid #000; }

.portal-pagina > .portal-titulo-pagina,
.portal-pagina > .portal-subtitulo-pagina,
.portal-pagina > .portal-secao,
.portal-pagina > .portal-chips,
.portal-pagina > .portal-filtros-linha,
.portal-pagina > .portal-lista-sessoes,
.portal-pagina > .portal-lista-publicacoes,
.portal-pagina > .portal-grade-vereadores,
.portal-pagina > .portal-vazio,
.portal-pagina > .portal-voltar,
.portal-pagina > .portal-sessao-resumo,
.portal-pagina > .portal-sessao-cabecalho {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
}

/* Filho direto da página, o voltar precisa ser bloco: inline-block ignora a
   margem automática e cola na lateral. */
.portal-pagina > .portal-voltar { display: block; }

/* Dentro do cabeçalho flex, as margens automáticas do título o centralizavam
   sem querer — no rito das outras páginas, ele fica à esquerda. */
.portal-sessao-cabecalho .portal-titulo-pagina { margin-inline: 0; }

.portal-titulo-pagina {
    font-size: 1.75em;
    font-weight: 800;
    color: var(--p-tinta);
    margin: 36px auto 6px;
    letter-spacing: -0.015em;
}

.portal-subtitulo-pagina {
    font-size: 0.95em;
    color: var(--cor-neutra);
    margin: 0 auto 24px;
    max-width: min(var(--p-largura, 1140px), 100% - 40px);
}

.portal-secao { margin: 28px auto 36px; }

.portal-secao h2 {
    font-size: 1.25em;
    font-weight: 800;
    color: var(--p-tinta);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cor-primaria-clara);
}

.portal-secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.portal-ver-todas { font-size: 0.88em; font-weight: 600; }

.portal-texto-longo { max-width: 75ch; line-height: 1.8; }
.portal-texto-longo p { margin: 0 0 14px; }
/* Texto rico vindo do editor (biografia): negrito, listas COM marcadores e subtítulos. */
.portal-texto-longo strong, .portal-texto-longo b { font-weight: 700; }
.portal-texto-longo em, .portal-texto-longo i { font-style: italic; }
.portal-texto-longo ul, .portal-texto-longo ol { margin: 0 0 14px; padding-left: 1.5em; }
.portal-texto-longo ul { list-style: disc; }
.portal-texto-longo ol { list-style: decimal; }
.portal-texto-longo li { margin: 0 0 6px; }
.portal-texto-longo h2, .portal-texto-longo h3, .portal-texto-longo h4 { margin: 18px 0 8px; font-weight: 700; line-height: 1.3; }

.portal-texto-secundario { color: var(--cor-neutra); }

.portal-vazio {
    padding: 48px 16px;
    text-align: center;
    color: var(--cor-neutra);
}

.portal-voltar {
    display: inline-block;
    margin: 28px auto 0;
    font-size: 0.88em;
    font-weight: 600;
    text-decoration: none;
}

.portal-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.portal-chip {
    padding: 9px 18px;
    background: #f3f4f6;
    border: 1px solid #c5cad3;
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 600;
    font-family: var(--fonte-principal);
    color: var(--cor-neutra);
    cursor: pointer;
}

.portal-chip.ativo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.portal-chips-separador {
    width: 1px;
    height: 24px;
    background: #c5cad3;
    margin-inline: 6px;
}

.portal-selo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    white-space: nowrap;
}

.portal-selo-agendada { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.portal-selo-aberta { background: #fef3c7; color: #92400e; }
.portal-selo-suspensa { background: #fef3c7; color: #92400e; }
.portal-selo-encerrada { background: #e5e7eb; color: #374151; }
.portal-selo-aprovada { background: #dcfce7; color: #166534; }
.portal-selo-rejeitada { background: #fee2e2; color: #991b1b; }

.portal-lista-sessoes { list-style: none; margin: 0; padding: 0; }

.portal-sessao-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.portal-sessao-linha:hover { border-color: var(--cor-primaria); }

.portal-sessao-data {
    font-weight: 700;
    color: var(--p-tinta);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.portal-sessao-nome { flex: 1; min-width: 0; }

.portal-sessao-hora { color: var(--cor-neutra); }

.portal-sessao-video { color: var(--cor-primaria); display: inline-flex; }

.portal-sessao-cabecalho {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Vídeos da sessão (portal) ────────────────────────────────────────────── */
.pvideos {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pvideo-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pvideo-titulo {
    font-weight: 600;
    font-size: 1.05rem;
}

.pvideo-aovivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--borda-pilula);
    background: var(--cor-perigo);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pvideo-aovivo-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: pvideo-pulsar 1.4s ease-in-out infinite;
}

@keyframes pvideo-pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .pvideo-aovivo-ponto { animation: none; }
}

.portal-video {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 820px;
    border-radius: var(--borda-raio);
    overflow: hidden;
    background: #000;
}

.portal-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.portal-docs { display: flex; flex-wrap: wrap; gap: 12px; }

.portal-doc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    background: #fff;
    text-decoration: none;
    min-width: 200px;
}

.portal-doc:hover { border-color: var(--cor-primaria); }

.portal-doc-tipo {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-primaria);
}

.portal-doc-titulo { color: #1f2937; font-weight: 600; }

.portal-presencas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.portal-presenca {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.84em;
    font-weight: 600;
}

.portal-presenca.presente { background: #dcfce7; color: #166534; }
/* Ausência (mesmo justificada) é neutra, não alarme: cinza, não vermelho. */
.portal-presenca.ausente { background: var(--p-gelo); color: #6b7280; border: 1px solid var(--p-borda); }
.portal-presenca em { font-weight: 400; font-style: normal; }

/* ── Faixa-resumo da sessão: a sessão contada de relance ─────────────────── */
.portal-sessao-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin-top: 4px;
    margin-bottom: 30px;
    padding: 18px 22px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 14px;
}

.portal-sessao-resumo-item { display: flex; flex-direction: column; gap: 2px; }

.portal-sessao-resumo-item strong {
    font-size: 1.55em;
    font-weight: 800;
    line-height: 1.05;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.portal-sessao-resumo-item span { font-size: 0.8em; color: var(--p-texto); }

/* Explicação curta sob o título da seção: traduz o jargão pro público. */
.portal-secao-explica {
    margin: -6px 0 16px;
    font-size: 0.86em;
    color: var(--cor-neutra);
}

.portal-presencas-contagem {
    margin: 0 0 14px;
    font-size: 0.9em;
    color: var(--p-texto);
}
.portal-presencas-contagem strong { color: var(--p-tinta); font-weight: 700; }

.portal-votacoes { display: flex; flex-direction: column; gap: 14px; }

.portal-votacao {
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    background: #fff;
    padding: 16px 18px;
}

.portal-votacao-topo { display: flex; align-items: flex-start; gap: 12px; }

.portal-votacao-posicao {
    padding: 2px 9px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 700;
    flex-shrink: 0;
}

.portal-votacao-textos { flex: 1; min-width: 0; }

.portal-votacao-id { color: var(--p-tinta); }

.portal-votacao-ementa { margin: 6px 0 0; font-size: 0.88em; color: #374151; }

.portal-votacao-autor { margin: 4px 0 0; font-size: 0.84em; color: var(--cor-neutra); }

/* Bloco do placar: rótulo do tipo de votação → barra de proporção → números.
   O rótulo resolve o mistério de "por que aqui vejo cada voto e ali não". */
.portal-placar-bloco {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f3f5;
}

.portal-votacao-tipo {
    display: inline-block;
    padding: 2px 10px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--p-texto);
    text-transform: uppercase;
}

/* Barra de proporção do placar (favor | contra | abstenção). O gap de 2px
   mostra o fundo do cartão entre as faixas; o min-width evita que um voto
   solitário desapareça ao lado de uma maioria. */
.portal-placar-barra {
    display: flex;
    gap: 2px;
    height: 10px;
    margin: 12px 0;
    border-radius: 999px;
    overflow: hidden;
}
.portal-placar-barra > span { min-width: 5px; }
.portal-placar-barra-favor { background: var(--cor-sucesso); }
.portal-placar-barra-contra { background: var(--cor-perigo); }
.portal-placar-barra-abstencao { background: var(--cor-neutra); }

.portal-placar {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.88em;
}

.portal-placar strong { font-size: 1.2em; }
.portal-placar-favor { color: #166534; }
.portal-placar-contra { color: #991b1b; }
.portal-placar-abstencao { color: var(--cor-neutra); }

/* Nota que explica a ausência do voto individual (secreta/simbólica). */
.portal-votacao-nota {
    margin: 12px 0 0;
    padding: 9px 12px;
    background: var(--p-gelo);
    border-radius: 8px;
    font-size: 0.84em;
    color: var(--p-texto);
}

/* ── Expediente: sigla + nome humano + ementa (não só o código seco) ─────── */
.portal-expediente { list-style: none; margin: 0; padding: 0; }

.portal-expediente-item {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}
.portal-expediente-item:first-child { padding-top: 0; }

.portal-expediente-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.portal-expediente-tipo {
    font-weight: 700;
    color: var(--p-tinta);
}

.portal-expediente-cod {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}

.portal-expediente-ementa { margin: 5px 0 0; font-size: 0.9em; color: #374151; }
.portal-expediente-autor { margin: 4px 0 0; font-size: 0.82em; color: var(--cor-neutra); }

/* ═══ Ficha da sessão: cartões brancos em fundo cinza-gelo ══════════════════
   Uma gramática de contenção só. Antes a página misturava "alguns em caixa,
   outros soltos" e carregava uma régua azul sob cada título — o que poluía.
   Agora: fundo gelo, cada seção num cartão branco, título leve sem régua. */
.portal-pagina-cinza { background: var(--p-gelo); padding-bottom: 44px; }

.portal-pagina-cinza .portal-secao {
    margin: 16px auto;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 16px;
}

.portal-pagina-cinza .portal-secao h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
    font-size: 1.12em;
}
.portal-pagina-cinza .portal-secao-explica { margin-top: -8px; }

/* A faixa-resumo também vira cartão branco, senão sumiria no cinza. */
.portal-pagina-cinza .portal-sessao-resumo {
    background: #fff;
    border-color: var(--p-borda);
}

/* Votações deixam de ser cartão-dentro-de-cartão: viram itens do cartão
   "Ordem do Dia", separados por um fio leve. Some a borda dupla. */
.portal-pagina-cinza .portal-votacoes { gap: 0; }
.portal-pagina-cinza .portal-votacao {
    border: none;
    border-radius: 0;
    padding: 18px 0;
}
.portal-pagina-cinza .portal-votacao:first-child { padding-top: 2px; }
.portal-pagina-cinza .portal-votacao:last-child { padding-bottom: 0; }
.portal-pagina-cinza .portal-votacao + .portal-votacao { border-top: 1px solid #eef1f4; }

/* Documento: pílula gelo dentro do cartão branco (branco no branco sumia). */
.portal-pagina-cinza .portal-doc { background: var(--p-gelo); border-color: var(--p-borda); }

/* Presença calma: pílula neutra com um pontinho verde, não um bloco todo
   verde. Doze pílulas verdes gritavam; assim a cor só pontua. */
.portal-presenca.presente {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--p-gelo);
    color: var(--p-tinta);
    border: 1px solid var(--p-borda);
}
.portal-presenca.presente::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-sucesso);
    flex-shrink: 0;
}

.portal-votos-nominais { margin-top: 12px; }

.portal-votos-nominais summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cor-primaria);
    padding: 6px 0;
}

.portal-votos-nominais ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 20px;
}

.portal-votos-nominais li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
}

.portal-voto-ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.portal-voto-ponto.favor { background: var(--cor-sucesso); }
.portal-voto-ponto.contra { background: var(--cor-perigo); }
.portal-voto-ponto.abstencao { background: var(--cor-neutra); }

.portal-lista-simples { list-style: none; margin: 0; padding: 0; }

.portal-lista-simples li {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.portal-grade-vereadores,
.portal-grade-mesa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.portal-cartao-vereador,
.portal-cartao-mesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
    text-align: center;
}

.portal-vereador-foto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 6px;
}

.portal-vereador-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    font-size: 2.1em;
    font-weight: 700;
}

.portal-cartao-nome { font-size: 1em; color: var(--p-tinta); }

.portal-cartao-partido { font-size: 0.84em; color: var(--cor-neutra); }

.portal-cartao-cargo {
    padding: 3px 12px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
}

.portal-vereador-contato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    font-size: 0.8em;
    word-break: break-word;
}

.portal-grade-comissoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.portal-cartao-comissao {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: var(--borda-raio);
}

.portal-comissao-finalidade { margin: 8px 0 0; font-size: 0.86em; color: var(--cor-neutra); }

.portal-comissao-membros {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: 0.88em;
}

.portal-comissao-membros li { padding: 3px 0; }

.portal-membro-cargo { font-weight: 700; color: var(--p-tinta); }

.portal-lista-legislaturas { list-style: none; margin: 0; padding: 0; }

.portal-lista-legislaturas li {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.portal-selo-atual {
    margin-left: 10px;
    padding: 3px 12px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
}

.portal-contato-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.portal-contato-grade p { margin: 4px 0 0; color: #374151; }

.portal-lista-publicacoes { list-style: none; margin: 0 auto 40px; padding: 0; }

.portal-publicacao {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--borda-raio);
    margin-bottom: 8px;
    background: #fff;
}

.portal-publicacao-tipo {
    padding: 4px 12px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    flex-shrink: 0;
}

.portal-publicacao-titulo { flex: 1; min-width: 0; font-weight: 600; }

.portal-publicacao-sessao {
    display: block;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 2px;
}

.portal-publicacao-data {
    color: var(--cor-neutra);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.portal-botao-pdf {
    display: inline-block;
    padding: 9px 18px;
    background: var(--cor-primaria);
    color: #fff !important;
    border-radius: var(--borda-raio);
    font-size: 0.84em;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

.portal-botao-pdf:hover { background: var(--cor-primaria-escura); }

/* ── Celular primeiro que tudo ─────────────────────────────────────────────── */

@media (max-width: 960px) {
    .phero-conteudo { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 32px; }
    .phero-titulo { max-width: none; }
    /* No celular o herói empilha e o texto passa por cima: a marca quase some pra não sujar a leitura. */
    .phero-brasao-marca { opacity: 0.05; }
    .pservicos-grade { grid-template-columns: repeat(2, 1fr); }
    .pfeed-conteudo { grid-template-columns: 1fr; gap: 8px; }
    .pfeed-publicacoes { margin-top: 24px; }
    .prodape-colunas { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 640px) {
    .pcabecalho-menu { display: block; }
    .pcabecalho-busca span { display: none; }
    .pcabecalho-busca { padding: 10px; border-radius: 50%; }

    .pnav { display: none; }
    .pnav.aberto { display: block; padding: 8px 10px 14px; }

    .pnav-conteudo { flex-direction: column; align-items: stretch; gap: 3px; padding-block: 4px; width: auto; }

    /* Menu mobile premium: itens em pílula, com ícone; o ativo acende num realce. */
    .pnav a.pnav-link {
        display: flex;
        align-items: center;
        gap: 14px;
        border-left: none;
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 1em;
        color: rgba(255, 255, 255, 0.82);
    }
    .pnav-link-icone { display: inline-flex; opacity: 0.7; flex-shrink: 0; }
    .pnav-link-icone svg { width: 21px; height: 21px; }
    .pnav a.pnav-link:hover, .pnav a.pnav-link:active { background: rgba(255, 255, 255, 0.10); color: #fff; }
    .pnav a.pnav-link.ativo { background: rgba(255, 255, 255, 0.15); color: #fff; }
    .pnav a.pnav-link.ativo .pnav-link-icone { opacity: 1; }
    .pnav-indicador { display: none; }

    .pnav a.pnav-aovivo { margin: 12px 6px 2px; justify-content: center; padding: 12px; font-size: 0.84em; }

    /* Rodapé centralizado no celular. */
    .prodape { text-align: center; }
    .prodape-identidade { align-items: center; }

    .pacess-pular { display: none; }

    .phero-contadores { grid-template-columns: 1fr; gap: 10px; }
    .phero-contador + .phero-contador { border-left: none; padding-left: 8px; }

    .pservicos-grade { grid-template-columns: 1fr; }

    .plai { flex-direction: column; text-align: center; }

    .portal-sessao-linha { flex-wrap: wrap; }
    .portal-publicacao { flex-wrap: wrap; }
    .portal-publicacao-titulo { flex-basis: 100%; order: 3; }
    .portal-votacao-topo { flex-wrap: wrap; }
}

/* ── Notícias (página própria — a capa segue só legislativo) ───────────────── */

.portal-pagina > .pnoticias-grade {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
}

.pnoticias-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.pnoticias-grade a.pnoticia-cartao {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.pnoticias-grade a.pnoticia-cartao:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 84, 191, 0.35);
    box-shadow: 0 18px 40px rgba(13, 34, 71, 0.12);
}

.pnoticia-capa {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.pnoticia-capa-vazia {
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
}

.pnoticia-corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
    flex: 1;
}

/* Topo do card da lista: data à esquerda, contador de curtidas à direita. */
.pnoticia-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pnoticia-curtidas-conta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.82em; color: var(--cor-neutra); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pnoticia-data {
    font-size: 0.74em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a86a3;
}

.pnoticia-titulo {
    font-size: 1.05em;
    font-weight: 800;
    color: var(--p-tinta);
    line-height: 1.35;
}

.pnoticia-resumo {
    font-size: 0.87em;
    line-height: 1.6;
    color: var(--p-texto);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pnoticia-ler {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.82em;
    font-weight: 800;
    color: var(--cor-primaria);
}

/* Notícias na página inicial: um BOX branco com borda, os cartões de sempre
   dentro. Cartão com largura fixa (não estica) — com 1 notícia não abre buraco. */
.pinicio-noticias {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin: 44px auto;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 16px;
    padding: 26px 28px 30px;
}
.pinicio-noticias-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pinicio-noticias .pnoticias-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 0;
}
.pinicio-noticias .pnoticias-grade > .pnoticia-cartao {
    flex: 1 1 260px;
    max-width: 400px;
}
.portal-alto-contraste .pinicio-noticias { border-width: 2px; }

/* Leitura da notícia: coluna de jornal, medida confortável */

.pnoticia-artigo {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    padding-bottom: 48px;
}

.pnoticia-artigo .pnoticia-data { display: block; margin-top: 18px; }

/* ── Notícia: coluna única + gadgets (visualizações, curtidas, veja mais) ──── */
.pnoticia-artigo-wrap { width: min(820px, 100% - 40px); margin-inline: auto; padding-bottom: 48px; }
.pnoticia-artigo-wrap > .pnoticia-artigo { width: 100%; margin-inline: 0; padding-bottom: 0; }

.pnoticia-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.pnoticia-meta .pnoticia-data { margin: 0; }
.pnoticia-views {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.9em; color: var(--cor-neutra); font-variant-numeric: tabular-nums;
}

/* Curtir / descurtir */
.pnoticia-curtidas {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 32px 0 8px; padding: 20px 0 0;
    border-top: 1px solid var(--cor-borda);
}
.pnoticia-curtidas-rotulo { font-weight: 600; color: var(--p-tinta); }
.pnoticia-curtidas-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pnoticia-reacao {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border: 1.5px solid var(--cor-borda); border-radius: 999px;
    background: transparent; color: var(--p-texto); font-family: var(--fonte-principal);
    font-size: 0.9em; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pnoticia-reacao strong { font-variant-numeric: tabular-nums; }
.pnoticia-reacao:not(.ativa):hover:not(:disabled) { border-color: var(--cor-primaria); color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.pnoticia-reacao.ativa:hover:not(:disabled) { filter: brightness(1.08); }
.pnoticia-reacao:disabled { opacity: 0.6; cursor: default; }
.pnoticia-reacao.ativa { border-color: var(--cor-primaria); background: var(--cor-primaria); color: #fff; }
.pnoticia-reacao-nao.ativa { border-color: var(--cor-perigo); background: var(--cor-perigo); color: #fff; }

/* Veja mais (abas: Recentes · Semelhantes · Mais vistas) */
.pnoticia-vejamais { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--cor-borda); }
.pnoticia-vejamais-titulo { margin: 0 0 16px; font-size: 1.3em; font-weight: 800; color: var(--p-tinta); }
.pnoticia-vejamais-abas { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--cor-borda); }
.pnoticia-vejamais-aba {
    padding: 10px 16px; border: none; background: none; cursor: pointer;
    font-family: var(--fonte-principal); font-size: 0.95em; font-weight: 600; color: var(--cor-neutra);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pnoticia-vejamais-aba:hover { color: var(--p-tinta); }
.pnoticia-vejamais-aba.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.pnoticia-vejamais-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.pnoticia-vejamais-card {
    display: flex; flex-direction: column; text-decoration: none;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pnoticia-vejamais-card:hover { box-shadow: 0 12px 26px -18px rgba(15, 32, 64, 0.4); transform: translateY(-2px); }
.pnoticia-vejamais-capa { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--cor-fundo-secundario); }
.pnoticia-vejamais-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.pnoticia-vejamais-card-titulo { font-weight: 600; color: var(--p-tinta); line-height: 1.3; font-size: 0.95em; }
.pnoticia-vejamais-card-data { font-size: 0.82em; color: var(--cor-neutra); }

@media (max-width: 560px) {
    .pnoticia-curtidas { flex-direction: column; align-items: flex-start; }
}

.pnoticia-artigo-titulo {
    margin: 8px 0 0;
    /* Menor que antes (era até 2.2em): num título longo a coluna de 760px
       quebrava em muitas linhas. Assim cabe mais por linha. */
    font-size: clamp(1.45em, 2.8vw, 1.9em);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--p-tinta);
    /* pretty: preenche a linha naturalmente e só evita palavra órfã no fim —
       o balance deixava a quebra torta agora que a notícia é largura cheia. */
    text-wrap: pretty;
}

.pnoticia-artigo-resumo {
    margin: 14px 0 0;
    font-size: 1.08em;
    line-height: 1.65;
    color: var(--p-texto);
}

.pnoticia-artigo-capa {
    width: 100%;
    border-radius: 14px;
    margin-top: 24px;
    display: block;
}

/* "Ouvir a notícia" — modesto: um botão-ícone que expande o player ao clicar. */
.pnoticia-audio { margin-top: 20px; }
.pnoticia-audio-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    color: var(--cor-primaria);
    font-family: inherit;
    font-size: 0.84em;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.pnoticia-audio-botao:hover {
    background: var(--cor-primaria-clara);
    border-color: rgba(26, 84, 191, 0.4);
}
.portal-alto-contraste .pnoticia-audio-botao { background: #fff; border: 2px solid #000; color: #000; }

/* Player próprio do portal (componente PlayerAudio). Expandido: sem caixa (nem
   fundo nem borda), ocupando a largura toda do conteúdo. */
.paudio {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.paudio-play {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    cursor: pointer;
    transition: background var(--transicao), transform var(--transicao);
}
.paudio-play:hover { background: var(--cor-primaria-escura); }
.paudio-play:active { transform: scale(0.94); }
.paudio-barra {
    flex: 1;
    height: 6px;
    background: rgba(13, 34, 71, 0.14);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    outline: none;
}
.paudio-barra:focus-visible { box-shadow: 0 0 0 3px rgba(26, 84, 191, 0.25); }
.paudio-progresso {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    min-width: 6px;
    background: var(--cor-primaria);
    border-radius: 999px;
}
.paudio-bolinha {
    position: absolute;
    right: -5px; top: 50%;
    width: 12px; height: 12px;
    transform: translateY(-50%);
    background: var(--cor-primaria);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(13, 34, 71, 0.3);
}
.paudio-tempo {
    flex-shrink: 0;
    font-size: 0.76em;
    font-weight: 700;
    color: var(--p-texto);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.paudio-velocidade {
    flex-shrink: 0;
    padding: 4px 9px;
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    background: #fff;
    color: var(--cor-primaria);
    font-size: 0.72em;
    font-weight: 800;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.paudio-velocidade:hover { border-color: var(--cor-primaria); }
.paudio-fechar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--p-texto);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--transicao), background var(--transicao);
}
.paudio-fechar:hover { opacity: 1; background: rgba(13, 34, 71, 0.08); }
.portal-alto-contraste .paudio-fechar { color: #000; opacity: 1; }
.portal-alto-contraste .paudio-play { background: #000; }
.portal-alto-contraste .paudio-barra { background: #ccc; }
.portal-alto-contraste .paudio-progresso,
.portal-alto-contraste .paudio-bolinha { background: #000; }
.portal-alto-contraste .paudio-tempo { color: #000; }
.portal-alto-contraste .paudio-velocidade { background: #fff; border: 1.5px solid #000; color: #000; }

.pnoticia-artigo-conteudo {
    margin-top: 28px;
    line-height: 1.85;
    color: #2b3a52;
}

.pnoticia-artigo-conteudo p { margin: 0 0 16px; }
.pnoticia-artigo-conteudo h2 { font-size: 1.3em; font-weight: 800; color: var(--p-tinta); margin: 28px 0 10px; }
.pnoticia-artigo-conteudo h3 { font-size: 1.12em; font-weight: 700; color: var(--p-tinta); margin: 22px 0 8px; }
.pnoticia-artigo-conteudo img { max-width: 100%; border-radius: 10px; }
/* Imagem com legenda (Fase 2) */
.pnoticia-artigo-conteudo figure.pfigura { margin: 24px 0; }
.pnoticia-artigo-conteudo figure.pfigura img { width: 100%; border-radius: 10px; display: block; }
.pnoticia-artigo-conteudo figure.pfigura figcaption {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--p-texto);
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}
.pnoticia-artigo-conteudo figure.pfigura figcaption:empty { display: none; }
.pnoticia-artigo-conteudo ul, .pnoticia-artigo-conteudo ol { margin: 0 0 16px; padding-left: 26px; }
.pnoticia-artigo-conteudo blockquote {
    margin: 0 0 16px;
    padding: 10px 18px;
    border-left: 4px solid var(--p-ouro);
    background: var(--p-gelo);
    border-radius: 0 10px 10px 0;
}

@media (max-width: 960px) {
    .pnoticias-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .pnoticias-grade { grid-template-columns: 1fr; }
}

/* ── Menu de filtro por assunto (tags) ─────────────────────────────────────── */
.portal-pagina > .pnoticias-filtro {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
}
.pnoticias-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.pnoticias-filtro-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--p-borda);
    border-radius: 999px;
    background: #fff;
    color: var(--p-texto);
    font-size: 0.86em;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.pnoticias-filtro-tag:hover {
    border-color: rgba(26, 84, 191, 0.4);
    color: var(--cor-primaria);
}
.pnoticias-filtro-tag.ativa {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}
.pnoticias-filtro-conta {
    font-size: 0.82em;
    opacity: 0.6;
    font-weight: 700;
}
.pnoticias-filtro-tag.ativa .pnoticias-filtro-conta { opacity: 0.85; }

/* ── Notícia aberta: artigo + barra lateral de apoio ───────────────────────── */
.pnoticia-layout {
    width: min(1080px, 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 44px;
    align-items: start;
    padding-bottom: 48px;
}
/* Dentro do grid o artigo enche a coluna (deixa de ser a de 760 centralizada). */
.pnoticia-layout > .pnoticia-artigo {
    width: auto;
    margin-inline: 0;
    padding-bottom: 0;
}

.pnoticia-aside {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pnoticia-aside-bloco {
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    padding: 18px 18px 20px;
}
.pnoticia-aside-compartilhar { padding: 14px 18px; }
.pnoticia-aside-titulo {
    font-size: 0.82em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-primaria);
    margin: 0 0 14px;
}
.pnoticia-aside-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
a.pnoticia-tag {
    display: inline-block;
    padding: 5px 12px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--cor-primaria);
    text-decoration: none;
    transition: background var(--transicao), border-color var(--transicao);
}
a.pnoticia-tag:hover {
    background: var(--cor-primaria-clara);
    border-color: rgba(26, 84, 191, 0.4);
}

/* Tags fechando o texto da notícia (acima do compartilhar). */
.pnoticia-artigo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 4px;
}

.pnoticia-aside-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
a.pnoticia-aside-item {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.pnoticia-aside-capa {
    width: 68px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    display: block;
}
.pnoticia-aside-capa-vazia {
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
}
.pnoticia-aside-corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pnoticia-aside-item-titulo {
    font-size: 0.86em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--p-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
a.pnoticia-aside-item:hover .pnoticia-aside-item-titulo { color: var(--cor-primaria); }
.pnoticia-aside-item-data {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a86a3;
}

@media (max-width: 900px) {
    .pnoticia-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(760px, 100% - 40px);
    }
    .pnoticia-aside { position: static; }
}

/* Alto contraste: filtro e barra lateral entram no preto-e-branco junto do resto. */
.portal-alto-contraste .pnoticias-filtro-tag { background: #fff; border-color: #000; color: #000; }
.portal-alto-contraste .pnoticias-filtro-tag.ativa { background: #000; color: #fff; border-color: #000; }
.portal-alto-contraste .pnoticia-aside-bloco { border: 2px solid #000; }
.portal-alto-contraste a.pnoticia-tag { background: #fff; border: 1.5px solid #000; color: #000; }
.portal-alto-contraste .pnoticia-aside-titulo,
.portal-alto-contraste .pnoticia-aside-item-titulo,
.portal-alto-contraste .pnoticia-aside-item-data { color: #000; }
.portal-alto-contraste .pnoticia-aside-capa-vazia { background: #000; }

/* ── Vereadores: cartão-retrato (adeus circulozinho) e perfil ──────────────── */

.portal-grade-vereadores a.pvereador-cartao,
.portal-grade-mesa a.pvereador-cartao {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.portal-grade-vereadores a.pvereador-cartao:hover,
.portal-grade-mesa a.pvereador-cartao:hover {
    transform: translateY(-4px);
    border-color: rgba(26, 84, 191, 0.35);
    box-shadow: 0 18px 40px rgba(13, 34, 71, 0.12);
}

/* 6:7, não 4:5: retrato presente sem encarar o cidadão de cima. */
.pvereador-foto {
    width: 100%;
    aspect-ratio: 6 / 7;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.pvereador-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
    color: rgba(255, 255, 255, 0.85);
    font-size: 3.2em;
    font-weight: 800;
}

.pvereador-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px 16px;
    flex: 1;
}

.pvereador-nome { font-size: 1.02em; font-weight: 800; color: var(--p-tinta); line-height: 1.3; }

.pvereador-partido { font-size: 0.8em; font-weight: 700; color: #7a86a3; letter-spacing: 0.04em; }

.pvereador-cargo {
    padding: 3px 12px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    border-radius: 999px;
    font-size: 0.76em;
    font-weight: 800;
}

.pvereador-ver {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.8em;
    font-weight: 800;
    color: var(--cor-primaria);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transicao), transform var(--transicao);
}

a.pvereador-cartao:hover .pvereador-ver { opacity: 1; transform: translateX(0); }

/* Perfil do vereador */

.pverdet {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin-inline: auto;
    padding-bottom: 48px;
}

.pverdet .portal-secao,
.pverdet .portal-titulo-pagina { width: auto; margin-inline: 0; }

.pverdet-topo {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-top: 16px;
}

.pverdet-foto {
    width: 250px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: 16px;
    flex-shrink: 0;
    box-shadow: 0 18px 40px rgba(13, 34, 71, 0.16);
    display: block;
}

span.pverdet-foto { display: flex; }

.pverdet-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
    min-width: 0;
}

.pverdet-nome {
    margin: 0;
    font-size: clamp(1.7em, 3.4vw, 2.3em);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--p-tinta);
    line-height: 1.1;
}

.pverdet-nome-completo { margin: -4px 0 0; color: #7a86a3; font-size: 0.92em; }

.pverdet-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pverdet-chip {
    padding: 5px 15px;
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--p-texto);
}

.pverdet-chip-cargo {
    background: var(--cor-primaria-clara);
    border-color: transparent;
    color: var(--cor-primaria);
}

.pverdet-contato {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.9em;
}

.pverdet-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 36px;
}

.pverdet-bloco {
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    padding: 22px 26px;
}

.pverdet-bloco h2 {
    font-size: 1.05em;
    font-weight: 800;
    color: var(--p-tinta);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cor-primaria-clara);
}

.pverdet-presenca {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
}

.pverdet-presenca strong {
    font-size: 2.4em;
    font-weight: 800;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}

.pverdet-presenca span { color: var(--p-texto); font-size: 0.9em; line-height: 1.4; }

@media (max-width: 640px) {
    .pverdet-topo { flex-direction: column; gap: 20px; }
    .pverdet-foto { width: min(280px, 100%); }
}

/* ── Redes sociais no rodapé + compartilhamento nas notícias ───────────────── */

.prodape-redes {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.prodape-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.prodape-redes a:hover {
    background: #fff;
    color: var(--p-noite);
    transform: translateY(-2px);
}

.pcompartilhar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--p-borda);
}

.pcompartilhar-rotulo {
    font-size: 0.82em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7a86a3;
    margin-right: 4px;
}

.pcompartilhar a,
.pcompartilhar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--p-borda);
    border-radius: 50%;
    background: #fff;
    color: var(--cor-primaria);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao), border-color var(--transicao);
}

.pcompartilhar a:hover,
.pcompartilhar button:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    transform: translateY(-2px);
}

.pcompartilhar-feito {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--cor-sucesso);
}

.portal-alto-contraste .prodape-redes a { border: 2px solid #fff; }
.portal-alto-contraste .pcompartilhar a,
.portal-alto-contraste .pcompartilhar button { border: 2px solid #000; color: #000; }

/* ── Ficha de trabalho do vereador: resumo e votos ─────────────────────────── */

.pverdet-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.pverdet-resumo-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 20px;
    background: var(--p-gelo);
    border-radius: 12px;
}

.pverdet-resumo-item strong {
    font-size: 1.7em;
    font-weight: 800;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}

.pverdet-resumo-item span { font-size: 0.82em; color: var(--p-texto); line-height: 1.3; }

.pverdet-voto-linha {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.pverdet-voto {
    flex-shrink: 0;
    min-width: 92px;
    text-align: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.76em;
    font-weight: 800;
}

.pverdet-voto.favor { background: #dcfce7; color: #166534; }
.pverdet-voto.contra { background: #fee2e2; color: #991b1b; }
.pverdet-voto.abstencao { background: #e5e7eb; color: #374151; }

.pverdet-voto-texto { min-width: 0; }

.pverdet-voto-sessao { font-size: 0.84em; font-weight: 700; }

.portal-alto-contraste .pverdet-resumo-item { border: 2px solid #000; }
.portal-alto-contraste .pverdet-voto { background: #fff; color: #000; border: 1.5px solid #000; }

/* ── Galeria, mapa e selo de destaque ──────────────────────────────────────── */

.pgaleria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.pgaleria-item {
    margin: 0;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 12px;
    overflow: hidden;
}

.pgaleria-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.pgaleria-item figcaption {
    padding: 10px 14px;
    font-size: 0.82em;
    color: var(--p-texto);
}

.pmapa {
    margin-top: 22px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--p-borda);
}

.pmapa iframe {
    width: 100%;
    height: 340px;
    border: 0;
    display: block;
}

.pnoticia-destaque {
    margin-left: 10px;
    padding: 2px 10px;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 999px;
    font-size: 0.86em;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* ── Dados abertos ────────────────────────────────────────────────────────────
   Tudo por token: no alto contraste o escopo .portal-alto-contraste redefine
   --p-* e as semânticas, e esta seção acompanha sozinha. Nenhum hex cravado. */

.pdados-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pdados-item {
    padding: 16px 18px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 12px;
}

.pdados-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pdados-identidade {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.pdados-titulo {
    font-size: 1.06em;
    color: var(--p-tinta);
}

.pdados-contagem {
    font-size: 0.82em;
    color: var(--p-texto);
    font-variant-numeric: tabular-nums;
}

.pdados-botoes {
    display: flex;
    gap: 8px;
}

/* Qualificado pelo elemento (a.classe) de propósito: `.portal a` lá em cima
   pinta todo link com a cor primária e vence uma classe sozinha na
   especificidade — o rótulo do botão saía azul sobre fundo azul, invisível.
   Mesmo remédio que .pnav a.pnav-link e .pcard a.pcard-link já usam aqui. */
.pdados-botoes a.pdados-baixar {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 0.86em;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--cor-primaria);
    transition: background 0.15s ease;
}
.pdados-botoes a.pdados-baixar:hover { background: var(--cor-primaria-escura); }

.pdados-botoes a.pdados-baixar-alt {
    background: transparent;
    color: var(--cor-primaria);
}
.pdados-botoes a.pdados-baixar-alt:hover {
    background: transparent;
    color: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
}

.pdados-descricao {
    margin: 10px 0 0;
    font-size: 0.9em;
    color: var(--p-texto);
    line-height: 1.55;
}

.pdados-dicionario { margin-top: 10px; }

.pdados-dicionario summary {
    cursor: pointer;
    font-size: 0.86em;
    font-weight: 700;
    color: var(--cor-primaria);
    width: fit-content;
    padding: 3px 0;
}
.pdados-dicionario summary:hover { color: var(--cor-primaria-escura); }

/* Tabela larga rola dentro da própria caixa: o corpo da página nunca
   pode ganhar rolagem horizontal. */
.pdados-tabela-rolagem {
    overflow-x: auto;
    margin-top: 8px;
}

.pdados-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84em;
}

.pdados-tabela th,
.pdados-tabela td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--p-borda);
    vertical-align: top;
}

.pdados-tabela thead th {
    color: var(--p-tinta);
    font-weight: 800;
    white-space: nowrap;
}

.pdados-tabela tbody th {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-weight: 600;
    color: var(--p-tinta);
    white-space: nowrap;
}

.pdados-tabela tbody td { color: var(--p-texto); }
.pdados-tabela tbody tr:last-child th,
.pdados-tabela tbody tr:last-child td { border-bottom: none; }

.pdados-licenca,
.pdados-nota {
    margin: 0 0 8px;
    font-size: 0.88em;
    color: var(--p-texto);
    line-height: 1.55;
}

.pdados-nota {
    padding: 10px 12px;
    background: var(--p-gelo);
    border-left: 3px solid var(--p-borda);
    border-radius: 0 8px 8px 0;
}

.pdados-carregando {
    font-size: 0.9em;
    color: var(--p-texto);
}

@media (max-width: 560px) {
    .pdados-cabecalho { align-items: flex-start; flex-direction: column; }
    .pdados-botoes { width: 100%; }
    .pdados-baixar { flex: 1; text-align: center; }
}

/* ── Busca inline (filtro de página; ex.: Publicações) ────────────────────────
   Tudo por token: no alto contraste o escopo .portal-alto-contraste redefine
   --p-* e o campo acompanha sozinho. Não confundir com a busca global do
   cabeçalho (overlay .pbusca-*), que é outra coisa. */
/* Chips (filtro por tipo) e busca na MESMA linha: filtros à esquerda, busca
   empurrada para a direita. Quebra para duas linhas quando não couber. */
/* Paginação das listas do portal (Sessões, Publicações) — pílulas como os chips */
.portal-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.portal-paginacao-btn,
.portal-paginacao-num {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: 10px;
    color: var(--cor-primaria);
    font-family: var(--fonte-principal);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.portal-paginacao-btn:hover:not(:disabled),
.portal-paginacao-num:hover {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
}

.portal-paginacao-num.ativo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.portal-paginacao-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Enquetes do portal ───────────────────────────────────────────────────── */
.penquete {
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
    box-shadow: 0 14px 34px -22px rgba(15, 32, 64, 0.4);
}

/* Com imagem: duas colunas (imagem à esquerda, pergunta à direita); a moldura
   some porque cada lado tem o seu respiro. Empilha no celular (media abaixo). */
.penquete-com-imagem {
    display: grid;
    grid-template-columns: minmax(0, 300px) 1fr;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}
/* A imagem preenche a coluna SEM esticar o card: em absoluto, ela sai do cálculo
   de altura da linha — quem manda na altura é o conteúdo (com um piso). Assim uma
   imagem vertical não gera um cartão gigante com vão vazio ao lado. */
.penquete-imagem { position: relative; min-height: 200px; background: var(--cor-fundo-secundario); }
.penquete-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.penquete-com-imagem .penquete-corpo { padding: 24px 28px; align-self: center; }

/* Página dedicada /enquetes (cartão NÃO-compacto): vira um bloco focado e
   centrado — o poll não precisa esticar na coluna toda — e a imagem ganha
   altura pra aparecer inteira, em vez de ser cortada no rodapé do cartão como
   acontecia. O cartão da capa (compacto) não é afetado. */
.portal-pagina > .penquete { width: min(820px, 100% - 40px); margin-inline: auto; }
.penquete-com-imagem:not(.penquete-compacto) .penquete-imagem { min-height: 300px; }

.penquete-titulo { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--p-tinta); }
.penquete-desc { margin: 0 0 18px; color: var(--p-texto); }

.penquete-opcoes { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.penquete-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1.5px solid #c5cad3;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.penquete-opcao:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.penquete-opcao.marcada { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); font-weight: 600; }
.penquete-opcao:active { transform: scale(0.995); }
.penquete-opcao input { accent-color: var(--cor-primaria); width: 20px; height: 20px; flex-shrink: 0; }

.penquete-votar {
    padding: 13px 30px;
    border: none;
    border-radius: 12px;
    background: var(--cor-primaria);
    color: #fff;
    font-family: var(--fonte-principal);
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px -12px var(--cor-primaria);
    transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.penquete-votar:hover:not(:disabled) { filter: brightness(1.07); }
.penquete-votar:active:not(:disabled) { transform: translateY(1px); }
.penquete-votar:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.penquete-erro { color: var(--cor-perigo); margin: 0 0 12px; font-size: 0.9em; }

.penquete-resultado { display: flex; flex-direction: column; gap: 14px; }
.penquete-barra-item { display: flex; flex-direction: column; gap: 6px; }
.penquete-barra-item.escolhida { font-weight: 600; }
.penquete-barra-topo { display: flex; justify-content: space-between; gap: 12px; }
.penquete-barra-num { font-variant-numeric: tabular-nums; color: var(--cor-primaria); font-weight: 700; }
.penquete-barra { height: 14px; background: var(--cor-fundo-secundario); border-radius: 999px; overflow: hidden; }
.penquete-barra-preenchida { height: 100%; background: var(--cor-primaria); border-radius: 999px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.penquete-barra-item.escolhida .penquete-barra-num { color: var(--cor-sucesso); }
.penquete-barra-item.escolhida .penquete-barra-preenchida { background: var(--cor-sucesso); }
.penquete-rodape { margin: 16px 0 0; font-size: 0.9em; color: var(--p-texto); }

.pinicio-enquete {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin: 44px auto;
}
.pinicio-enquete-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.penquete-compacto { margin-bottom: 0; }

@media (max-width: 640px) {
    .penquete-com-imagem { grid-template-columns: 1fr; }
    .penquete-imagem { min-height: 190px; }
}

.portal-filtros-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}
.portal-filtros-linha .portal-chips { margin-bottom: 0; }
.portal-filtros-linha .portal-busca-inline {
    margin-bottom: 0;
    margin-left: auto;   /* cola a busca na borda direita da coluna */
    flex: 0 1 340px;
}
@media (max-width: 620px) {
    /* Empilhou: a busca ocupa a largura toda, sem ficar torta à direita. */
    .portal-filtros-linha .portal-busca-inline { margin-left: 0; flex-basis: 100%; }
}

.portal-busca-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    margin-bottom: 16px;
    padding: 11px 18px;
    /* Fundo branco como os cartões; forma de pílula e borda como os chips —
       ela mora com eles, então veste como eles. */
    background: #fff;
    border: 1px solid #c5cad3;
    border-radius: 999px;
    color: var(--p-texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.portal-busca-inline:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}
.portal-busca-inline svg { flex-shrink: 0; color: var(--cor-primaria); }
.portal-busca-inline input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--fonte-principal);
    font-size: 0.95em;
    color: var(--p-tinta);
}
.portal-busca-inline input::placeholder { color: var(--p-texto); opacity: 0.7; }
/* Tira o "x" nativo do type=search: temos um botão próprio, com contraste. */
.portal-busca-inline input::-webkit-search-cancel-button { display: none; }
.portal-busca-inline-limpar {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.25em;
    line-height: 1;
    color: #7a86a3;
    padding: 0 2px;
}
.portal-busca-inline-limpar:hover { color: var(--p-tinta); }

/* ── Busca por voz (dentro da busca global) ───────────────────────────────────
   Botão só renderiza se o navegador suportar (ver BuscaPortal). Estado "ouvindo"
   pulsa em azul — não vermelho: vermelho leria como erro. Tudo por token. */
.pbusca-voz {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    background: var(--p-gelo);
    color: var(--p-texto);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pbusca-voz:hover {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.pbusca-voz.ouvindo {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    animation: pbuscaVozPulsa 1.4s ease-in-out infinite;
}
@keyframes pbuscaVozPulsa {
    0%, 100% { box-shadow: 0 0 0 0 var(--cor-primaria-clara); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
.pbusca-dica-ouvindo { color: var(--cor-primaria); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .pbusca-voz.ouvindo { animation: none; }
}

/* ── Feedback da busca por voz (mostra o que entendeu antes de redirecionar) ── */
.pbusca-voz-feedback { padding: 22px 18px; }
.pbusca-voz-falado { margin: 0 0 10px; font-size: 1.05em; color: var(--p-tinta); }
.pbusca-voz-indo {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-primaria);
    font-weight: 700;
}
.pbusca-voz-girando {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid var(--cor-primaria-clara);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: pbuscaGira 0.7s linear infinite;
}
@keyframes pbuscaGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pbusca-voz-girando { animation: none; } }

/* ── Ouvidoria (Lei 13.460/2017) ──────────────────────────────────────────────
   Tudo por token: acompanha o alto contraste sozinho. */
.pouv-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.pouv-tipo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pouv-tipo:hover {
    border-color: var(--cor-primaria);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.pouv-tipo:active { transform: translateY(1px); }
.pouv-tipo-icone {
    display: inline-flex;
    padding: 10px;
    border-radius: 10px;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
}
.pouv-tipo-rotulo { font-size: 1.05em; color: var(--p-tinta); }
.pouv-tipo-texto { font-size: 0.86em; color: var(--p-texto); line-height: 1.5; }

.pouv-consultar-chamada { margin-top: 18px; font-size: 0.92em; color: var(--p-texto); }
.pouv-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--cor-primaria);
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    text-decoration: underline;
}
.pouv-link:hover { color: var(--cor-primaria-escura); }

.pouv-voltar {
    border: none;
    background: none;
    padding: 0;
    margin-bottom: 12px;
    color: var(--cor-primaria);
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
}
.pouv-form-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--p-tinta);
    margin: 0 0 14px;
}
.pouv-form-titulo svg { color: var(--cor-primaria); }

.pouv-aviso-sigilo {
    padding: 12px 14px;
    background: var(--cor-primaria-clara);
    border-radius: 10px;
    font-size: 0.9em;
    color: var(--cor-primaria-escura);
    margin: 0 0 16px;
    line-height: 1.55;
}

.pouv-form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; margin-top: 6px; }
.pouv-campo { display: flex; flex-direction: column; gap: 8px; }
.pouv-label { font-size: 0.84em; font-weight: 700; color: var(--p-tinta); }
.pouv-campo input,
.pouv-campo textarea {
    font-family: var(--fonte-principal);
    font-size: 0.95em;
    color: var(--p-tinta);
    padding: 10px 12px;
    border: 1px solid #c5cad3;
    border-radius: 8px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pouv-campo textarea { resize: vertical; line-height: 1.5; }
.pouv-campo input:focus,
.pouv-campo textarea:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}
.pouv-campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pouv-identidade { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }

.pouv-anonima {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.92em;
    color: var(--p-tinta);
    cursor: pointer;
}
.pouv-anonima input { width: 17px; height: 17px; accent-color: var(--cor-primaria); }

.pouv-erro {
    margin: 0;
    padding: 10px 12px;
    background: var(--cor-perigo-clara, #fdecec);
    border-left: 3px solid var(--cor-perigo);
    border-radius: 0 8px 8px 0;
    font-size: 0.9em;
    color: var(--cor-perigo);
}

.pouv-enviar {
    align-self: flex-start;
    padding: 12px 26px;
    background: var(--cor-primaria);
    color: #fff;
    border: 1px solid var(--cor-primaria);
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.pouv-enviar:hover { background: var(--cor-primaria-escura); }
.pouv-enviar:disabled { opacity: 0.6; cursor: default; }

/* Recibo */
.pouv-recibo {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 14px;
}
.pouv-recibo-selo {
    display: inline-flex;
    padding: 14px;
    border-radius: 999px;
    background: var(--cor-sucesso, #e7f6ec);
    color: var(--cor-sucesso, #1f8f4e);
    margin-bottom: 12px;
}
.pouv-recibo-titulo { margin: 0 0 8px; color: var(--p-tinta); }
.pouv-recibo-texto { font-size: 0.9em; color: var(--p-texto); line-height: 1.6; margin: 0 0 18px; }
.pouv-recibo-dados {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pouv-recibo-dados > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    background: var(--p-gelo);
    border: 1px dashed var(--cor-primaria);
    border-radius: 10px;
}
.pouv-recibo-rotulo { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-texto); }
.pouv-recibo-valor { font-size: 1.4em; color: var(--cor-primaria); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pouv-recibo-prazo { font-size: 0.86em; color: var(--p-texto); margin: 0 0 18px; }
.pouv-recibo-acoes { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* Consulta / resultado */
.pouv-form-consulta { max-width: 480px; }
.pouv-resultado {
    max-width: 640px;
    margin-top: 22px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--p-borda);
    border-radius: 12px;
}
.pouv-resultado-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--p-borda);
    font-size: 0.92em;
}
.pouv-resultado-linha span { color: var(--p-texto); }
.pouv-resultado-linha strong { color: var(--p-tinta); }
.pouv-status { padding: 2px 10px; border-radius: 999px; font-size: 0.85em; }
.pouv-status-aberta { background: var(--cor-alerta-clara, #fef3d8); color: var(--cor-alerta, #9a6a00); }
.pouv-status-em_analise { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.pouv-status-respondida,
.pouv-status-encerrada { background: var(--cor-sucesso-clara, #e7f6ec); color: var(--cor-sucesso, #1f8f4e); }
.pouv-resposta { margin-top: 14px; }
.pouv-resposta p { margin: 6px 0 0; font-size: 0.95em; color: var(--p-tinta); line-height: 1.6; white-space: pre-wrap; }
.pouv-resultado-aguardando { margin: 14px 0 0; font-size: 0.9em; color: var(--p-texto); font-style: italic; }

@media (max-width: 560px) {
    .pouv-campo-dupla { grid-template-columns: 1fr; }
}

/* Contato da ouvidoria (canais alternativos ao formulário) */
.pouv-contato { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--p-borda); }
.pouv-contato-titulo { margin: 0 0 14px; font-size: 1.05em; color: var(--p-tinta); }
.pouv-contato-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.pouv-contato-lista li { display: flex; align-items: flex-start; gap: 10px; }
.pouv-contato-lista svg { flex-shrink: 0; margin-top: 2px; color: var(--cor-primaria); }
.pouv-contato-lista span { display: flex; flex-direction: column; font-size: 0.9em; color: var(--p-tinta); line-height: 1.45; }
.pouv-contato-lista strong { font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p-texto); font-weight: 700; }

/* Destaque da ouvidoria na página inicial (só quando ativa) */
.pouv-destaque {
    width: min(var(--p-largura, 1140px), 100% - 40px);
    margin: 8px auto 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--p-gelo);
    border: 1px solid var(--p-borda);
    border-radius: 14px;
    color: var(--p-tinta);
}
.pouv-destaque-icone {
    flex-shrink: 0; display: inline-flex; padding: 11px;
    background: var(--cor-primaria-clara); border-radius: 12px; color: var(--cor-primaria);
}
.pouv-destaque-texto { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pouv-destaque-texto strong { font-size: 1.08em; color: var(--p-tinta); }
.pouv-destaque-texto span { font-size: 0.88em; color: var(--p-texto); line-height: 1.5; }
/* a.classe de propósito: .portal a (cor primária) venceria a classe sozinha e
   deixaria o texto azul sobre o botão azul — invisível. Mesmo remédio do
   botão de dados abertos. */
.pouv-destaque a.pouv-destaque-botao {
    flex-shrink: 0; padding: 10px 20px; border-radius: 8px;
    background: var(--cor-primaria); color: #fff; font-weight: 700; font-size: 0.88em;
    text-decoration: none; white-space: nowrap; transition: background 0.15s ease;
}
.pouv-destaque a.pouv-destaque-botao:hover { background: var(--cor-primaria-escura); }
@media (max-width: 640px) {
    .pouv-destaque { flex-direction: column; align-items: flex-start; }
    .pouv-destaque-botao { width: 100%; text-align: center; }
}

/* WhatsApp no rodapé: ícone + número (no lugar do texto "WhatsApp:") */
.prodape-whats a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.prodape-whats a:hover { text-decoration: underline; }
.prodape-whats svg { flex-shrink: 0; }