/* Layout: sala de monitoramento — barra de status, números com tendência, fluxo das etapas,
   lista principal e pauta, mapas de contexto. A proposta abre na página dela (/p/pec-221-2019).
   Ideologia é sempre POSIÇÃO numa régua, nunca cor; Sim e Não se distinguem por forma (cheio × vazado). */
:root {
  /* Paleta de 12/10/2026 (home, painel e /p/). Segue o tema do aparelho; a escolha no painel de Acessibilidade vale para o site
     inteiro (data-theme). Âmbar vivo (--amber) SÓ para preencher, com --on-amber em cima; texto âmbar é sempre --amber-text
     (= --signal: serve também a borda e o foco). Níveis dos ladrilhos e selos: --f5…--f0 com texto escuro (--on-amber). */
  --bg: #ffffff; --soft: #f4f6f8; --panel: #ffffff; --panel-2: #f4f6f8; --line: #e1e5ea; --line-2: #c9d0d9; --ctl: #6b7684;
  --ink: #0f141a; --muted: #4f5b6b; --dim: #4f5b6b;
  --signal: #8a5200; --focus: #8a5200;
  --amber: #ffb21e; --on-amber: #0f141a; --amber-text: #8a5200; --tint: #fff4dc; --tint-crit: #fdecea;
  --band: #0f141a; --on-band: #ffffff; --band-muted: #c9d0d9; --band-line: #8b95a1; --urg: #c93a16; --on-urg: #ffffff;
  --sev5: #c62828; --sev4: #b4321a; --sev3: #8a5200;   /* cor de TEXTO e de borda do nível; o preenchimento é --f5…--f1 */
  --f5: #f0625a; --f4: #ff8a5c; --f3: #ffb21e; --f2: #ffd166; --f1: #8fb0ff; --f0: #59db8f;
  --alert: #b3372a; --info: #2563c9; --ok: #1d7650; --sim: #0f141a; --nao: #4f5b6b;
  --display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  /* Atkinson Hyperlegible: feita para leitura fácil por público amplo (Braille Institute). Os "Fallback" (fontes.css)
     são Arial com size-adjust: o Verdana era ~14% mais largo e, com a fonte chegando depois, o topo perdia uma linha (CLS) */
  --body: "Atkinson Hyperlegible", "Atkinson Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b0e12; --soft: #151b23; --panel: #11161c; --panel-2: #151b23; --line: #262f3b; --line-2: #34404e; --ctl: #7d8a9b;
  --ink: #eef2f6; --muted: #9aa7b8; --dim: #9aa7b8; --signal: #ffb21e; --focus: #ffb21e; --amber-text: #ffb21e; --tint: #241a08; --tint-crit: #2a1414;
  --band: #000000; --sev5: #ff6b6b; --sev4: #ff8a5c; --sev3: #ffb21e;
  --alert: #ef6b5b; --info: #6ea8fe; --ok: #4cc38a; --sim: #eef2f6; --nao: #9aa7b8; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0b0e12; --soft: #151b23; --panel: #11161c; --panel-2: #151b23; --line: #262f3b; --line-2: #34404e; --ctl: #7d8a9b;
  --ink: #eef2f6; --muted: #9aa7b8; --dim: #9aa7b8; --signal: #ffb21e; --focus: #ffb21e; --amber-text: #ffb21e; --tint: #241a08; --tint-crit: #2a1414;
  --band: #000000; --sev5: #ff6b6b; --sev4: #ff8a5c; --sev3: #ffb21e;
  --alert: #ef6b5b; --info: #6ea8fe; --ok: #4cc38a; --sim: #eef2f6; --nao: #9aa7b8; color-scheme: dark }
/* fim dos temas: o build copia o app.css até esta linha para o CSS das páginas /p/<chave> */
/* Acessibilidade */
.a11y { position: fixed; z-index: 35; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100% - 80px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); display: grid; gap: 12px }
.a11y[hidden], .tip[hidden] { display: none }
.a11y-h { display: flex; justify-content: space-between; align-items: center }
.a11y-h h2 { font: 700 18px var(--body) }
.a11y .close, .a11y .more { min-height: 44px; margin: 0; border: 1px solid var(--ctl); background: var(--panel-2); border-radius: 4px; padding: 6px 14px; cursor: pointer; font: 600 15px var(--body) }
.a11y .note { margin: 0; font-size: 15px; color: var(--muted) }
.a11y-op { display: grid; gap: 6px }
.a11y-op > span { font-size: 15px; font-weight: 700 }
.seg2 { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; width: fit-content }
.seg2 button { border: 0; background: none; min-height: 44px; padding: 6px 14px; cursor: pointer; font: 400 15px var(--body); color: var(--ink) }
.seg2 button + button { border-left: 1px solid var(--line-2) }
.seg2 button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); font-weight: 700 }
:root[data-espaco="amplo"] body { letter-spacing: .03em; word-spacing: .1em; line-height: 1.8 }
:root[data-espaco="amplo"] p, :root[data-espaco="amplo"] li { line-height: 1.8 }
:root[data-links="sublinhado"] a { text-decoration: underline !important; text-underline-offset: 3px }
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before { animation: none !important; transition: none !important }
/* Alto contraste: texto secundário quase igual ao principal, bordas fortes, fundo puro (depois da paleta, para vencer: mesmo peso, vale o último) */
:root[data-contraste="alto"] {
  --bg: #000; --soft: #0d0d0d; --panel: #000; --panel-2: #0d0d0d; --line: #6b7380; --line-2: #9aa3ae; --ctl: #c9d0d9;
  --ink: #fff; --muted: #e2e6ea; --dim: #d0d5db; --signal: #ffc04d; --focus: #ffc04d;
  --amber: #ffc04d; --on-amber: #000; --amber-text: #ffc04d; --tint: #000; --tint-crit: #000;
  --band: #000; --band-muted: #fff; --band-line: #fff; --urg: #8f1d10; --sev5: #ff8a7a; --sev4: #ffa07a; --sev3: #ffc04d;
  --info: #9cc3ff; --ok: #6fe0a6; --alert: #ff8a7a }
:root[data-contraste="alto"][data-tema-efetivo="claro"] {
  --bg: #fff; --soft: #f2f2f2; --panel: #fff; --panel-2: #f2f2f2; --line: #6b7380; --line-2: #3d4450; --ctl: #1f252c;
  --ink: #000; --muted: #1f252c; --dim: #2b323a; --signal: #7a4500; --focus: #000;
  --amber: #ffb21e; --on-amber: #000; --amber-text: #6b3b00; --tint: #fff; --tint-crit: #fff;
  --band: #000; --band-muted: #fff; --band-line: #fff; --urg: #8f1d10; --sev5: #8f1d10; --sev4: #7a2200; --sev3: #6b3b00;
  --info: #0b4bb0; --ok: #0d5c39; --alert: #8f1d10 }
:root[data-contraste="alto"] .panel, :root[data-contraste="alto"] .sobre { border-width: 2px }
/* fim da acessibilidade: o build copia de "Acessibilidade" até aqui para o CSS da página inicial */
/* Topo em faixa preta, rodapé preto e contêineres: o mesmo na página inicial, no painel e nas /p/ (marca, ← Início, lupa,
   Acessibilidade, menu). O build copia daqui até a marca de fim, logo abaixo, para o CSS das três páginas. */
.ini { zoom: var(--zoom, 1) }
.g { padding-inline: 16px }
.in { max-width: 1120px; margin: 0 auto }
.top { background: var(--band); color: var(--on-band) }
.top .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-block: 10px 2px }  /* com o texto ampliado (A++) os ícones descem para a linha de baixo em vez de estourar a largura */
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; color: var(--on-band); text-decoration: none; font: 800 15px/1 var(--display); font-stretch: 125%; letter-spacing: .02em }
.brand svg { flex: none }
.top .ic { margin-left: auto; display: flex; gap: 8px; align-items: center }
.top .ic button, .top .ic a.ico, .top .ic a.txt { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--band-line); border-radius: 8px; background: none; color: var(--on-band); cursor: pointer; text-decoration: none; font: 700 15px/1 var(--body) }
.top .ic a.txt { display: inline-flex; align-items: center; gap: 5px; padding-inline: 12px; white-space: nowrap }
.top .ic button:hover, .top .ic button[aria-expanded="true"], .top .ic a.ico:hover, .top .ic a.txt:hover { border-color: var(--amber); color: var(--amber); background: none }
.top :focus-visible, .foot :focus-visible { outline-color: var(--amber) }
/* Celular estreito: a marca encolhe e o "← Início" vira só a seta (o menu logo abaixo já começa em "Início"; o nome acessível segue completo) */
@media (max-width: 480px) {
  .brand { font-size: 14px }
  .top .ic a.txt { min-width: 44px; padding-inline: 0; justify-content: center }
  .top .ic a.txt .rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}
.menu { display: flex; gap: 0 22px; overflow-x: auto; scrollbar-width: none; font: 700 16px/1 var(--body); white-space: nowrap }
.menu::-webkit-scrollbar { display: none }
.menu.corta { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent) }
.menu a { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--band-muted); text-decoration: none; border-bottom: 3px solid transparent; padding-top: 3px }
.menu a:hover { color: var(--on-band) }
.menu a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--amber) }
.menu a:focus-visible { outline-offset: -4px }
.data-l { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-block: 12px 0; font: 500 13px/1.3 var(--mono); color: var(--muted) }
.data-l .live { font: inherit; color: inherit }
.data-l .live.atrasado { color: var(--ink); font-weight: 600 }
.foot { background: var(--band); color: var(--band-muted); font-size: 15px }
.foot a { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px }
/* fim do topo */
/* Página estática /p/<chave> (SEO-01), do designer (design/pagina-proposta.css). O build publica assets/pagina.<hash>.css =
   temas e paleta do app.css (até a marca "fim dos temas") + bloco de Acessibilidade + topo/rodapé em faixa preta do app.css
   + este arquivo + compartilhar.css. Sem JavaScript obrigatório (o painel de Acessibilidade e o compartilhar usam um pouco). */
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body) }
a { color: var(--signal); text-underline-offset: 3px }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.pular { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--amber); color: var(--on-amber); padding: 10px 14px; border-radius: 4px; font-weight: 700; text-decoration: none }
.pular:focus { top: 8px }
.lbl { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.num { font-family: var(--mono) }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; min-width: 0 }
.ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px }
.ph .lbl { text-transform: none; letter-spacing: 0; font-weight: 400 }
.ph h2 { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 }

.pg { max-width: 760px; margin: 0 auto; padding: 16px 16px 56px; display: grid; gap: 14px }
.mig { font-size: 15px }
.mig a, .volta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700 }
.volta { margin: 0 }
.aviso-fora { margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--signal); border-radius: 6px; background: var(--panel); font-size: 15px }  /* ficha fora do radar */
.aviso-fora a { font-weight: 700 }
.pg h1 { margin: 0; font: 800 clamp(28px, 8vw, 40px)/1.08 var(--display); font-stretch: 115%; text-wrap: balance }
.pg .f-num { margin: 4px 0 0; font: 500 14px/1.4 var(--mono); color: var(--muted) }
.pg .apel { margin: 3px 0 0; font: 600 16px var(--body); color: var(--signal) }
.fase { font: 600 17px var(--body) }  /* em "Em que pé está" */
.sev { display: inline-block; padding: 5px 10px; border-radius: 3px; font: 700 12px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-amber) }
.s5 { background: var(--f5) } .s4 { background: var(--f4) } .s3 { background: var(--f3) } .s2 { background: var(--f2) } .s1 { background: var(--f1) } .s0 { background: var(--f0) }
.quando { margin: 0; color: var(--muted); font-size: 15px }
.simples .frase { margin: 0 0 8px; font: 700 20px/1.35 var(--body) }
.simples .tag { display: inline-block; font: 600 12px/1 var(--mono); padding: 3px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; vertical-align: 2px }
.simples ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px }
.simples p { margin: 0 0 8px }
.simples .sub-h { margin-bottom: 4px }
.simples .selo { font-size: 13px; color: var(--muted); margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 10px 0 0; padding: 0; list-style: none }
.etapas li { border-top: 4px solid var(--line-2); padding-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.25; hyphens: auto; overflow-wrap: anywhere }
.etapas li.on { border-color: var(--muted) }
.etapas li.now { border-color: var(--signal); color: var(--ink); font-weight: 700 }
.fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0 }
.fatos > div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px }
.fatos dt { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.fatos dd { margin: 4px 0 0; font: 600 16px/1.35 var(--body) }
.fatos small { display: block; font-weight: 400; font-size: 13px; color: var(--muted) }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px }
/* Rodapé preto (a faixa .foot vem do app.css) */
.rodape-p { display: grid; gap: 6px; padding-block: 22px 28px }
.rodape-p p { margin: 0 }
@media (max-width: 640px) { .pg .apel { font-size: 15px } .simples .frase { font-size: 18px } .pg { gap: 12px; padding-top: 12px } }
.ementa { margin: 0 0 10px }
.palavras { margin: 0 0 10px }
.pl-t { margin: 0 0 6px; font: 600 13px/1.3 var(--body); color: var(--muted) }
.palavras ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
.palavras li { padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; line-height: 1.4 }
.lead { margin: 0; font: 700 19px/1.4 var(--body) }

/* ---- A ficha completa na própria página (12/10/2026): o que antes abria por cima do painel ---- */
.note { font-size: 13px; color: var(--muted); margin: 10px 0 0 }
.mini { font-size: 12px }
.muted { color: var(--muted) }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.tag { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 6px; margin-right: 6px }
/* Alerta: selo do nível, o que ele diz, o prazo em data fixa e quem empurra */
.al-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start }
.al-ficha .sev { justify-self: start }
.al-ficha p { margin: 0; font-size: 15px } .al-ficha small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px }
.al-ficha .prazo { display: inline-block; font: 600 12px/1 var(--mono); border: 1px solid var(--ink); border-radius: 3px; padding: 3px 6px; margin-left: 4px }
.al-ficha .quem { margin-top: 8px; font-size: 14px }
.al-ficha .quem .lbl { margin-right: 6px }
@media (max-width: 480px) { .al-ficha { grid-template-columns: minmax(0, 1fr) } }
.origin-big .track { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--line-2) 0 40%, var(--line) 40% 70%, var(--line-2) 70% 100%); margin: 30px 0 6px }
.origin-big .track b { position: absolute; top: -6px; width: 6px; height: 26px; border-radius: 3px; background: var(--amber); box-shadow: 0 0 0 2px var(--ink); transform: translateX(-3px) }
.origin-big .track s { position: absolute; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .55; transform: translateX(-4px) }
.origin-big .track em { position: absolute; top: -24px; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--signal); font-style: normal; white-space: nowrap }
.origin-big .axis { display: flex; justify-content: space-between; font: 500 13px var(--mono); color: var(--muted) }
.verdict { font: 700 22px/1.1 var(--display); font-stretch: 110%; text-transform: uppercase; margin-top: 4px }
.verdict.inst { color: var(--info) }
.meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; position: relative; margin: 8px 0 4px }
.meter i { display: block; height: 100%; background: var(--amber) }
.meter u { position: absolute; top: 0; width: 2px; height: 6px; background: var(--ink) }
.leitura { margin: 0 0 12px; font-size: 15px }
.i-sim { background: var(--sim) }
.i-nao { background: repeating-linear-gradient(90deg, var(--nao) 0 2px, transparent 2px 3px) }
.i-out { background: var(--line-2) }
.fx { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 14px }
.fx .bar { display: flex; height: 18px; border-radius: 2px; overflow: hidden; background: var(--line) }
.fx .bar i { display: block; height: 100% }
.fx .n { font: 500 12px var(--mono); color: var(--muted); text-align: right }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin: 4px 0 10px }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }
.legend .ring { border-radius: 50%; border: 2px solid var(--nao); background: transparent }
.legend .dot { border-radius: 50%; background: var(--sim) }
.vlinha { border-top: 1px solid var(--line); padding: 8px 0; font-size: 14px }
.strip-fx, .strip-pt { position: relative; font: 500 12px/16px var(--mono); color: var(--muted) }
.strip-fx { height: 16px; margin-bottom: 2px }
.strip-fx span, .strip-pt span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap }
.strip-pt { height: 64px; margin-top: 4px; visibility: hidden }  /* as siglas só aparecem depois que o pagina.js as distribui em linhas */
.strip-pt.on { visibility: visible }
.strip-plot { position: relative }
.strip-plot svg { display: block }
.strip-plot .sn { position: absolute; left: 0; font: 600 12px var(--mono); color: var(--muted) }
.prt { display: grid; grid-template-columns: 112px minmax(0, 1fr) 64px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0 }
.prt .sg-p { font-weight: 600 }
.prt .stack { display: flex; height: 12px }
.prt .stack i { display: block; height: 100% }
.prt .n { font: 500 12px var(--mono); color: var(--muted); text-align: right }
/* Listas longas dentro de <details>: o resumo é o botão, com o título da seção e a contagem */
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none }
details > summary::-webkit-details-marker { display: none }
details > summary::after { content: "+"; font: 700 22px/1 var(--mono); margin-left: auto; padding-left: 12px }
details[open] > summary::after { content: "−" }
.lista-longa > summary { justify-content: flex-start; gap: 12px } .lista-longa > summary h2 { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 }
.lista-longa .filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 }
.lista-longa .filters[hidden] { display: none }
.filters input, .filters select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--ctl); border-radius: 4px; padding: 8px 10px; font: 400 15px var(--body); min-width: 0; min-height: 44px }
.filters input { flex: 1 1 200px }
.table-wrap { overflow: auto; max-height: 380px; border: 1px solid var(--line); border-radius: 4px; margin-top: 10px }
table.nom { border-collapse: collapse; width: 100%; font-size: 14px }
table.nom th, table.nom td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
table.nom th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase }
.tl { list-style: none; margin: 0 0 4px; padding: 0; border-left: 2px solid var(--line-2) }
.tl li { position: relative; padding: 0 0 12px 14px; font-size: 15px }
.tl li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--info) }
.tl li.decisao::before { background: var(--amber); border-color: var(--signal) }
.tl li.disputa::before { border-color: var(--alert) }
.tl .when { font: 500 13px var(--mono); color: var(--muted) }
.mais-passos { margin-top: 6px }
.mais-passos > summary { justify-content: flex-start; font-weight: 700; color: var(--signal) }
.mais-passos > summary::after { margin-left: 8px }
.mais-passos[open] > summary { margin-bottom: 8px }

/* ---- /como-funciona (perguntas frequentes; site/comofunciona.py) ---- */
.faq .perguntas { display: grid; gap: 10px }
.pergunta { background: var(--panel); border: 1px solid var(--line); border-radius: 6px }
.pergunta > summary { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; cursor: pointer; font: 700 17px/1.35 var(--body) }
.pergunta[open] > summary { border-bottom: 1px solid var(--line) }
.pergunta .resp { padding: 12px 14px 4px; overflow-wrap: anywhere }
.pergunta .resp p, .pergunta .resp ul, .pergunta .resp ol { margin: 0 0 12px }
.pergunta .resp ul, .pergunta .resp ol { padding-left: 20px; display: grid; gap: 6px }
.pergunta h3 { margin: 16px 0 2px; font: 700 16px/1.3 var(--body) }
.pergunta .nota-t { margin: 0 0 8px; font-size: 14px; color: var(--muted) }
.pesos { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 15px }
.pesos th, .pesos td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.pesos thead th { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.pesos tbody th { font-weight: 400 }
.pesos td.num { text-align: right; white-space: nowrap }
@media (max-width: 640px) { .pesos { font-size: 14px } .pesos th, .pesos td { padding: 6px 4px } }

/* ---- /dados e /correcoes (site/institucional.py) ---- */
.inst .bloco { display: grid; gap: 10px; margin-top: 8px }
.inst h2 { margin: 0; font: 700 20px/1.3 var(--body) }
.inst p, .inst ul { margin: 0 }
.inst ul { padding-left: 20px; display: grid; gap: 6px }
.inst code { font: 500 15px var(--mono); overflow-wrap: anywhere }
.botao-dl { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 6px; background: var(--amber); color: var(--on-amber); font-weight: 700; text-decoration: none }
.botao-dl:hover { text-decoration: underline }
.dic-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px }
.dic { width: 100%; border-collapse: collapse; font-size: 15px }
.dic th, .dic td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.dic tbody tr:last-child > * { border-bottom: 0 }
.dic thead th { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel) }
.dic tbody th { font-weight: 400; white-space: nowrap }
.dic td:nth-child(2) { white-space: nowrap }
.aviso-ia { padding: 12px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--signal); border-radius: 6px; background: var(--panel) }
.erratas { list-style: none; padding: 0; display: grid; gap: 10px }
.erratas li { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: grid; gap: 6px }
.erratas .e-data { font: 600 15px var(--mono); color: var(--muted) }
.vazio { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 6px }
/* Botão de compartilhar (ficha do painel e página /p/<chave>). Vem do designer (design/compartilhar.css). O build junta
   este arquivo ao app.css (assets/app.<hash>.css) e ao pagina.css (assets/pagina.<hash>.css). --amber e --on-amber ficam nos temas do app.css. */
.compartilhar { display: grid; gap: 10px }
.compartilhar .ph { margin-bottom: 0 }
.cp-acoes { display: flex; flex-wrap: wrap; gap: 8px }
.cp-redes { display: contents }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--muted); border-radius: 6px; background: var(--panel-2); color: var(--ink);
  font: 700 15px/1.2 var(--body); text-decoration: none; cursor: pointer }
.cp-btn[hidden] { display: none }
.cp-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.cp-btn:hover { border-color: var(--ink) }
.cp-btn.primario { background: var(--amber); border-color: var(--amber); color: var(--on-amber) }
.cp-btn.feito { border-color: var(--ok); color: var(--ok) }      /* o texto também muda para "Link copiado" e o ícone vira um visto */
.cp-end { display: grid; gap: 4px }
.cp-end input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: 13px/1.2 var(--mono) }
.cp-ok { margin: 0; font-weight: 700; color: var(--ok) }
.cp-ok:empty { height: 0 }   /* vazio ocupa 0, mas continua na tela: região anunciável (display:none não anunciaria) */
/* celular com folha nativa (12/10/2026): WhatsApp, Copiar link e "Facebook, Instagram e outros" (a folha); o resto, inclusive o
   link direto do Facebook (o app abre e ignora o endereço), fica dentro da folha */
.compartilhar.com-nativo .cp-redes { display: none }
@media (max-width: 640px) {
  .cp-acoes .cp-btn { flex: 1 1 calc(50% - 4px) }
  .compartilhar.com-nativo [data-cp="nativo"] { flex-basis: 100% }
}
/* Canal do WhatsApp (passo 16): bloco discreto na home e nas /p/. Texto em --ink (nunca opacity), link sublinhado; ícone em currentColor, sem a cor da marca */
.canal { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 0; color: var(--ink); font-size: 15px }
.canal svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round }
.canal a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px }