/* 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> */

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); margin: 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 }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
main:focus { outline: none }
.wrap { max-width: 1152px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px }  /* 1120 de conteúdo: o mesmo da faixa preta */
h1, h2, h3 { margin: 0; text-wrap: balance }
a { color: var(--signal) }
button, select, input { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.lbl { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.muted { color: var(--muted) }

/* Ponto de atualização: o mesmo na página inicial (o build copia este bloco até a marca de fim, logo abaixo) */
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--muted) }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent) }
@media (prefers-reduced-motion: no-preference) { .live i { animation: pulse 2.4s ease-in-out infinite } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent) } }
/* Atualização atrasada: o ponto para de pulsar e muda de cor (o texto também diz "atrasou") */
.live.atrasado i { background: var(--sev3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev3) 25%, transparent); animation: none }
/* fim do ponto de atualização */

/* 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 */

/* Busca do painel: a lupa do topo abre este campo logo abaixo da faixa (a caixa de resultados fica por cima da página) */
.busca { position: relative; padding-block: 6px 12px }
.busca input { width: 100%; min-height: 48px; padding: 0 14px; background: var(--bg); color: var(--ink); border: 2px solid var(--ctl); border-radius: 8px; font-size: 17px }
.busca input::placeholder { color: var(--muted); opacity: 1 }
.busca-res { position: absolute; z-index: 20; top: calc(100% - 6px); left: 0; right: 0; max-height: min(70vh, 540px); overflow: auto; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); padding: 6px }
.busca-res ul { list-style: none; margin: 0; padding: 0 }
.busca-res li + li { border-top: 1px solid var(--line) }
.busca-res li a { display: grid; gap: 2px; padding: 10px 8px; min-height: 44px; border-radius: 4px; text-decoration: none; color: var(--ink) }
.busca-res li a:hover, .busca-res li a:focus-visible { background: var(--panel-2) }
.busca-res li a b { font: 700 16px/1.3 var(--body) }
.busca-res li a:hover b, .busca-res li a:focus-visible b { text-decoration: underline }
.busca-res .bn { font: 500 12px/1.4 var(--mono); color: var(--muted) }
.busca-res .be { font-size: 14px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.busca-res > p { margin: 6px 8px; font-size: 15px }
.busca-res .links { margin: 4px 8px 8px }
.subtitulo { font: italic 400 15px/1.35 var(--body); color: var(--muted) }
.subtitulo a { font-weight: 700; font-style: normal; white-space: nowrap }

/* Atalhos presos no topo (no lugar das abas): uma rolagem só */
.atalhos { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-top: 8px; background: var(--bg); border-bottom: 1px solid var(--line) }
.atalhos .in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 8px }
.atalhos .in::-webkit-scrollbar { display: none }
.atalhos a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--ctl); border-radius: 999px; color: var(--ink); text-decoration: none; font: 700 15px/1 var(--body) }
.atalhos a:hover { border-color: var(--ink); text-decoration: underline }

/* Painéis */
/* abaixo dos atalhos presos no topo (serve às âncoras, ao scrollIntoView e ao foco por teclado) */
html { scroll-padding-top: 72px }
#pauta { margin-top: 14px }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; min-width: 0 }
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px }
.ph h2 { font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink) }
.ph .lbl { text-transform: none; letter-spacing: 0; font-weight: 400 }
.row { display: grid; gap: 14px; margin-top: 14px }
.r-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.r-flow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) }
.r-main { grid-template-columns: minmax(0, 1fr) 380px; align-items: start }
.r-ctx { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) }
.r-agora { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch }
/* Cards da Agora: cada um tem um estado (crítico, atenção, ok, calmo) que aparece como faixa de cor,
   fundo levemente tingido e uma palavra — a cor nunca fala sozinha. O número é o maior texto da tela. */
.ag-card { --est: var(--line-2); --est-fill: var(--line-2); --est-text: var(--muted); --est-bg: var(--panel); display: grid; gap: 8px; align-content: start; padding: 16px 16px 14px;
  border-top: 5px solid var(--est); background: var(--est-bg) }
/* --est = faixa e barra; --est-fill = selo (texto escuro por cima); --est-text = o número grande (texto) */
.ag-card.est-critico { --est: var(--sev5); --est-fill: var(--f5); --est-text: var(--sev5); --est-bg: var(--tint-crit) }
.ag-card.est-atencao { --est: var(--amber); --est-fill: var(--amber); --est-text: var(--amber-text); --est-bg: var(--tint) }
.ag-card.est-ok { --est: var(--ok); --est-fill: var(--f0); --est-text: var(--ok); --est-bg: color-mix(in srgb, var(--ok) 7%, var(--panel)) }
.ag-card.est-calmo, .ag-card.est-dado { --est: var(--line-2); --est-bg: var(--panel) }
.ag-top { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.ag-card .est { font: 700 12px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; padding: 5px 7px; border-radius: 3px; background: var(--est-fill); color: var(--on-amber); white-space: nowrap }
.ag-card.est-calmo .est, .ag-card.est-dado .est { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2) }
.ag-card .big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.ag-card .big b { font: 800 52px/.95 var(--display); font-stretch: 110%; font-variant-numeric: tabular-nums; color: var(--ink) }
.ag-card:not(.est-calmo):not(.est-dado) .big b { color: var(--est-text) }
.ag-card.est-calmo .big b { color: var(--muted) }
.ag-card .big span { color: var(--muted); font-size: 13.5px }
.ag-card .destaque { font: 700 15px/1.3 var(--body); color: var(--ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ag-card .destaque:hover { text-decoration: underline }
.bullet { position: relative; height: 10px; border-radius: 5px; background: var(--line-2) }
.bullet i { display: block; height: 100%; border-radius: 5px; background: var(--est) }
.bullet u { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--ink); border-radius: 1px; transform: translateX(-1px) }
.ag-card .frase { font-weight: 700; font-size: 14.5px }
.ag-card .sub { color: var(--muted); font-size: 13px; margin: 0 }
.ag-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px }
.ag-list li { font-size: 13px; display: grid; min-width: 0 }
.ag-list a { color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ag-list a:hover { text-decoration: underline }
.ag-list a.com-nome, .ag-card .destaque.com-nome { white-space: normal; overflow: visible }
.ag-list small { color: var(--muted); font-size: 12px }
/* Quem pediu a urgência, com link para o requerimento: fora do link da proposta */
.ag-list .quem-l a { color: var(--signal); font-weight: 400; white-space: normal; overflow: visible; text-decoration: underline; text-underline-offset: 2px }
a.quem-doc { text-decoration: underline; text-underline-offset: 2px }
/* Panorama (carga tardia): a divisória, e o esqueleto até o panorama.json chegar */
.pan-h { margin-top: 36px; padding-top: 22px; border-top: 8px solid var(--soft); display: grid; gap: 4px }
.pan-h .kick { font: 600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-text) }
.pan-h h2 { font: 800 clamp(22px, 3vw, 28px)/1.15 var(--display); font-stretch: 105% }
.pan-h .note { font-size: 15px; margin: 2px 0 0 }

/* KPIs */
.kpi { cursor: pointer; text-align: left; position: relative; overflow: hidden; color: inherit; font: inherit }
.kpi:hover { border-color: var(--muted) }
.kpi[aria-pressed="true"] { border-color: var(--signal); border-top-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal) }
.kpi .big span { font: 600 13px var(--mono) }
.kpi .delta { font-size: 12.5px }
.up, .down, .flat { color: var(--muted) }  /* tendência em cor neutra: mais ou menos não é bom nem ruim por si */
.kpi svg { width: 100%; height: 34px; display: block }
.spark-cap { display: flex; justify-content: space-between; font: 500 12.5px var(--mono); color: var(--dim); margin-top: -2px }

/* Fluxo */
.flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: stretch }
.stage { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 10px 10px 8px; cursor: pointer; text-align: left; display: grid; gap: 6px; align-content: space-between; position: relative }
.stage:hover { border-color: var(--line-2) }
.stage[aria-pressed="true"] { border-color: var(--signal) }
.stage .n { font: 800 30px/1 var(--display); font-stretch: 110%; font-variant-numeric: tabular-nums }
.stage .t { font-size: 12.5px; color: var(--muted); line-height: 1.25 }
.stage .bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden }
.stage .bar i { display: block; height: 100%; background: var(--amber) }
.flow-legend { display: flex; justify-content: space-between; margin-top: 8px; font: 500 12.5px var(--mono); color: var(--dim); letter-spacing: .02em }

/* Espectro do radar */
.spectrum-bar { display: flex; height: 26px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line) }
.spectrum-bar span { display: flex; align-items: center; justify-content: center; font: 600 12px var(--mono); border-right: 1px solid var(--bg); min-width: 0; overflow: hidden; white-space: nowrap }
.sb-esq { background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg) }
.sb-cen { background: color-mix(in srgb, var(--ink) 66%, transparent); color: var(--bg) }
.sb-dir { background: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink) }
.sb-ins { background: repeating-linear-gradient(135deg, var(--line-2) 0 4px, transparent 4px 8px); color: var(--muted) }
.sb-legend { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted) }
.sb-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }

/* Filtros e tabela */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.filters input, .filters select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; font-size: 13px; min-width: 0 }
.filters input { flex: 1 1 200px }
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 16px; margin-bottom: 10px; color: var(--ink) }
.chip-filter .ativo { background: var(--amber); color: var(--on-amber); border-radius: 999px; padding: 6px 12px; font-weight: 700 }  /* o filtro marcado, como o chip da Área */
.chip-filter .cnt { white-space: nowrap }
.chip-filter button { border: 1px solid var(--signal); color: var(--signal); background: transparent; border-radius: 6px; padding: 0 14px; min-height: 44px; cursor: pointer; font: 700 15px var(--body) }
.tbl-wrap { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse; min-width: 760px }
.tbl th { font: 600 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap }
.tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top }
.tbl tbody tr { cursor: pointer }
.tbl tbody tr:hover td { background: var(--panel-2) }
.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 5px; background: var(--dim) }
.led.e1 { background: var(--info) } .led.e2 { background: var(--amber); box-shadow: 0 0 0 1px var(--ink) } .led.e3, .led.e4 { background: var(--ok) }
.prop strong { font: 600 13.5px var(--mono) }
.prop .nm { max-width: 62ch }
/* Título da proposta: nome se existe, senão número. Com nome: nome em até 2 linhas e o número
   embaixo, em mono pequeno, num elemento que não encolhe (o número nunca é cortado) */
.pn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 15px/1.3 var(--body); color: var(--ink); white-space: normal }
.pnum { display: block; font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: normal; margin-top: 1px }
.pnum .n1 { white-space: nowrap }
.com-nome:hover .pn, .com-nome:focus-visible .pn { text-decoration: underline }
/* Título da proposta é link (teclado: Tab e Enter abrem a ficha); a linha inteira segue clicável */
.lk { color: inherit; text-decoration: none }
.lk:hover strong, .lk:focus-visible strong { text-decoration: underline }
.prop .em { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch }
.tag { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .02em; padding: 3px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; vertical-align: 1px; white-space: nowrap }
.tag.pauta { background: var(--amber); border-color: var(--amber); color: var(--on-amber) }
.tag.ia, .tag.acomp { border-color: var(--signal); color: var(--signal) }
.tag.gov { border-color: var(--info); color: var(--info) }

/* Alertas: tela de problemas no estilo Zabbix — severidade em bloco de cor, duração, status */
.al-sec { margin-top: 14px }
.areas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px }
.areas .lbl { margin-right: 4px }
.areas button { min-height: 44px; padding: 5px 14px; border-radius: 22px; border: 1px solid var(--ctl); background: var(--panel); color: var(--ink); cursor: pointer; font: 400 15px var(--body) }
.areas button:hover { border-color: var(--ink) }
.areas button:disabled { opacity: .4; cursor: default }
#origens { margin-top: 8px }
.areas .lbl { min-width: 54px; flex: none }
.areas button .num { color: var(--muted); font-size: 13.5px; margin-left: 2px }
.areas button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 700 }
.areas button[aria-pressed="true"] .num { color: var(--on-amber) }
.ia-txt { cursor: help }
.al-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px }
.al-sum button { border: 0; border-radius: 4px; padding: 10px 14px; min-height: 74px; text-align: left; cursor: pointer; color: var(--on-amber); display: grid; gap: 4px; align-content: start }
.al-sum button b { font: 600 28px/1 var(--mono); font-variant-numeric: tabular-nums }
.al-sum button span { font: 600 13px/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: normal }
/* nível sem alerta: fundo neutro com a cor do nível numa faixa à esquerda e o texto em cheio (opacity ou fundo esmaecido baixam o contraste do texto, sobretudo no tema escuro) */
.al-sum button.zero { background: var(--soft); color: var(--ink); box-shadow: inset 8px 0 0 var(--c); padding-left: 20px }
.al-sum button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px }
.al-sum button.g { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink) }
.al-sum .s5 { --c: var(--f5) } .al-sum .s4 { --c: var(--f4) } .al-sum .s3 { --c: var(--f3) } .al-sum .s2 { --c: var(--f2) } .al-sum .s1 { --c: var(--f1) }
.sev { display: inline-block; min-width: 128px; white-space: nowrap; padding: 6px 10px; border-radius: 2px; text-align: center; 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) }
.tbl.al td { vertical-align: middle }
.al .prob { font-size: 13px; max-width: 46ch }
.al .prob small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px }
.al .dur { font: 500 12px var(--mono); min-width: 10ch }
.al .prob { min-width: 16ch }
.tbl th.quebra { white-space: normal; line-height: 1.25; min-width: 10ch }
.al .st { font: 700 12px var(--mono); letter-spacing: .04em; display: inline-block; min-width: 8ch }
.st.p { color: var(--alert) } .st.r { color: var(--ok) }
/* Data marcada nos próximos 3 dias: selo fixo com a data e o nível pulsando sempre (só sombra, sem mexer no
   layout; para com prefers-reduced-motion e com "Animações: Desligadas") */
.al .niv { display: inline-grid; justify-items: center }  /* "vota em 2 dias" centralizado sob o nível */
.al .quando { display: block; margin-top: 5px; font: 600 12px var(--mono); color: var(--ink); white-space: nowrap }
@media (prefers-reduced-motion: no-preference) { .al tr.novo .sev { animation: pulso 2s ease-out infinite } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--f5) 70%, transparent) } 60%, 100% { box-shadow: 0 0 0 8px transparent } }

/* Dica ao passar o mouse (ou focar com o teclado) num card */
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; border: 1px solid currentColor; font: 700 12px/1 var(--mono); font-style: normal; vertical-align: 1px; text-transform: none }
/* A11Y-04: o "i" dos cards da Agora é botão (foco e Enter); a área de toque cresce sem mexer no layout. Opacidade
   cheia: como controle, precisa de 3:1 contra o card (com .6 dava ~2,7:1) */
button.info { position: relative; padding: 0; background: none; cursor: help; opacity: 1 }
button.info::after { content: ""; position: absolute; inset: -13px }  /* alvo de toque de 44 px com o ícone de 18 px */
.tip { position: fixed; z-index: 30; max-width: 300px; padding: 9px 11px; border-radius: 4px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 6px 24px rgb(0 0 0 / .35); font: 400 12.5px/1.45 var(--body); pointer-events: none; white-space: pre-line }

/* "Sobre esta página": no mesmo lugar nas duas abas (ajuda consistente) */
.sobre { margin-top: 36px; padding: 16px 18px; border-left: 4px solid var(--signal); background: var(--panel); border-radius: 0 6px 6px 0 }
.sobre h2 { font: 800 18px/1.2 var(--display); font-stretch: 110%; text-transform: uppercase; margin-bottom: 8px }
.sobre p { margin: 0; max-width: 90ch; font-size: 15px }
.sobre details { margin-top: 8px }
.sobre summary { display: flex; align-items: center; cursor: pointer; color: var(--signal); font-weight: 700; font-size: 15px; width: fit-content; min-height: 44px; text-decoration: underline; text-underline-offset: 3px }
.sobre ul { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 8px; max-width: 90ch; font-size: 15px; color: var(--muted) }
.sobre ul b { color: var(--ink) }

/* 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 */

/* Régua de origem (0 = esquerda, 10 = direita) */
.ruler { width: 108px }
.ruler .track { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--line-2) 0 40%, var(--line) 40% 70%, var(--line-2) 70% 100%) }
.ruler .track b { position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px; background: var(--ink); transform: translateX(-2px) }
.ruler .cap { display: flex; justify-content: space-between; font: 500 12.5px var(--mono); color: var(--muted); margin-top: 4px }
.ruler .cap b { color: var(--ink); font-weight: 600 }
.inst { font: 600 12px var(--mono); color: var(--info); letter-spacing: .04em }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 110px; margin-top: 5px }
.steps i { height: 6px; background: var(--line-2); border-radius: 1px }
.steps i.on { background: var(--muted) } .steps i.now { background: var(--amber); box-shadow: 0 0 0 1px var(--ink) }
.fase-t { font-size: 12px; white-space: nowrap }

/* Mini barras de voto por faixa */
.vmini { display: grid; grid-template-columns: 14px 1fr; gap: 3px 5px; align-items: center; width: 116px; font: 500 12px var(--mono); color: var(--muted) }
.vmini .b { height: 6px; display: flex; background: var(--line); border-radius: 1px; overflow: hidden }
.vmini .b i { display: block; height: 100% }
.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) }
.heat { width: 64px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px }
.heat i { display: block; height: 100%; background: var(--amber) }
.more { margin-top: 10px; min-height: 44px; border: 1px solid var(--ctl); background: var(--panel-2); border-radius: 6px; padding: 0 16px; cursor: pointer; font: 700 15px var(--body) }

/* Pauta · 7 dias: largura toda; no computador os itens de cada dia ficam em 2 colunas (o dia ocupa a linha inteira) */
.log { display: grid; gap: 0 32px }
.ver-todos[hidden] { display: none }
@media (min-width: 900px) { .log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .log > .ag-day, .log > .note { grid-column: 1 / -1 } }
.log.recolhido .extra { display: none }
.ag-day { font: 600 13px var(--mono); color: var(--amber-text); letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 2px }
.ag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; text-decoration: none; color: inherit; align-content: start }
.ag .c { font: 600 13px/1.5 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ag strong { font: 600 14px var(--mono) }
.ag:hover strong { text-decoration: underline }
.ag span { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* Mapa de calor */
.hm { display: grid; gap: 2px; font-size: 12px; overflow-x: auto }
.hm .r { display: grid; grid-template-columns: 200px repeat(12, minmax(22px, 1fr)) 40px; gap: 2px; align-items: center; min-width: 560px }
.hm .tn { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px }
.hm .c { height: 22px; border-radius: 2px; background: var(--amber) }
.hm .tot { font: 500 12px var(--mono); color: var(--muted); text-align: right }
.hm .wk { font: 500 12px var(--mono); color: var(--dim); text-align: center }

svg text { font-family: var(--mono) }
.note { font-size: 12px; color: var(--muted); margin: 10px 0 0 }

.close { border: 1px solid var(--line-2); background: var(--panel); border-radius: 4px; padding: 6px 12px; cursor: pointer; flex: none; font: 500 12px var(--mono) }
.links { display: flex; flex-wrap: wrap; gap: 8px }
.links a { border: 1px solid var(--line-2); background: var(--panel); padding: 6px 12px; border-radius: 4px; text-decoration: none; font: 500 12.5px var(--mono) }
/* UI-01: texto pequeno que vinha em estilo inline no app.js (10 a 11,5 px), no piso de 12 px */
.mini { font-size: 12px }
/* Partidos: o SVG escala com a largura; --k (viewBox ÷ largura real, posto pelo app.js) mantém o texto em 12 px na tela */
#scatter svg text { font-size: calc(12px * var(--k, 1)) }

/* Rodapé preto (faixa .foot, mais acima): fontes, "Como funciona", licença e privacidade, em claro sobre o preto */
.foot-grid { display: grid; gap: 4px; padding-block: 22px 28px }
.foot p { margin: 0 0 8px; max-width: 64ch; font-size: 15px }
.foot .fim { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--band-line); text-align: center }
.foot .fim p { margin: 0 auto 2px; max-width: none }

@media (max-width: 1100px) {
  .r-main, .r-flow, .r-ctx { grid-template-columns: minmax(0, 1fr) }
  .r-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .r-agora { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .r-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .al-sum { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .r-agora { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .r-kpi > :last-child { grid-column: 1 / -1 }
  /* Alertas viram cartões no celular: nível, data e duração em cima; proposta e sinal inteiros */
  .tbl.al { min-width: 0 }
  .tbl.al thead { display: none }
  .tbl.al, .tbl.al tbody { display: block }
  .tbl.al tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sev data data" "sev dur dur" "prop prop prop" "sinal sinal sinal" "quem quem st"; gap: 8px 10px; padding: 14px 0; border-bottom: 1px solid var(--line) }
  .tbl.al td { display: block; padding: 0; border: 0; background: none !important }
  .tbl.al td:nth-child(1) { grid-area: sev } .tbl.al td:nth-child(2) { grid-area: data; align-self: center }
  .tbl.al td:nth-child(3) { grid-area: prop } .tbl.al td:nth-child(4) { grid-area: sinal; max-width: none }
  .tbl.al td:nth-child(5) { grid-area: quem } .tbl.al td:nth-child(6) { display: none }
  .tbl.al td:nth-child(7) { grid-area: dur; align-self: start; min-width: 0 }
  .tbl.al td:nth-child(7)::before { content: "há " }  /* data e duração em linhas próprias: por extenso não cabem lado a lado */
  .tbl.al td.sem-dur { display: none }  /* sem_duracao: a data já diz "na pauta de 13/10" */
  .tbl.al td:nth-child(2) { align-self: end }
  .ag-card .destaque:not(.com-nome) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .tbl.al td:nth-child(8) { grid-area: st; align-self: end; text-align: right }
  .tbl.al td[colspan] { grid-column: 1 / -1 }
  .sev { min-width: 0 }  /* no celular o nível é um selo solto; no desktop a largura fixa deixa a coluna Nível estável */
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kpi b { font-size: 28px }
}
/* UI-08: cards da aba Agora em grade 2x2 no celular (proposta do designer). A frase de apoio e as listas somem: a
   informação continua nos alertas logo abaixo e na dica do "i" */
@media (max-width: 640px) {
  .ag-card { padding: 10px 10px 12px; gap: 6px }
  .ag-top { flex-direction: column-reverse; align-items: flex-start; gap: 6px }  /* palavra de estado em cima, rótulo embaixo */
  .ag-card .est { white-space: normal; padding: 4px 6px; line-height: 1.15 }
  /* rótulo do card em letra normal: caixa alta em fonte mono quebrava em 3 linhas */
  .ag-card .lbl { font: 700 14px/1.25 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); display: flex; align-items: flex-start; gap: 4px }
  .ag-card .info { margin: -2px 0 0; flex: none }
  .ag-card .big { gap: 2px 6px }
  .ag-card .big b { font-size: 32px }
  .ag-card .big span { font-size: 13px; line-height: 1.25 }
  .ag-card .destaque.com-nome .pn { font-size: 14px; line-height: 1.25 }
  .ag-card .destaque:not(.com-nome) { font-size: 14px }
  .ag-card .destaque .pnum { font-size: 12px }
  .ag-card .sub, .ag-card .ag-list { display: none }
  .ag-card .bullet { margin: 2px 0 }
}
/* telas muito estreitas (320 px): volta para 1 coluna para o número não quebrar */
@media (max-width: 340px) { .r-agora { grid-template-columns: minmax(0, 1fr) } }
/* Enquanto o agora.json não chega: espaço reservado (alturas medidas na página pronta), para nada ser pintado no topo e
   depois empurrado (PERF-01). Medido em 12/10/2026 com as fontes próprias: 1280 px (padrão), 1024 px (≤ 1100) e 412 px (≤ 640). */
.carregando #agora-cards { min-height: 263px }
.carregando #areas { min-height: 94px }
.carregando #origens { min-height: 44px }
.carregando .al-sec { min-height: 1228px }
.carregando .tbl-wrap { visibility: hidden }
.carregando .live { min-width: 44ch }  /* o texto final é mais longo que "carregando…": sem isso a linha quebra depois */
/* Panorama antes do panorama.json (carga tardia): esqueleto parado (sem brilho que corre) no lugar de cada bloco, com a
   altura medida da página pronta, para não pular o layout quando o dado chegar */
.pano-carregando .pano-esq { background: var(--panel-2); border-radius: 6px }
.pano-carregando #kpis { min-height: 247px }
.pano-carregando #flow { min-height: 98px }
.pano-carregando #specbar { min-height: 26px }
.pano-carregando #list-wrap { min-height: 4700px }
.pano-carregando #heat { min-height: 270px }
.pano-carregando #scatter { min-height: 311px }
@media (max-width: 1100px) {
  .carregando #agora-cards { min-height: 390px } .carregando .al-sec { min-height: 1294px }
  .pano-carregando #kpis { min-height: 436px } .pano-carregando #flow { min-height: 171px } .pano-carregando #list-wrap { min-height: 4756px }
  .pano-carregando #heat { min-height: 255px } .pano-carregando #scatter { min-height: 619px } }
@media (max-width: 640px) {
  .carregando #agora-cards { min-height: 417px } .carregando #areas { min-height: 294px } .carregando #origens { min-height: 94px } .carregando .al-sec { min-height: 2280px }
  .pano-carregando #kpis { min-height: 648px } .pano-carregando #flow { min-height: 349px } .pano-carregando #list-wrap { min-height: 5438px }
  .pano-carregando #heat { min-height: 270px } .pano-carregando #scatter { min-height: 261px } }
.erro-carga { padding: 14px; display: grid; gap: 10px; justify-items: start }
.erro-carga p { margin: 0 }