/* ============================================================
   painel-visuais.css — os blocos visuais do painel.

   Companheiro de `/redes/painel/painel-visuais.js`: KPIs, mapa das
   instituições, barras do Comitê Gestor e tema ano a ano. (O globo saiu
   daqui: vive na abertura pública da rede, em /redes/index.html.)

   Arquivo próprio, e não mais 300 linhas no fim de `painel.css`: o que está
   aqui nasceu junto e sai junto, e quem for mexer num dos blocos não precisa
   abrir um arquivo de 1.400 linhas para achá-lo.

   Segue os tokens de `style-global.css`. As únicas cores literais são as que
   CODIFICAM dado — a de cada instituição e a de cada rubrica —, e elas vêm do
   JS: precisam ser as mesmas nos dois temas, senão a legenda deixa de valer.
   ============================================================ */

/* ---------- 1. KPIs ---------- */
.pn-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.pn-kpi {
    background: var(--color-bg-card, var(--color-bg));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
.pn-kpi-rot {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-mid);
    margin-bottom: 6px;
}
.pn-kpi-val {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    font-weight: var(--font-w-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.pn-kpi-track {
    height: 6px;
    background: var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
    margin: 9px 0 6px;
}
.pn-kpi-fill { height: 100%; border-radius: 3px; }
.pn-kpi-sub { font-size: 11.5px; color: var(--color-text-mid); }

/* ---------- 2. Mapa ---------- */
.pn-mapa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 18px;
    align-items: start;
}
.pn-mapa-svg { width: 100%; height: auto; display: block; }

/* O contorno da cor do fundo mantém a sigla legível por cima do estado
   pintado, nos dois temas, sem caixa atrás do texto. */
.pn-mapa-svg .pn-mapa-sigla,
.pn-mapa-svg .pn-mapa-det {
    /* Caixa normal, explicitamente: dentro da moldura do sistema algum estilo
       de secao chega ao texto do SVG e o poe em caixa alta ("IF GOIANO",
       "4 PPGS"), que e' mais largo e nao e' como se escreve a sigla. */
    text-transform: none;
    letter-spacing: 0;
    paint-order: stroke;
    stroke: var(--color-bg);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.pn-mapa-svg .pn-mapa-sigla {
    font-size: 13px;
    font-weight: var(--font-w-semibold);
    fill: var(--color-text);
}
.pn-mapa-svg .pn-mapa-det {
    font-size: 11px;
    fill: var(--color-text-mid);
}
.pn-mapa-aviso {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--color-text-mid);
}
.pn-mapa-lado { display: flex; flex-direction: column; gap: 14px; }

/* Notas CAPES */
.pn-notas {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}
.pn-notas-tit {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-mid);
    margin-bottom: 8px;
}
.pn-nota-linha {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.pn-nota-sel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    border-radius: 6px;
    background: var(--color-border-light);
    color: var(--color-text);
    font-size: 11.5px;
    font-weight: var(--font-w-semibold);
}
.pn-nota-track {
    height: 7px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
}
.pn-nota-fill {
    display: block;
    height: 100%;
    background: var(--color-primary, #2E7D32);
    border-radius: 4px;
}
.pn-nota-qtd {
    font-size: 11.5px;
    color: var(--color-text-mid);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Legenda das instituições */
.pn-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 11.5px;
    color: var(--color-text-mid);
}
.pn-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.pn-leg-bola {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

/* ---------- 3. Comitê Gestor ---------- */
.pn-cg-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 12px;
}
.pn-cg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--color-text-mid);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}
.pn-cg-chip i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    flex: none;
}
.pn-cg-chip-total { color: var(--color-text); font-weight: var(--font-w-semibold); }
.pn-cg-linha {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 128px;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.pn-cg-sigla {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--color-text);
    justify-self: end;
    text-align: right;
}
.pn-cg-track {
    display: block;
    height: 20px;
    background: var(--color-border-light);
    border-radius: 5px;
    overflow: hidden;
}
.pn-cg-barra { display: flex; height: 100%; border-radius: 5px; overflow: hidden; }
.pn-cg-fatia { display: block; height: 100%; }
.pn-cg-val {
    font-size: 12.5px;
    color: var(--color-text-mid);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- 4. Tema ano a ano ---------- */
.pn-ta-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-bg-card, var(--color-bg));
}
.pn-ta-cab {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.pn-ta-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: var(--font-w-semibold);
    color: var(--color-text);
}
.pn-ta-nome small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--color-text-mid);
    margin-top: 2px;
}
.pn-ta-val {
    font-size: 15px;
    font-weight: var(--font-w-semibold);
    color: var(--color-primary, #2E7D32);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pn-ta-seta {
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 2px solid var(--color-text-mid);
    border-bottom: 2px solid var(--color-text-mid);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.pn-ta-cab[aria-expanded="true"] .pn-ta-seta { transform: rotate(-135deg); }
.pn-ta-track {
    height: 4px;
    background: var(--color-border-light);
    border-radius: 2px;
    overflow: hidden;
    margin: 10px 0 9px;
}
.pn-ta-fill { height: 100%; background: var(--color-primary, #2E7D32); border-radius: 2px; }
.pn-ta-anos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 11.5px;
    color: var(--color-text-mid);
    font-variant-numeric: tabular-nums;
}
.pn-ta-ano b { color: var(--color-text); font-weight: var(--font-w-semibold); }
.pn-ta-corpo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}

/* ---------- Telas estreitas ---------- */
@media (max-width: 860px) {
    .pn-mapa-grid { grid-template-columns: minmax(0, 1fr); }
    .pn-cg-linha { grid-template-columns: 86px minmax(0, 1fr); }
    .pn-cg-val { grid-column: 2; text-align: left; }
    .pn-kpi-val { font-size: 21px; }
}

/* Quem pediu menos movimento não recebe a transição da seta. */
@media (prefers-reduced-motion: reduce) {
    .pn-ta-seta { transition: none; }
}