/* abertura-bolsas.css: o painel das bolsas da abertura pública, em
   pequenos múltiplos (escolhido em 20/10/2026; quem desenha é
   /redes/abertura-bolsas.js, escopo .ab-bolsas sob #abertura). O layout e
   os tokens de página vêm de abertura.css (--mapa-*, adaptados ao tema
   escuro pela classe darkmode no <html>); as cores de dado ficam nas
   custom properties --bolsa-* abaixo, SEMPRE aplicadas pela CHAVE da
   modalidade, nunca por índice. */

#abertura .ab-bolsas {
    /* O mapa fixo de cor por CHAVE de modalidade: identidade do site,
       validado para daltonismo. A barra é pintada sempre por chave, nunca
       por índice; menta, laranja e coral têm contraste baixo sobre o cartão,
       por isso toda barra carrega nome e número visíveis ao lado. */
    --bolsa-doutorado_sanduiche: #2E7D32;
    --bolsa-prof_visitante_brasil: #5DCAA5;
    --bolsa-capacitacao: #EF9F27;
    --bolsa-prof_visitante_senior: #4D96E0;
    --bolsa-pos_doutorado: #F0997B;
    /* Acento de interface e fundo do quadro do total, por tema. */
    --abm-acento: var(--uc-primary);
    --abm-total-fundo: rgba(46, 125, 50, 0.06);
}
html.darkmode #abertura .ab-bolsas {
    --abm-acento: var(--mapa-raio, #96BE98);
    --abm-total-fundo: rgba(255, 255, 255, 0.05);
}

/* O painel usa o layout interno próprio: o lado padrão fica vazio e some. */
#abertura .ab-bolsas .ab-painel-lado:empty { display: none; }

/* ---------- A legenda única, no cabeçalho do painel ---------- */
#abertura .ab-bolsas .abm-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
#abertura .ab-bolsas .abm-leg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mapa-nome);
    background: transparent;
    border: 1px solid var(--mapa-cartao-borda);
    border-radius: 999px;
    padding: 3px 10px 3px 6px;
    cursor: pointer;
}
#abertura .ab-bolsas .abm-leg-btn:hover { border-color: var(--abm-acento); }
#abertura .ab-bolsas .abm-leg-btn:focus-visible,
#abertura .ab-bolsas .abm-detalhes summary:focus-visible {
    outline: 2px solid var(--abm-acento);
    outline-offset: 2px;
}
#abertura .ab-bolsas .abm-leg-btn[aria-pressed="true"] {
    border-color: var(--abm-acento);
    box-shadow: inset 0 0 0 1px var(--abm-acento);
    background: var(--abm-total-fundo);
}
#abertura .ab-bolsas .abm-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* ---------- A grade dos quadros ----------
   auto-fill com minmax fixa a largura da coluna: o quadro do total, sozinho
   na primeira linha, tem a MESMA largura de trilho dos cinco recortes, e a
   escala comum vale também em pixel. A leitura ocupa o resto da linha. */
#abertura .ab-bolsas .abm-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 14px;
    align-items: stretch;
}
#abertura .ab-bolsas .abm-leitura { grid-column: 1 / -1; min-width: 0; }
#abertura .ab-bolsas .abm-leitura .ab-destaque { height: 100%; box-sizing: border-box; }
@media (min-width: 760px) {
    #abertura .ab-bolsas .abm-leitura { grid-column: 2 / -1; grid-row: 1; }
}

#abertura .ab-bolsas .abm-quadro {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mapa-cartao-borda);
    border-radius: 10px;
    padding: 11px 12px 10px;
}
/* O total, visivelmente apartado dos recortes que o repartem: fundo tintado,
   filete de acento (inset: não muda a largura interna, a escala segue
   idêntica) e selo. */
#abertura .ab-bolsas .abm-quadro-total {
    background: var(--abm-total-fundo);
    box-shadow: inset 3px 0 0 var(--abm-acento);
}
#abertura .ab-bolsas .abm-selo {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--abm-acento);
    padding: 2px 7px;
    border-radius: 999px;
    margin-bottom: 2px;
}
html.darkmode #abertura .ab-bolsas .abm-selo { color: #1E1E1E; }

#abertura .ab-bolsas .abm-q-cab { display: flex; flex-direction: column; gap: 2px; }
#abertura .ab-bolsas .abm-q-titulo {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mapa-nome);
}
#abertura .ab-bolsas .abm-q-meta {
    margin: 0;
    font-size: 11.5px;
    color: var(--mapa-detalhe);
    font-variant-numeric: tabular-nums;
}

/* ---------- As barras: rótulo e número em cima, trilho fino embaixo ---------- */
#abertura .ab-bolsas .abm-barras { list-style: none; margin: 9px 0 0; padding: 0; flex: 1; }
#abertura .ab-bolsas .abm-linha { margin-top: 7px; }
#abertura .ab-bolsas .abm-linha:first-child { margin-top: 0; }
#abertura .ab-bolsas .abm-linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.25;
}
#abertura .ab-bolsas .abm-rotulo {
    color: var(--mapa-nome);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#abertura .ab-bolsas .abm-valor {
    color: var(--mapa-detalhe);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
#abertura .ab-bolsas .abm-trilho {
    height: 6px;
    border-radius: 999px;
    background: var(--mapa-trilho);
    margin-top: 3px;
    overflow: hidden;
}
/* Base reta, ponta de dado arredondada; min-width segura a barra de 1 cota
   visível na escala comum. */
#abertura .ab-bolsas .abm-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 0 999px 999px 0;
    transition: opacity 0.15s ease;
}
#abertura .ab-bolsas .abm-rotulo,
#abertura .ab-bolsas .abm-valor { transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
    #abertura .ab-bolsas .abm-fill,
    #abertura .ab-bolsas .abm-rotulo,
    #abertura .ab-bolsas .abm-valor { transition: none; }
}

/* A linha que o recorte não tem: mesmo lugar, tudo mais quieto. */
#abertura .ab-bolsas .abm-vazia .abm-rotulo { color: var(--mapa-detalhe); }
#abertura .ab-bolsas .abm-vazia .abm-valor { font-weight: 400; font-style: italic; font-size: 10.5px; }
#abertura .ab-bolsas .abm-vazia .abm-trilho { opacity: 0.55; }

/* O destaque da legenda: as outras modalidades apenas esmaecem. */
#abertura .ab-bolsas .abm-apagada .abm-fill { opacity: 0.16; }
#abertura .ab-bolsas .abm-apagada .abm-rotulo,
#abertura .ab-bolsas .abm-apagada .abm-valor { opacity: 0.45; }

#abertura .ab-bolsas .abm-destino {
    margin: 9px 0 0;
    padding-top: 7px;
    border-top: 1px solid var(--mapa-cartao-borda);
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--mapa-detalhe);
}

/* ---------- O divisor entre o total e os recortes ---------- */
#abertura .ab-bolsas .abm-divisor {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mapa-detalhe);
}
#abertura .ab-bolsas .abm-divisor::before,
#abertura .ab-bolsas .abm-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mapa-cartao-borda);
}
#abertura .ab-bolsas .abm-divisor span { flex: 0 1 auto; text-align: center; }

/* ---------- A tabela no <details>: o par textual do gráfico ---------- */
#abertura .ab-bolsas .abm-detalhes { margin-top: 10px; }
#abertura .ab-bolsas .abm-detalhes summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--mapa-detalhe);
    padding: 4px 0;
}
#abertura .ab-bolsas .abm-detalhes summary:hover { color: var(--mapa-nome); }
#abertura .ab-bolsas .abm-rolagem {
    overflow-x: auto;
    margin-top: 8px;
    -webkit-overflow-scrolling: touch;
}
#abertura .ab-bolsas .abm-tabela {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 11.5px;
    color: var(--mapa-nome);
}
#abertura .ab-bolsas .abm-tabela th,
#abertura .ab-bolsas .abm-tabela td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--mapa-cartao-borda);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#abertura .ab-bolsas .abm-tabela thead th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mapa-detalhe);
}
#abertura .ab-bolsas .abm-th-esq { text-align: left; font-weight: 600; }
#abertura .ab-bolsas .abm-th-esq .abm-swatch { margin-right: 6px; vertical-align: -1px; }
#abertura .ab-bolsas .abm-col-total { background: var(--abm-total-fundo); }
#abertura .ab-bolsas .abm-tr-total th,
#abertura .ab-bolsas .abm-tr-total td { font-weight: 700; border-bottom: 0; }
#abertura .ab-bolsas .abm-nota-tab { margin: 6px 0 0; font-size: 11px; color: var(--mapa-detalhe); }
#abertura .ab-bolsas .abm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}