/* ============================================================
   abertura.css: a abertura pública de uma rede, em /{rede}.

   Companheiro de /redes/abertura.js. A marcação do mapa e da caixa do PPG
   já tem regra em capes-global.css (cg-notas-mini, map-label-name,
   cg-mapa-legenda, .ppg-popup…), que veio junto com o sistema e estilizava
   a página de divulgação de onde esta abertura saiu. Aqui fica o que
   faltava: a cor da rede, um contêiner sem regra, a transição entre o hero
   azul-noite e as seções em papel claro, o estilo do mapa e os painéis da
   Rede em números. A seção do orçamento tem folha própria,
   abertura-orcamento.css.
   ============================================================ */

/* A cor da rede. É o que a página de divulgação chamava de `--uc-primary`,
   lida de `html[data-rede]`; aqui vem de `publico/resumo.cor_primaria`, posta
   em linha pelo abertura.js. O valor abaixo é o padrão para rede que não
   declarou nenhuma. */
#abertura {
    --uc-primary: #2E7D32;
    --uc-primary-light: rgba(46, 125, 50, 0.07);
    background: var(--color-bg);
    color: var(--color-text);
}

/* O contêiner que a marcação usa e o CSS herdado não nomeia. */
#abertura .cg-notas-mini-bars { display: flex; flex-direction: column; gap: 4px; }

/* O mapa, nas medidas da página de divulgação: no máximo 900px, centrado. */
#abertura .cg-mapa-container svg { display: block; }

/* Entre o hero azul-noite e o mapa, uma faixa curta de papel: o mapa não
   nasce colado ao globo (pedido de 03/10/2026; a página de divulgação o
   colava). A regra vale também abaixo de 768px, onde capes-global.css põe
   --space-lg no topo do .cg-hero. */
#abertura .cg-hero { padding-top: 40px; }
@media (max-width: 768px) { #abertura .cg-hero { padding-top: 24px; } }

/* Em /{rede}, com a abertura da rede no ar, a seção "sobre o produto" sai:
   ela é a abertura de `/`, a raiz do domínio, e aqui, entre os valores da
   rede e o rodapé, seria propaganda no meio do relatório. Quem precisa saber
   que o acesso é por convite descobre no botão Entrar. */
body.tem-abertura .lp-sobre { display: none; }

/* A caixa do orçamento de um PPG (abrirPopupPpg em abertura.js, aberta pelo
   nome do programa no cartão "Distribuição por tema" da seção do orçamento) mora
   no body, fora de #abertura: seletores sem o prefixo. O que segue corrige
   a família .ppg-popup de capes-global.css (que veio da página de
   divulgação) para esta tela, por vir depois na ordem de carga:
   - acima do botão de acessibilidade (9998) e do aviso de armazenamento
     (9999), que cobriam o total e a ressalva no celular;
   - largura pela janela, não 90vw (de 769 a 940px a tabela vazava), com a
     tabela rolando dentro da caixa;
   - altura pela janela também, não 85vh só até 768px: com o celular
     deitado (844x390) a caixa passava da tela, sem rolar, e escondia o
     título e o ×; agora ela para 16px antes das bordas e rola por dentro;
   - texto de apoio em --color-text-mid (o muted dava 2,6:1 no claro);
   - o selo da nota do tamanho do da página de divulgação (28px);
   - os rótulos das linhas são <th scope="row">, com a cara do <td> antigo;
   - o × com 44x44 em qualquer largura (tinha 32 de largura): a área de
     toque avança sobre o respiro da caixa e o símbolo fica no canto;
   - até 480px, a tabela estreita de abrirPopupPpg no lugar da larga. */
.ppg-popup-overlay { z-index: 10000; }
.ppg-popup { max-width: 100%; max-height: 100%; overflow-x: auto; overflow-y: auto; }
.ppg-popup-subtitle, .ppg-popup-table th, .ppg-popup-close { color: var(--color-text-mid); }
.ppg-popup-nota-badge { width: 28px; height: 28px; font-size: 13px; margin-right: 8px; vertical-align: middle; }
.ppg-popup-nota { margin: 14px 0 0; max-width: 560px; font-size: 12px; line-height: 1.4; color: var(--color-text-mid); }
.ppg-popup-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ppg-popup-table th[scope="row"] {
    text-align: left;
    font-size: 15px;
    font-weight: var(--font-w-medium);
    color: var(--color-text-mid);
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
}
.ppg-popup-total th[scope="row"] {
    font-weight: var(--font-w-semibold);
    color: var(--color-primary);
    border-bottom: none;
    border-top: 2px solid var(--color-border);
    padding-top: 12px;
}
@media (max-width: 768px) {
    .ppg-popup { overscroll-behavior: contain; }
    .ppg-popup-table th[scope="row"] { font-size: 13px; padding: 6px 8px; }
}
/* A tabela estreita (abrirPopupPpg): exercícios em linhas, rubricas em
   colunas, valores compactos e a moeda na legenda. Só até 480px, onde a
   larga (659px) rolava de lado na caixa (356px a 390) e escondia 2029, 2030
   e o Total; acima disso a estreita nem aparece. Sem respiro antes da
   primeira coluna nem depois da última, a tabela alinha com o título e cabe
   a 360 (294px de conteúdo); com 5px de respiro vertical e a altura pela
   janela, a caixa inteira cabe em 360x640 sem rolar por dentro, mesmo com
   o nome do programa em duas linhas. Com os valores compactos, linhas e
   colunas diferem do total em milhares de reais: a legenda diz isso, e a
   frase dos centavos da ressalva (que vale para a larga) some.
   No escuro, as regras genéricas de tabela de style-global.css pintariam o
   cabeçalho das duas tabelas de --color-text-muted sobre uma faixa
   --color-surface-alt (3,5:1, abaixo do AA) e os valores do total de
   --color-text, ao lado do rótulo na cor primária do sistema: aqui o
   cabeçalho fica em --color-text-mid sem a faixa (5,7:1), como no claro, e
   a linha Total inteira na cor da rede clareada a 50% com branco, o mesmo
   tom do acento escuro de #abertura (--mapa-raio; 7,4:1 sobre a caixa na
   GAIA). abrirPopupPpg põe a cor da rede no véu, porque a caixa mora fora
   de #abertura. */
.ppg-popup-estreita { display: none; }
.ppg-popup-legenda { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-text-mid); }
@media (max-width: 480px) {
    .ppg-popup > .ppg-popup-table { display: none; }
    .ppg-popup-estreita { display: block; }
    .ppg-popup-estreita .ppg-popup-table th,
    .ppg-popup-estreita .ppg-popup-table td { font-size: 13px; padding: 5px 4px; }
    .ppg-popup-estreita .ppg-popup-table tr > :first-child { padding-left: 0; }
    .ppg-popup-estreita .ppg-popup-table tr > :last-child { padding-right: 0; }
    .ppg-popup-estreita .ppg-popup-table .ppg-popup-total > * { padding-top: 8px; }
    .ppg-popup-nota-centavos { display: none; }
}
html.darkmode .ppg-popup-table thead th { background: none; color: var(--color-text-mid); }
html.darkmode .ppg-popup-total th,
html.darkmode .ppg-popup-total td { color: #96BE98; }
@supports (color: color-mix(in srgb, red 50%, white)) {
    html.darkmode .ppg-popup-total th,
    html.darkmode .ppg-popup-total td { color: color-mix(in srgb, var(--uc-primary, #2E7D32) 50%, #ffffff); }
}
/* Com a caixa aberta, o avatar do VLibras (z-index próprio, dentro de um
   shadow root) sai da frente: esconder o hospedeiro apaga a árvore inteira. */
body.ppg-popup-aberta #vlibras-access-wrapper { display: none; }

/* ============================================================
   O mapa: estilo `padrao` (abertura.js, ESTILOS.padrao).
   Cor de tema por token: o JS só escreve em linha a cor de cada
   instituição. Medidas de stroke em unidades do viewBox (700 x 580).
   ============================================================ */
#abertura {
    --mapa-pais: #5A5650;              /* contorno externo do país, sobre o relevo */
    --mapa-raio: var(--uc-primary);    /* os raios da coordenadora */
    --mapa-elo: rgba(26, 26, 26, 0.55);/* pontilhado entre parceiras */
    --mapa-halo: 0.16;
    --mapa-disco-borda: #FFFFFF;
    --mapa-cartao: #FFFFFF;
    --mapa-cartao-borda: rgba(26, 26, 26, 0.10);
    --mapa-nome: #1a1a1a;
    --mapa-detalhe: #5f5f5f;
    --mapa-trilho: rgba(26, 26, 26, 0.08);
    --mapa-cartao-sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}
html.darkmode #abertura {
    --mapa-pais: #D9D4CA;
    /* O verde da rede clareado para o fundo escuro: #2E7D32 puro dá 2,2:1
       sobre #1E1E1E. Valor fixo para navegador sem color-mix. */
    --mapa-raio: #96BE98;
    --mapa-raio: color-mix(in srgb, var(--uc-primary) 50%, #ffffff);
    --mapa-elo: rgba(212, 212, 212, 0.55);
    --mapa-halo: 0.22;
    --mapa-disco-borda: #1E1E1E;
    --mapa-cartao: #2D2D2D;
    --mapa-cartao-borda: #45454A;
    --mapa-nome: #E6E6E6;
    --mapa-detalhe: #B4B4B4;
    --mapa-trilho: rgba(255, 255, 255, 0.10);
    --mapa-cartao-sombra: none;
}

#abertura .cg-mapa-svg { font-family: var(--font-main); }

/* A base: o relevo por baixo de tudo, um véu de foco fora do Brasil (a
   máscara é o contorno do país) e as coordenadas finas. Os estados ficam
   transparentes com divisa branca, para o relevo aparecer; os da rede levam
   a tinta da instituição. */
#abertura .cg-mapa-svg .ab-base { clip-path: inset(0 round 14px); }
#abertura .cg-mapa-svg .ab-veu { fill: transparent; }
#abertura .cg-mapa-svg .ab-foco { fill: rgba(255, 255, 255, 0.5); }
#abertura .cg-mapa-svg .ab-grat { stroke: rgba(0, 0, 0, 0.10); stroke-width: 0.5; }
#abertura .cg-mapa-svg .ab-pais {
    fill: none;
    stroke: var(--mapa-pais);
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
#abertura .cg-mapa-svg .estado {
    fill: rgba(255, 255, 255, 0.02);
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 0.6;
    stroke-linejoin: round;
}
#abertura .cg-mapa-svg .estado-rede {
    /* fill e stroke vêm em linha (a cor da instituição); aqui as opacidades */
    fill-opacity: 0.45;
    stroke-opacity: 1;
    stroke-width: 1.4;
}
/* No escuro o relevo é só fundo: véu geral e véu de foco mais fechados
   (os Andes, fora do Brasil, acendiam mais que o país). */
html.darkmode #abertura .cg-mapa-svg .ab-veu { fill: rgba(0, 0, 0, 0.45); }
html.darkmode #abertura .cg-mapa-svg .ab-foco { fill: rgba(0, 0, 0, 0.6); }
html.darkmode #abertura .cg-mapa-svg .ab-grat { stroke: rgba(255, 255, 255, 0.08); }
/* Estilo de produção `integrado` (03/10/2026): o fundo passa pela máscara
   de borda suave (ESTILOS.integrado em abertura.js) e o relevo se dissolve
   no papel da página, então o recorte de cantos arredondados da imagem
   perde a razão de ser. Só `?estilo=padrao` ainda usa o recorte. */
#abertura .cg-mapa-svg .ab-fundo-solto .ab-base { clip-path: none; }

/* Malha: pontos redondos entre parceiras, raios da coordenadora com casco */
#abertura .cg-mapa-svg .ab-elo {
    fill: none;
    stroke: var(--mapa-elo);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 0.1 4.8;
}
#abertura .cg-mapa-svg .ab-raio-base {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-opacity: 0.9;
    stroke-width: 5;
    stroke-linecap: butt;
    stroke-dasharray: 7 6;
}
#abertura .cg-mapa-svg .ab-raio {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: butt;
    stroke-dasharray: 7 6;
}
#abertura .cg-mapa-svg .ab-grad-rede { stop-color: var(--mapa-raio); }
/* Os raios ficam parados e correm (saindo da coordenadora) enquanto a
   pessoa está com o mouse sobre o mapa: movimento sob controle de quem
   olha, sem botão de pausa (WCAG 2.2.2). `paused`/`running` em vez de ligar
   e desligar a animação: ao sair, o tracejado para onde está, sem pular. */
@keyframes ab-fluxo {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -26; }
}
#abertura .cg-mapa-svg .ab-raio,
#abertura .cg-mapa-svg .ab-raio-base { animation: ab-fluxo 4s linear infinite; animation-play-state: paused; }
#abertura .cg-mapa-container:hover .cg-mapa-svg .ab-raio,
#abertura .cg-mapa-container:hover .cg-mapa-svg .ab-raio-base { animation-play-state: running; }

/* Marcas */
#abertura .cg-mapa-svg .ab-halo { fill-opacity: var(--mapa-halo); transition: fill-opacity 0.2s ease; }
#abertura .cg-mapa-svg .ab-inst:hover .ab-halo { fill-opacity: 0.32; }
#abertura .cg-mapa-svg .ab-anel {
    fill: none;
    stroke: var(--mapa-raio);
    stroke-width: 1.5;
    stroke-opacity: 0.9;
}
#abertura .cg-mapa-svg .ab-disco { stroke: var(--mapa-disco-borda); stroke-width: 2.5; }
#abertura .cg-mapa-svg .ab-numero {
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* Cartões de rótulo (o rect é medido e posto por fundosDosRotulos) */
#abertura .cg-mapa-svg .map-label { pointer-events: none; }
#abertura .cg-mapa-svg .ab-cartao-bg {
    fill: var(--mapa-cartao);
    stroke: var(--mapa-cartao-borda);
    stroke-width: 0.75;
}
html.darkmode #abertura .cg-mapa-svg .ab-cartao-bg { filter: none; }
#abertura .cg-mapa-svg .map-label-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1px;
    fill: var(--mapa-nome);
    paint-order: normal;
    stroke: none;
}
#abertura .cg-mapa-svg .map-label-detail {
    font-size: 11px;
    font-weight: 400;
    fill: var(--mapa-detalhe);
    paint-order: normal;
    stroke: none;
}
#abertura .cg-mapa-svg .ab-cartao-compacto .map-label-name { font-size: 17px; }

/* Bloco "Notas CAPES": cartão da mesma família dos rótulos */
#abertura .cg-notas-mini {
    bottom: 88px;
    left: 12px;
    min-width: 150px;
    max-width: 176px;
    background: var(--mapa-cartao);
    border: 1px solid var(--mapa-cartao-borda);
    border-radius: 8px;
    padding: 10px 12px;
    opacity: 1;
    box-shadow: var(--mapa-cartao-sombra);
}
#abertura .cg-notas-mini-label { color: var(--mapa-detalhe); letter-spacing: 0.6px; margin-bottom: 8px; }
#abertura .notas-mini-track { height: 5px; background: var(--mapa-trilho); }
#abertura .notas-mini-count { color: var(--mapa-nome); font-weight: 600; }

/* Legenda em chips curtos */
#abertura .cg-mapa-legenda { margin-top: -6px; gap: 8px 10px; }

/* A legenda em logos: coordenadora à parte, associadas em grupo. Caixas
   iguais (120 x 60), imagem contida, cartão branco nos dois temas (as logos
   são desenhadas para fundo branco), e um fio na cor da instituição. */
/* Os dois grupos cabem numa linha na coluna do mapa (uns 840px em tela
   larga): 6 caixas de 128px, vãos de 6px, 22px entre os grupos. */
#abertura .cg-mapa-legenda { align-items: flex-start; gap: 12px 22px; margin-top: 4px; }
#abertura .leg-grupo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#abertura .leg-grupo-rotulo {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mapa-detalhe);
}
#abertura .leg-grupo-coord .leg-grupo-rotulo { color: var(--uc-primary); }
html.darkmode #abertura .leg-grupo-coord .leg-grupo-rotulo { color: var(--mapa-raio); }
#abertura .leg-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#abertura .leg-logo {
    margin: 0;
    width: 128px;
    height: 64px;
    box-sizing: border-box;
    padding: 5px 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--mapa-cartao-borda);
    border-bottom: 3px solid var(--uc-primary);
    border-radius: 8px;
    box-shadow: var(--mapa-cartao-sombra);
}
#abertura .leg-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* A logo como link para o portal da instituição: sobe um fio ao passar. */
#abertura .leg-logo-link { display: block; border-radius: 8px; text-decoration: none; }
#abertura .leg-logo-link .leg-logo { transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; }
#abertura .leg-logo-link:hover .leg-logo { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
#abertura .leg-logo-link:focus-visible { outline: 2px solid var(--uc-primary); outline-offset: 3px; }
html.darkmode #abertura .leg-logo { border-color: #45454A; box-shadow: none; }
#abertura .cg-mapa-legenda .leg-item {
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mapa-nome);
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--mapa-cartao-borda);
    border-radius: 100px;
    background: var(--mapa-cartao);
}
#abertura .cg-mapa-legenda .leg-dot { width: 10px; height: 10px; }
#abertura .cg-mapa-legenda .leg-n { color: var(--mapa-detalhe); font-weight: 400; font-variant-numeric: tabular-nums; }
#abertura .cg-mapa-legenda .leg-item-coord { font-weight: 600; }
#abertura .cg-mapa-legenda .leg-tag {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mapa-raio);
    margin-left: 2px;
}

/* Celular: o bloco de notas desce para baixo do mapa (absoluto, cobria a
   Amazônia), em duas colunas. */
@media (max-width: 640px) {
    #abertura .cg-notas-mini { position: static; max-width: none; min-width: 0; margin: 8px 0 0; padding: 8px 12px; }
    #abertura .cg-notas-mini-bars { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 2px; }
    #abertura .notas-mini-row { margin-bottom: 0; }
}
/* Tela estreita (abaixo das duas colunas de painéis): a legenda é UMA
   linha que rola de lado (coordenadora, depois as associadas), em vez de
   empilhar as logos (pedido de 03/10/2026). Logos de 104 x 52: as seis
   cabem sem rolar a partir de uns 700px; abaixo disso a linha sangra até a
   borda da tela e a última logo visível aparece cortada, que é o sinal de
   que há mais à direita.
   A sangria tem de ser EXATAMENTE o padding lateral do .container, que
   style-global.css muda por largura (16px; 8px até 768; 12px até 480;
   10px até 389): um pixel a mais e a página inteira ganha rolagem
   horizontal (medido: 16px fixos davam 326px de página em tela de 320).
   Por isso --ab-sangria espelha aqueles quatro valores; se o container
   mudar lá, muda aqui.
   Centrada quando cabe, começando pela esquerda quando rola: margens
   automáticas no primeiro e no último grupo (absorvem o espaço livre; com
   espaço negativo viram zero e o começo fica alcançável), que funcionam em
   qualquer navegador, ao contrário de `justify-content: safe center`
   (Safari só desde o 17.6). Sem scroll-snap: o foco de teclado numa logo
   só parcialmente visível é tratado pelo `focusin` em abertura.js. A
   barra de rolagem é a do site (::-webkit-scrollbar em style-global.css,
   5px, com cor no tema escuro): `scrollbar-width: thin` a desligaria no
   Chromium. O padding em cima e embaixo é para o foco de teclado e a
   sombra das logos não serem cortados pelo overflow. */
#abertura { --ab-sangria: var(--space-md); }
@media (max-width: 768px) { #abertura { --ab-sangria: var(--space-sm); } }
@media (max-width: 480px) { #abertura { --ab-sangria: 12px; } }
@media (max-width: 389px) { #abertura { --ab-sangria: 10px; } }
@media (max-width: 899px) {
    #abertura .cg-mapa-legenda {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 18px;
        margin: 10px calc(-1 * var(--ab-sangria)) 0;
        padding: 6px var(--ab-sangria) 12px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #abertura .leg-grupo { flex: 0 0 auto; align-items: flex-start; }
    #abertura .leg-grupo:first-child { margin-left: auto; }
    #abertura .leg-grupo:last-child { margin-right: auto; }
    #abertura .leg-logos { flex-wrap: nowrap; justify-content: flex-start; }
    #abertura .leg-logo-link { flex: 0 0 auto; }
    #abertura .leg-logo { flex: 0 0 auto; width: 104px; height: 52px; padding: 4px 8px 3px; }
}
/* Abaixo de 682px (a fila inteira: 8 + 666 + 8) a fila SEMPRE passa da
   tela, mas entre 346 e 365px a logo cortada na borda quase some (a 360px
   aparecem só 7px dela). Um esmaecimento fixo de 32px na borda direita diz
   "há mais" em qualquer largura; o padding extra à direita deixa a última
   logo, e o anel de foco dela, fora do esmaecimento no fim da rolagem. */
@media (max-width: 681px) {
    #abertura .cg-mapa-legenda {
        padding-right: calc(var(--ab-sangria) + 32px);
        scroll-padding-right: calc(var(--ab-sangria) + 32px);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    #abertura .cg-mapa-svg .ab-raio,
    #abertura .cg-mapa-svg .ab-raio-base { animation: none; }
    #abertura .cg-mapa-svg .ab-halo { transition: none; }
}

/* ============================================================
   A Rede em números: três painéis explicativos ao redor do mapa.
   Cada um: pergunta, medida numa linha, gráfico, número de destaque com a
   leitura, fonte. Cartões da mesma família dos rótulos do mapa.
   ============================================================ */
#abertura .ab-container-largo { max-width: 1700px; }
/* Sem moldura nos painéis, o vão entre eles tem de ser o maior branco da
   seção (44px); o ar dentro de um painel fica por volta de 30. */
#abertura .ab-mapa-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
#abertura .ab-mapa-centro { min-width: 0; order: 1; }
#abertura .ab-analises { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
#abertura .ab-analises-esq { order: 2; }
#abertura .ab-analises-dir { order: 3; }
@media (min-width: 900px) and (max-width: 1499px) {
    /* Abaixo do mapa, os dois painéis lado a lado, na largura do mapa
       (900px): sem moldura, cada painel nasce na vertical da borda do mapa,
       e o vão de 44px é o que separa um do outro. O cartão das bolsas
       acompanha a mesma largura. */
    #abertura .ab-mapa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; max-width: 900px; margin: 0 auto; }
    #abertura .ab-mapa-centro { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
    /* Com espaço, os painéis ladeiam o mapa: três colunas, o mapa com até 900px. */
    #abertura .ab-mapa-grade {
        grid-template-columns: minmax(300px, 380px) minmax(0, 900px) minmax(300px, 380px);
        justify-content: center;
        gap: 28px;
    }
    #abertura .ab-analises-esq { order: 0; }
    #abertura .ab-analises-dir { order: 2; }
}
#abertura .ab-analises-base-wrap { max-width: 1640px; margin: 40px auto 0; text-align: left; }
/* De 900 a 1499 o cartão das bolsas acompanha a largura do mapa e dos dois
   painéis (900px). Depois da regra geral de propósito: mesma
   especificidade, e a última vence. */
@media (min-width: 900px) and (max-width: 1499px) {
    #abertura .ab-analises-base-wrap { max-width: 900px; }
}

#abertura .ab-painel {
    background: var(--mapa-cartao);
    border: 1px solid var(--mapa-cartao-borda);
    border-radius: 12px;
    padding: 16px 18px 12px;
    box-shadow: var(--mapa-cartao-sombra);
    text-align: left;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Os dois painéis ao lado do mapa (ODS e políticas públicas) ficam sem
   moldura: o conteúdo assenta direto no papel da página (pedido de
   03/10/2026, "deixar as informações como parte da página"). O número de
   destaque, a caixa de informação e a linha da fonte continuam como eram.
   O painel das bolsas, largo e abaixo do mapa, segue em cartão. */
#abertura .ab-analises .ab-painel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0 0;
    box-shadow: none;
}
#abertura .ab-painel-cab { display: flex; flex-direction: column; gap: 4px; }
#abertura .ab-painel-tag i,
#abertura .ab-painel-tag .ab-tag-roda { width: 13px; height: 13px; display: inline-flex; line-height: 1; font-size: 12px; margin-right: 6px; flex: 0 0 auto; }
#abertura .ab-painel-tag { display: inline-flex; align-items: center; }
#abertura .ab-painel-tag {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--uc-primary);
    padding: 3px 9px;
    border-radius: 999px;
}
#abertura .ab-painel-titulo { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--mapa-nome); letter-spacing: -0.01em; }
#abertura .ab-painel-medida { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--mapa-detalhe); }
#abertura .ab-painel-corpo { display: flex; flex-direction: column; gap: 12px; }
#abertura .ab-painel-grafico { min-width: 0; }
#abertura .ab-grafico-titulo { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--mapa-detalhe); }
#abertura .ab-barras { list-style: none; margin: 0; padding: 0; }
#abertura .ab-linha { margin-top: 8px; }
#abertura .ab-linha:first-child { margin-top: 2px; }
#abertura .ab-linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.3; }
#abertura .ab-rotulo { color: var(--mapa-nome); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#abertura .ab-valor { color: var(--mapa-detalhe); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
#abertura .ab-trilho { height: 7px; border-radius: 100px; background: var(--mapa-trilho); margin-top: 4px; overflow: hidden; }
#abertura .ab-fill { height: 100%; border-radius: 100px; }
#abertura .ab-ods {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    vertical-align: -3px;
}
#abertura .ab-sigla { font-weight: 700; margin-right: 6px; color: var(--uc-primary); }
#abertura .ab-nota { margin: 8px 0 0; font-size: 11.5px; color: var(--mapa-detalhe); }

/* O número de destaque com a leitura dele */
#abertura .ab-destaque {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--uc-primary-light);
}
#abertura .ab-destaque-icone {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mapa-cartao);
    color: var(--uc-primary);
    font-size: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
#abertura .ab-destaque-icone i { line-height: 1; display: inline-flex; }
#abertura .ab-destaque-txt { min-width: 0; }
#abertura .ab-destaque-num {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--uc-primary);
    font-variant-numeric: tabular-nums;
}
#abertura .ab-destaque-num small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--mapa-detalhe); margin-left: 2px; }
#abertura .ab-destaque-leitura { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mapa-nome); }

#abertura .ab-painel-fonte {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--mapa-cartao-borda);
    font-size: 11px;
    line-height: 1.4;
    color: var(--mapa-detalhe);
}
#abertura .ab-painel-fonte i { flex: 0 0 auto; margin-top: 1px; color: var(--uc-primary); display: inline-flex; }

/* O filtro das bolsas: botões de alternância */
#abertura .ab-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#abertura .ab-filtro-btn {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--mapa-cartao-borda);
    background: var(--mapa-cartao);
    color: var(--mapa-nome);
    cursor: pointer;
}
#abertura .ab-filtro-btn:hover { border-color: var(--uc-primary); }
#abertura .ab-filtro-btn:focus-visible { outline: 2px solid var(--uc-primary); outline-offset: 2px; }
#abertura .ab-filtro-btn[aria-pressed="true"] { background: var(--uc-primary); border-color: var(--uc-primary); color: #fff; }

/* O painel largo (bolsas): gráfico à esquerda, destaque à direita */
@media (min-width: 760px) {
    #abertura .ab-painel-largo .ab-painel-corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 24px; align-items: start; }
    #abertura .ab-painel-largo .ab-painel-lado { position: sticky; top: 16px; }
}

html.darkmode #abertura .ab-sigla,
html.darkmode #abertura .ab-destaque-num,
html.darkmode #abertura .ab-destaque-icone,
html.darkmode #abertura .ab-painel-fonte i { color: var(--mapa-raio); }
html.darkmode #abertura .ab-destaque { background: rgba(255, 255, 255, 0.05); }
/* Nos painéis sem moldura o disco do ícone (#2D2D2D) sumia: a caixa, sem o
   cartão por baixo, compõe sobre a página escura e dá quase a mesma cor. */
html.darkmode #abertura .ab-analises .ab-destaque-icone { background: rgba(255, 255, 255, 0.08); }
html.darkmode #abertura .ab-filtro-btn[aria-pressed="true"] { background: var(--mapa-raio); border-color: var(--mapa-raio); color: #1E1E1E; }
html.darkmode #abertura .ab-filtro-btn:hover { border-color: var(--mapa-raio); }

/* ---------- O painel de ODS: a roda, com a caixa de informação ---------- */
/* A roda tem um aro vazio no viewBox (o desenho vai até r = 117 mais os
   rótulos, em 280): a margem negativa come parte dele, para o ar em volta
   da roda não ser o maior branco do painel. Em coluna larga (de 768px),
   alinhada à esquerda como todo o resto do painel sem moldura; no celular,
   centrada. */
#abertura .ab-roda-caixa { position: relative; display: flex; justify-content: center; margin: -14px 0; }
@media (min-width: 768px) { #abertura .ab-analises .ab-roda-caixa { justify-content: flex-start; } }
#abertura .ab-roda { width: 100%; max-width: 280px; height: auto; display: block; font-family: var(--font-main); }
#abertura .ab-fatia { cursor: pointer; transition: opacity 0.15s ease; outline: none; }
#abertura .ab-fatia-ausente { fill: var(--mapa-trilho); }
#abertura .ab-fatia:hover,
#abertura .ab-fatia:focus-visible,
#abertura .ab-fatia.ab-ativa { stroke: var(--mapa-nome); stroke-width: 1.5; }
#abertura .ab-roda:has(.ab-ativa) .ab-fatia:not(.ab-ativa) { opacity: 0.55; }
#abertura .ab-roda-num { font-size: 8.5px; font-weight: 700; fill: var(--mapa-detalhe); pointer-events: none; }
#abertura .ab-roda-centro { font-size: 30px; font-weight: 800; fill: var(--uc-primary); letter-spacing: -0.02em; pointer-events: none; }
#abertura .ab-roda-centro-sub { font-size: 10px; font-weight: 600; fill: var(--mapa-detalhe); pointer-events: none; }
html.darkmode #abertura .ab-roda-centro { fill: var(--mapa-raio); }
/* ---------- A caixa de informação (roda dos ODS e blocos das políticas) ----------
   O espaço abaixo do gráfico: a dica, ou a caixa do item. Altura mínima
   reservada para a troca entre as duas não empurrar o resto. */
#abertura .ab-info-slot { min-height: 72px; margin-top: 6px; }
#abertura .ab-info {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--uc-primary-light);
    border-left: 4px solid var(--uc-primary);
    font-size: 12px;
    line-height: 1.4;
    color: var(--mapa-nome);
    text-align: left;
    animation: ab-surgir 0.18s ease;
}
@keyframes ab-surgir { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
html.darkmode #abertura .ab-info { background: rgba(255, 255, 255, 0.05); }
@media (prefers-reduced-motion: reduce) { #abertura .ab-info { animation: none; } }
#abertura .ab-info-cab { display: flex; align-items: center; gap: 8px; }
#abertura .ab-info-cab b { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.25; }
#abertura .ab-info-selo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}
#abertura .ab-info-fechar {
    flex: 0 0 auto;
    display: none;
    width: 22px; height: 22px;
    border: 0; border-radius: 50%;
    background: var(--mapa-trilho);
    color: var(--mapa-nome);
    font-size: 16px; line-height: 1;
    cursor: pointer;
}
#abertura .ab-info.ab-fixa .ab-info-fechar { display: inline-flex; align-items: center; justify-content: center; }
#abertura .ab-info-linha { margin: 8px 0 0; color: var(--mapa-detalhe); }
#abertura .ab-info-linha b { color: var(--mapa-nome); }
#abertura .ab-info-lista { margin: 4px 0 0; padding-left: 16px; color: var(--mapa-nome); }
#abertura .ab-info-lista li { margin-top: 2px; }

/* ---------- O painel de políticas: blocos por nível de transversalidade ---------- */
#abertura { --ab-verde-2: #5A9E5E; --ab-verde-4: #D6E8D7; }
html.darkmode #abertura { --ab-verde-2: #7FB282; --ab-verde-4: #3C5A3E; }
#abertura .ab-blocos { display: flex; flex-direction: column; gap: 8px; }
#abertura .ab-blocos-cab { font-size: 11px; color: var(--mapa-detalhe); margin-bottom: 4px; }
#abertura .ab-blocos-cab b { color: var(--mapa-nome); }
#abertura .ab-blocos-fila { display: flex; flex-wrap: wrap; gap: 4px; }
#abertura .ab-bloco {
    font: inherit;
    text-align: left;
    border: 0;
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
#abertura .ab-bloco b { font-weight: 700; }
#abertura .ab-bloco span { font-size: 9.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#abertura .ab-bloco:hover,
#abertura .ab-bloco:focus-visible,
#abertura .ab-bloco.ab-ativa { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3.5px var(--mapa-nome); }
#abertura .ab-blocos:has(.ab-ativa) .ab-bloco:not(.ab-ativa) { opacity: 0.6; }
#abertura .ab-blocos-n3 .ab-bloco { flex: 1 1 45%; background: var(--uc-primary); color: #fff; min-height: 56px; }
#abertura .ab-blocos-n3 .ab-bloco b { font-size: 15px; }
#abertura .ab-blocos-n2 .ab-bloco { flex: 1 1 30%; background: var(--ab-verde-2); color: #fff; min-height: 46px; }
#abertura .ab-blocos-n2 .ab-bloco b { font-size: 12.5px; }
#abertura .ab-blocos-n1 .ab-bloco { flex: 0 1 auto; background: var(--ab-verde-4); color: var(--mapa-nome); padding: 4px 7px; }
#abertura .ab-blocos-n1 .ab-bloco b { font-size: 10.5px; }