*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--text-body); background: #dfe5f1; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-regulatorio); }
a:hover { color: var(--accent-regulatorio-strong); }

/* Cadeado sobre a ilustração do cabeçalho, no canto superior direito, como
   o cliente pediu. Fundo translúcido claro porque a arte por baixo varia —
   céu claro num ponto, poste escuro noutro — e um ícone sem fundo próprio
   ficaria legível num lugar e sumiria noutro. */
.panel__art { position: relative; }
.acesso-admin__link { position: absolute; top: var(--space-5); right: var(--space-5); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent-regulatorio); background: rgba(255,255,255,.82); color: var(--accent-regulatorio); text-decoration: none; }
.acesso-admin__link svg { width: 20px; height: 20px; }
.acesso-admin__link:hover { background: var(--surface-card); box-shadow: var(--shadow-card); }
.acesso-admin__link:focus-visible { outline: 2px solid var(--accent-regulatorio); outline-offset: 2px; background: var(--surface-card); }

.viewport { min-height: 100vh; padding: 0; overflow: hidden; }
/* O desenho tem largura fixa de 1520px e e reduzido proporcionalmente pelo
   wrapper .scaler (ver <script> no fim do arquivo). Nao redesenhar por breakpoint. */
.scaler { width: var(--public-canvas-width); transform-origin: top left; margin: 0 auto; }
/* Sem moldura, ocupando a tela toda (pedido do cliente ao comparar com
   INDICADORES FINAL.png, que é um pôster de ponta a ponta). A borda navy de
   5px, o raio grande e a sombra vinham do handoff do Claude Design; a arte
   que o cliente aprovou não tem nada disso. overflow:hidden fica: é o que
   recorta a ilustração do cabeçalho, que agora sangra até o canto. */
.panel { width: var(--public-canvas-width); background: var(--surface-card); overflow: hidden; }

/* padding-top/right zerados: a ilustração precisa encostar no canto
   superior direito, como na arte. O respiro do logo e do título vem do
   próprio .panel__logo/.panel__titles, não daqui. */
.panel__head { display: grid; grid-template-columns: 270px 1fr 700px; align-items: center; padding: 0 0 var(--space-4); }
.panel__logo { height: 140px; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: center; }
/* Ativo real (275x200) no lugar do SVG generico do handoff — questao 26 da
   SPEC. width fixo + height:auto preserva a proporcao real do arquivo sem
   distorcer; 200px de exibicao e menor que os 275px nativos, entao nunca
   amplia o PNG. */
.panel__logo img { width: 172px; height: auto; display: block; }
.panel__titles { border-left: 3px solid var(--accent-regulatorio); padding: var(--space-2) 0 var(--space-2) var(--space-11); }
.panel__titles h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: var(--ls-tight); line-height: 1; }
.panel__titles h1 span { display: block; font-size: var(--fs-7xl); color: var(--accent-sem-expurgo); }
.panel__titles p { margin: var(--space-3) 0 0; font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--accent-regulatorio); max-width: 520px; text-wrap: pretty; }
/* Altura ajustada de 200 para 212px: a ilustracao real e exibida 1:1 com o
   tamanho nativo do arquivo (645x212), sem esticar nem reduzir — ver nota em
   assets/img/ e no relatorio da Task 14. */
/* A ilustração sangra: sem raio, alinhada ao topo e à direita, ocupando a
   coluna inteira. Deixa de ser um cartão flutuante e vira parte da faixa. */
.panel__art { display: flex; align-items: flex-start; justify-content: flex-end; }
/* height fixo em vez de auto: com width:100% a ilustração esticava para
   230px e era ela que definia a altura do cabeçalho inteiro. A arte reserva
   ~200px para essa faixa. object-fit:cover recorta pelas bordas, não
   distorce. */
/* A ilustracao (645x212 nativos) e esticada para os 700px da coluna e
   recortada a 195px de altura: sobram uma borda ESQUERDA reta, onde a arte
   simplesmente comeca ao lado do titulo, e uma borda INFERIOR reta, onde os
   35px de mata que nao couberam foram cortados. As duas liam como "imagem
   cortada" em vez de "faixa ilustrada" (achado do cliente).
   A mascara dissolve as duas no branco do painel — nao muda o recorte nem a
   altura ja aprovada do cabecalho, so tira as linhas de corte. O topo NAO e
   recortado de proposito: e onde estao os postes, e decapita-los seria pior
   do que aparar a mata de baixo.
   mask-composite: intersect combina as duas faixas de fade; num navegador
   sem suporte vale o padrao "add" (a uniao), que apenas suaviza menos —
   nunca fica pior do que o corte reto de antes. */
.panel__art img { width: 100%; height: 195px; object-fit: cover; object-position: right top; display: block; border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%), linear-gradient(to bottom, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 15%), linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-composite: intersect; }

.row { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-4); }
/* Ajuste visual pedido pelo cliente (comparação com INDICADORES FINAL.png):
   os dois blocos de média ficam quase do mesmo tamanho (o azul precisa de
   largura extra para o título caber numa linha só, como na arte — ver
   .block__title abaixo) e a nota estreita, igual à arte. */
/* A terceira coluna passa a ter os mesmos 340px da coluna do card de
   compromisso (.row--graficos abaixo), entao as duas colunas ficam alinhadas
   verticalmente entre as linhas — e o que ela devolve de largura vai para os
   dois blocos de media, onde os rotulos deixam de quebrar em duas linhas. */
.row--medias { grid-template-columns: 1fr 1fr 340px; }
.row--graficos { grid-template-columns: 1fr 340px; }
.row--tabela { grid-template-columns: 1fr 340px; }

/* Blocos de média anual "far too tall" (pedido do cliente): padding e
   respiro internos reduzidos para bater com a proporção baixa da arte —
   ver .kpis/.kpi abaixo para o mesmo ajuste nos cartões de valor. */
/* Segunda rodada de compactação (o cliente ainda achou alto): 12px de
   padding vertical caem para 8, e o bloco passa a alinhar o conteúdo ao
   topo em vez de esticar — era o "stretch" implícito do grid que criava a
   faixa vazia no rodapé do bloco mais curto. */
.block { border-radius: var(--radius-2xl); padding: var(--space-3) var(--space-6); }
/* align-self:start SÓ na linha das médias. No .block--quote ele encolhia o
   card à altura do texto, e a ilustração de fundo (que ocupa o card inteiro)
   subia junto até atrás da frase — o mesmo problema de legibilidade que o
   véu resolve. Ali o card precisa continuar esticando com a linha dos
   gráficos, como na arte. */
/* Os tres blocos esticam juntos: na arte eles tem a mesma altura, e foi
   isso que o cliente chamou de "uniforme". O que controla a altura da linha
   e' o conteudo do mais alto (o verde, cujo titulo e um dos rotulos ocupam
   duas linhas) — por isso as fontes abaixo foram reduzidas em vez de se
   deixar cada bloco encolher sozinho. */
/* Cabecalho (icone + titulo) centralizado numa faixa propria, cartoes
   abaixo — pedido do cliente. Substitui o grid de duas colunas com o icone
   atravessando: aquele arranjo alinhava tudo a esquerda. */
.row--medias > .block:not(.nota) { display: flex; flex-direction: column; justify-content: center; }
/* Alinhado a esquerda (pedido do cliente) e colado nos cartoes: o respiro
   caiu de 10 para 4px, que e o que sobe os valores. */
.row--medias > .block:not(.nota) .block__head { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-4); margin-bottom: 4px; }
.row--medias > .block.nota { flex-direction: row; align-items: center; }
.block--azul { background: var(--surface-accent-soft); }
.block--verde { background: var(--surface-clean-soft); }
/* .block--quote (card "Nosso compromisso"): vira container posicional para
   a ilustração de fundo (ver .block--quote__art) — position:relative +
   overflow:hidden recorta a imagem no border-radius do card, igual à
   arte. flex-direction:row (ícone ao lado do texto, não empilhado) também
   é o que a arte mostra e ajuda a baixar a altura do card. */
.block--quote { background: var(--surface-quote); display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-7); position: relative; overflow: hidden; }
.block__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 4px; }
/* Ícones "too small" (pedido do cliente, em todos os cards): 44→52px. */
.block__icon { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex: none; }
.block__icon svg { width: 24px; height: 24px; }
.block__title { font-family: var(--font-display); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); line-height: 1.15; white-space: nowrap; }
.block--azul .block__icon, .block--azul .block__title { color: var(--accent-regulatorio); }
.block--verde .block__icon, .block--verde .block__title { color: var(--accent-sem-expurgo); }
/* Sem quebra tambem no verde (pedido do cliente). O titulo cabe numa linha
   agora que a terceira coluna encolheu para 340px e devolveu largura. */
.block--verde .block__title { white-space: nowrap; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* Os rotulos tem comprimentos diferentes — um cabe em uma linha, o mais
   longo ainda precisa de duas — e os numeros ficavam em alturas diferentes
   lado a lado. justify-content:flex-end ancora o valor na BASE do cartao;
   como a grid estica os dois cartoes a mesma altura, os valores alinham
   qualquer que seja o numero de linhas do rotulo. Nao depende do texto
   atual, que e' editavel no admin. */
/* margin:0 e' obrigatorio, nao cosmetico: .kpi e' um <p> (ver
   templates/publico/kpis.php) e carregava a margem 1em 0 do navegador —
   32px de altura morta por bloco, invisiveis porque o fundo branco do
   cartao so pinta a caixa de conteudo. Era isso, e nao os cartoes, que
   mantinha os blocos em 156px. */
.kpi { margin: 0; background: var(--surface-card); border-radius: var(--radius-lg); padding: 5px var(--space-3) 6px; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.kpi__label { display: block; font-family: var(--font-display); font-size: 14px; line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: .02em; margin: 0 0 1px; }
.kpi__value { display: block; font-family: var(--font-display); font-size: 27px; line-height: 1.1; font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); margin: 0; }
.block--azul .kpi__label { color: var(--accent-regulatorio); }
.block--azul .kpi__value { color: var(--text-primary); }
.block--verde .kpi__label, .block--verde .kpi__value { color: var(--accent-sem-expurgo); }
.kpi__value[data-vazio="1"] { color: var(--text-muted); }
.nota { display: flex; align-items: center; gap: var(--space-5); }
.nota__icon { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--accent-sem-expurgo); color: var(--accent-sem-expurgo); display: flex; align-items: center; justify-content: center; flex: none; }
.nota__icon svg { width: 24px; height: 24px; }
.nota p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.shield { width: 50px; height: 54px; color: var(--accent-sem-expurgo-dark); flex: none; position: relative; z-index: 2; }
.block--quote p { margin: 0; font-size: 17.5px; line-height: var(--lh-base); color: var(--text-primary); font-weight: var(--fw-medium); position: relative; z-index: 2; }
/* Ilustração extraída de INDICADORES FINAL.png (só a paisagem — sem o
   parágrafo, que é editável pelo admin via texto_compromisso; ver o
   relatório em .superpowers/sdd/ajuste-visual-publico-report.md sobre por
   que a extração anterior, bloco-compromisso.png, foi rejeitada). <img>,
   não SVG inline: é uma ilustração fotográfica/complexa, não um ícone de
   traço que precise herdar currentColor (ver CLAUDE.md do projeto).
   position:absolute + inset lateral/inferior a 0 ignora o padding do card
   (o containing block de um absoluto é a padding-box do ancestral
   posicionado) — sangra até a borda igual à arte. Sem z-index: é o
   primeiro filho no HTML, então ícone e texto (depois, no fluxo normal)
   já pintam por cima sem precisar disso; z-index:1 nos dois é só reforço
   caso a ordem do DOM mude no futuro. */
/* Ocupa o card INTEIRO, com o texto por cima no topo (pedido do cliente).
   object-fit:cover preenche sem distorcer; o recorte acontece nas bordas da
   imagem, não no meio da casa. */
.block--quote__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block; pointer-events: none; z-index: 0; }
/* Véu branco degradê sobre o topo da ilustração. Sem ele o texto navy cai
   em cima do poste e do casario e some — o problema clássico de texto sobre
   imagem. O degradê termina transparente na metade de baixo, então a
   paisagem continua visível como na arte, e só a faixa que carrega texto
   ganha fundo. Cor do próprio card, não uma cor nova. */
.block--quote::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--surface-quote) 0%, var(--surface-quote) 42%, rgba(233,238,248,0) 72%); pointer-events: none; z-index: 1; }

/* Card compacto de acesso ao histórico: ocupa a coluna de apoio sem tentar
   espremir cinco anos de números nela. O detalhe abre em diálogo; sem JS, o
   mesmo link leva à tabela de fallback mais abaixo. */
.historico-resumo { align-self: stretch; padding: var(--space-9) var(--space-8); border-radius: var(--radius-2xl); background: linear-gradient(155deg, var(--surface-sidebar) 0%, #1d3fa8 100%); color: var(--text-on-dark); display: flex; flex-direction: column; align-items: flex-start; }
.historico-resumo__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-6); border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius-md); color: var(--accent-mint); }
.historico-resumo__icon svg { width: 25px; height: 25px; }
.historico-resumo__eyebrow, .historico-publico__eyebrow { margin: 0 0 var(--space-2); color: var(--accent-mint); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-widest); text-transform: uppercase; }
.historico-resumo h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); line-height: var(--lh-snug); }
.historico-resumo p:not(.historico-resumo__eyebrow) { margin: var(--space-4) 0 0; color: #d9e2ff; font-size: var(--fs-md); line-height: var(--lh-loose); }
.historico-resumo__action { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-9); color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-decoration: none; }
.historico-resumo__action span { color: var(--accent-mint); transition: transform .16s ease; }
.historico-resumo__action:hover { color: var(--accent-mint); }
.historico-resumo__action:hover span { transform: translateX(4px); }
.historico-resumo__action:focus-visible { outline: 2px solid var(--accent-mint); outline-offset: 4px; border-radius: var(--radius-xs); }

.historico-publico__fallback { display: none; margin: 0 var(--space-5) var(--space-4); padding: var(--space-9); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); }
.historico-publico__fallback:target { display: block; }
.historico-publico__fallback-head, .historico-publico__dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-7); }
.historico-publico__fallback h2, .historico-publico__dialog h2 { margin: 0; color: var(--text-primary); font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: var(--ls-wide); }
.historico-publico__fallback a { color: var(--accent-regulatorio); font-weight: var(--fw-semibold); white-space: nowrap; }
/* padding zero no proprio <dialog> (era --space-11) para a faixa ilustrada
   sangrar ate as bordas arredondadas; o respiro passa a ser do corpo, logo
   abaixo. overflow:hidden e o que recorta a faixa no raio do modal — e por
   isso a rolagem da tabela precisa morar no corpo, nunca aqui. */
.historico-publico__dialog { width: min(940px, calc(100vw - 64px)); max-height: min(700px, calc(100vh - 64px)); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-2xl); box-shadow: var(--shadow-panel); color: var(--text-body); }
/* display SOMENTE em [open]. Declarar "display: flex" na regra base acima
   sobrescreve o "dialog:not([open]) { display: none }" da folha do
   navegador — regra de autor vence regra de user-agent, por origem, sem
   olhar especificidade —, e o dialogo fechado passa a ser desenhado no
   fluxo da pagina, por cima do painel: fechar o modal parecia nao fechar
   nada. A coluna flex existe para a faixa ilustrada nao encolher e a
   rolagem ficar no corpo; nada disso precisa valer com o modal fechado. */
.historico-publico__dialog[open] { display: flex; flex-direction: column; }
/* Mesma ilustracao do cabecalho da pagina, na janela horizontal onde estao
   as colinas, a casa e a silhueta da cidade — a parte reconhecivel da arte.
   A borda de baixo dissolve no branco do corpo, pelo mesmo motivo (e com o
   mesmo gradiente) de .panel__art img acima. */
.historico-publico__arte { flex: none; width: 100%; height: 140px; object-fit: cover; object-position: center 88%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.historico-publico__dialog-corpo { padding: var(--space-8) var(--space-11) var(--space-11); overflow-y: auto; }
.historico-publico__dialog::backdrop { background: rgba(16,27,87,.62); backdrop-filter: blur(2px); }
.historico-publico__dialog-head p:not(.historico-publico__eyebrow) { max-width: 580px; margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--fs-base); }
.historico-publico__close { width: 42px; height: 42px; padding: 0; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-card); color: var(--text-primary); font-size: 29px; line-height: 1; cursor: pointer; }
.historico-publico__close:hover { background: var(--surface-accent-soft); color: var(--accent-regulatorio); }
.historico-publico__close:focus-visible { outline: 2px solid var(--accent-regulatorio); outline-offset: 2px; }
.historico-publico__table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; font-size: var(--fs-base); }
.historico-publico__table th, .historico-publico__table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); text-align: center; }
.historico-publico__table thead tr:first-child th { background: var(--surface-sidebar); color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.historico-publico__table thead tr:nth-child(2) th { padding-top: var(--space-3); padding-bottom: var(--space-3); background: #22306e; color: #d9e2ff; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); }
.historico-publico__table tbody tr:nth-child(even) { background: var(--surface-zebra); }
.historico-publico__table tbody tr:last-child > * { border-bottom: 0; }
.historico-publico__table tbody th { color: var(--accent-regulatorio); font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--ls-wide); }
.historico-publico__clean { color: var(--accent-sem-expurgo); font-weight: var(--fw-semibold); }
.block__title small, .graficos__titulo small { display: block; margin-top: var(--space-1); color: currentColor; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); opacity: .78; text-transform: none; }

.graficos__titulo { text-align: center; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: var(--ls-wide); margin: 0 0 var(--space-5); }
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grafico h3 { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--accent-regulatorio); letter-spacing: var(--ls-tight); }
.grafico h3 span { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex: none; }
.grafico h3 svg { width: 14px; height: 14px; }
/* O SVG e' 430x190; com width:100% numa coluna de ~500px ele esticava
   para ~221px de altura e era o que mais inflava a pagina. Travar a altura
   e deixar o preserveAspectRatio do proprio SVG ajustar mantem o desenho
   sem estourar a faixa que a arte reserva. */
/* height:auto de novo. Travar a altura com viewBox fazia o SVG inteiro
   encolher para caber — inclusive os textos dos meses e do eixo, que
   ficaram ilegiveis. A altura agora vem da propria proporcao do desenho,
   que passou a ser 520x158 (largo e baixo, como na arte) em index.php. */
.grafico svg.plot { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: var(--space-8); flex-wrap: wrap; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-regulatorio); margin: 0 0 var(--space-3); padding-left: var(--space-1); }
.legend span { display: flex; align-items: center; gap: var(--space-2); }
.legend i { width: 11px; height: 11px; display: block; }
.legend i.com { background: var(--accent-regulatorio-strong); }
.legend i.sem { background: var(--accent-sem-expurgo); }
.legend i.lim { height: 0; border-top: 2px dashed var(--text-body); width: 16px; }
.legend .sem-txt { color: var(--accent-sem-expurgo); }
.legend .lim-txt { color: var(--text-body); }
.graficos__nota { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; font-size: var(--fs-sm); color: var(--accent-regulatorio); }
.graficos__nota span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); }

table.conjuntos { width: 100%; border-collapse: collapse; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-default); }
table.conjuntos thead th { background: var(--surface-sidebar); color: var(--text-on-dark); font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-align: center; padding: var(--space-2) var(--space-2); font-size: var(--fs-sm); line-height: 1.15; }
table.conjuntos thead th.grupo { border-bottom: 1px solid #2b3a86; }
table.conjuntos thead th.grupo--limpo { background: var(--accent-sem-expurgo-dark); border-bottom-color: #2f7a52; }
table.conjuntos thead th.sub { font-family: var(--font-sans); font-size: 12px; padding: 3px var(--space-1); line-height: 1.15; }
table.conjuntos thead th.sub--limpo { background: var(--accent-sem-expurgo-dark); }
table.conjuntos thead th.sub small { display: block; font-weight: var(--fw-regular); color: #b9c2e6; }
table.conjuntos thead th.sub--limpo small { color: #bfe3cd; }
table.conjuntos tbody tr:nth-child(even) { background: var(--surface-muted); }
table.conjuntos tbody td { border-top: 1px solid var(--border-subtle); padding: 7px var(--space-1); text-align: center; font-size: var(--fs-sm); color: var(--text-primary); }
table.conjuntos tbody td.nome { text-align: left; padding-left: var(--space-5); }
table.conjuntos tbody td.nome span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--accent-regulatorio); }
table.conjuntos tbody td.nome svg { width: 20px; height: 20px; flex: none; }
table.conjuntos tbody td.mes { color: var(--accent-regulatorio); font-weight: var(--fw-semibold); }
table.conjuntos tbody td.limpo { color: var(--accent-sem-expurgo); font-weight: var(--fw-semibold); }
table.conjuntos tbody td.marca { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
table.conjuntos tbody td.marca svg { width: 18px; height: 18px; }
/* dec_atende/fec_atende: "sim"/"nao" vem da marcacao manual do admin,
   desenhados como <svg stroke="..."> com a cor no proprio atributo (fiel ao
   design — ver tabela.php); so o estado ausente (NULL, "atende?" sem
   resposta) continua um <span> de texto, sem equivalente no design. */
.marca--neutra { color: var(--state-neutral-mark); }
/* position:relative ancora o link esticado (ver a.cta::after abaixo) e o
   padding cai de --space-9 para --space-7: o card ficava alto demais na
   comparação com a arte. */
.transparencia { background: var(--surface-accent-soft); border-radius: var(--radius-2xl); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; position: relative; }
/* Mãozinha acima do "Clique aqui!", centralizada como na arte. */
.transparencia__mao { width: 54px; height: 54px; align-self: center; color: var(--accent-regulatorio); }
/* O card inteiro vira alvo. O foco tem que aparecer no CARD, não no rótulo:
   quem tabula precisa ver o que vai ativar, e o que ativa é a área toda. */
.transparencia:focus-within { outline: 3px solid var(--accent-regulatorio); outline-offset: 3px; }
.transparencia a.cta:focus-visible { outline: none; }
.transparencia__head { display: flex; align-items: center; gap: var(--space-4); color: var(--accent-regulatorio); }
.transparencia__head svg { width: 22px; height: 22px; flex: none; }
.transparencia__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); }
.transparencia p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--accent-regulatorio); }
/* Selo institucional abaixo do CTA. margin-top:auto o empurra para a base do
   card, que estica com a linha da tabela — assim ele encosta embaixo em vez
   de flutuar logo abaixo do texto. */
/* O selo ganha um cartao proprio, claro, centralizado dentro do card
   (pedido do cliente: "como se fosse outro card... so para nao ficar
   poluido"). Separa o selo institucional do conteudo do painel, que e' de
   outra natureza, sem precisar de linha divisoria. */
/* Faixa encostada nas tres bordas do card (pedido do cliente): as margens
   negativas laterais e inferior anulam o padding do .transparencia, entao a
   caixa sangra ate a borda em vez de flutuar dentro dela. O raio so nos
   cantos de baixo acompanha o do proprio card — sem isso apareceria um canto
   reto por cima do canto arredondado do card. */
.transparencia__selo-caixa { align-self: stretch; margin: auto calc(var(--space-7) * -1) calc(var(--space-7) * -1); background: var(--surface-page); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); padding: var(--space-5) var(--space-6); display: flex; justify-content: center; }
.transparencia__selo { width: 118px; height: auto; display: block; }
.transparencia a.cta, .transparencia span.cta { align-self: center; margin-top: var(--space-2); font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-bold); color: var(--accent-regulatorio); letter-spacing: var(--ls-tight); text-decoration: none; }
/* Sem sublinhado no hover (pedido do cliente). A mudanca de cor continua
   sinalizando o estado, e o card inteiro ja e' o alvo — o sublinhado num
   texto de 28px so engrossava o bloco. */
.transparencia a.cta:hover { color: var(--text-primary); }
/* Link esticado: o alvo clicável passa a ser o card inteiro sem que o <a>
   engula o texto, então o nome acessível continua sendo só "Clique aqui!".
   Fica ANTES do <img> de fundo do compromisso na ordem de empilhamento
   porque aqui não há imagem — só o fundo sólido do card. */
.transparencia a.cta::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-2xl); }
.transparencia a.cta:hover::after { cursor: pointer; }
/* cta_url pode ser recusado na borda de saida (ver painel/index.php,
   ctaUrlSegura()) quando traz userinfo embutido — o rotulo continua visivel,
   so deixa de ser um link clicavel. */
.transparencia span.cta { display: inline-block; cursor: default; opacity: .85; }
/* Rodapé "diminuir a altura para ficar compacto" (pedido do cliente):
   padding vertical de --space-7 para --space-4, e o gap horizontal reduzido
   para as quatro colunas caberem numa linha só sem envolver. */
.rodape { background: var(--surface-sidebar); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; gap: var(--space-14); padding: var(--space-4) var(--space-9); flex-wrap: wrap; }
/* Marca real "somos COOP" (172x58, ja recortada da faixa branca de topo que
   veio no crop original) no lugar do texto "somos COOP ▸" do handoff. */
/* height:100% com width:auto: a altura passa a ser a da barra e a largura
   acompanha a proporcao real do arquivo (107x55), sem distorcer. O PNG foi
   reextraido da arte com o fundo exatamente em --surface-sidebar, entao nao
   aparece mais a caixa mais clara que o recorte anterior trazia. */
/* Sem o selo, os quatro contatos passam a ser todo o conteudo do rodape:
   agrupados e centralizados (justify-content:center acima) em vez de
   espalhados de ponta a ponta, e um pouco maiores agora que sobra espaco. */
.rodape__item { display: flex; align-items: center; gap: var(--space-4); font-size: 16px; margin: 0; }
.rodape__item svg { width: 23px; height: 23px; flex: none; }
.rodape__item a { color: var(--text-on-dark); text-decoration: underline; }
.vazio-msg { text-align: center; color: var(--text-muted); font-size: var(--fs-md); padding: var(--space-12) var(--space-9); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--surface-muted); }

/* Utilitário de acessibilidade (auditoria 2026-08-24, itens a16/a18):
   conteúdo presente na árvore de acessibilidade mas removido do desenho
   visual — o caption da tabela de conjuntos e a tabela de dados de cada
   gráfico. Não altera nada visível; nenhuma regra de layout do painel
   público é tocada. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Ícones do cabeçalho da tabela (pedido do cliente, arte INDICADORES FINAL)
   O calendário do "mês de referência" fica num chip claro, como na arte; os
   dois escudos de conformidade ficam vazados sobre o navy. Ambos são
   aria-hidden no HTML — o texto ao lado já nomeia a coluna. */
.th-icone { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 auto 3px; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--accent-regulatorio); }
.th-icone svg { width: 18px; height: 18px; }
.th-icone--vazado { background: transparent; color: currentColor; border: 2px solid currentColor; border-radius: 50%; width: 28px; height: 28px; }
.th-icone--vazado svg { width: 15px; height: 15px; }

/* Rodapé compacto: os ícones acompanham a redução de altura. */