/* ============================================================
 * telas.css — Base das telas novas: dimensões, orçamento,
 * instrumentos e configurações.
 *
 * As quatro têm a mesma anatomia (cabeçalho, KPIs, seções em cartão, tabelas
 * de coleção), então o estilo é um só. As classes `tb-*` são do renderizador
 * compartilhado (assets/tabela.js) e valem em todas.
 * ============================================================ */

.tl-main { padding: 24px 28px 40px; max-width: 1400px; margin: 0 auto; }

.tl-header-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.tl-header .subt {
    margin: 0; color: var(--color-text-mid, #555);
    font-size: 13.5px; max-width: 68ch; line-height: 1.55;
}
/* Cabecalho vazio nao ocupa lugar. `teste.css` ja' fazia isto, mas so' sob
   `.cp-main`; as telas de `.tl-main` ficaram de fora, e na de orcamento o
   <div> vazio espremia os tres filtros em duas fileiras. */
.tl-header:empty { display: none; }

/* UMA LINHA, e sem depender da largura intrinseca dos <select>.
   `wrap` deixava a decisao para a soma das larguras naturais, que muda com o
   texto da opcao mais longa: bastou "CAPES-Global e outras origens" crescer
   para o terceiro filtro cair para baixo. Com `nowrap` mais `min-width: 0`,
   eles encolhem juntos em vez de quebrar. */
.tl-filtros {
    display: flex; gap: 10px; flex-wrap: nowrap; align-items: center;
    margin-left: auto;
}
/* No estreito a conta se inverte: tres controles espremidos num telefone nao
   se leem. Ai' quebrar e' o certo. */
@media (max-width: 760px) {
    .tl-filtros { flex-wrap: wrap; margin-left: 0; }
}
.tl-filtros select {
    padding: 7px 10px; border: 1px solid var(--color-border, #ddd);
    border-radius: 8px; background: var(--color-bg-card, #fff);
    color: inherit; font-size: 13px;
    /* A largura do <select> sem regra e' a da opcao mais longa, e ela cresce
       com o texto: "CAPES-Global e outras origens" empurrava os tres filtros
       para tres linhas, um debaixo do outro, ocupando meia tela de altura
       antes de o primeiro numero aparecer.

       `max-width` fecha isso sem cortar nada — a opcao escolhida aparece
       inteira porque o proprio controle a elide, e a lista abre na largura
       que precisar. Mesmo remedio de `.bn-filtros select`, em
       beneficiarios.css, que teve o mesmo problema. */
    flex: 0 1 auto; min-width: 0; max-width: 240px;
}

.tl-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.tl-kpi {
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px; padding: 14px 16px;
}
.tl-kpi .label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-mid, #666); font-weight: 600;
}
.tl-kpi .val {
    font-size: 20px; font-weight: 700; line-height: 1.3;
    color: var(--uc-primary, #2E7D32); overflow-wrap: anywhere;
}
.tl-kpi .sub { font-size: 11.5px; color: var(--color-text-mid, #777); }

.tl-aviso {
    background: var(--cgt-alerta-bg, #FFF4E5); color: var(--cgt-alerta-fg, #B26A00);
    border: 1px solid var(--cgt-alerta-borda, #FFE0B2);
    border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
    display: flex; align-items: baseline; gap: 8px;
}

.tl-secao { margin-bottom: 18px; }
.tl-card, .dm-bloco {
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px; padding: 16px 18px; margin-bottom: 18px;
}

/* ---------- Tabela compartilhada (tabela.js) ---------- */
.tb-cab {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.tb-cab-tit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-cab-tit h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tb-contagem { font-size: 12px; color: var(--color-text-mid, #888); }
.tb-cab-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tb-busca {
    padding: 6px 10px; border: 1px solid var(--color-border, #ddd);
    border-radius: 7px; background: var(--color-bg-card, #fff);
    color: inherit; font-size: 12.5px; min-width: 150px;
    height: 30px;
}
.tb-btn {
    border: 1px solid var(--color-border, #ddd); background: var(--color-bg-card, #fff);
    color: inherit; border-radius: 7px; padding: 5px 10px;
    font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
    /* Era `inline-block` com padding de 5px: 27px de altura, e cada botao
       assentava numa linha de base diferente da busca ao lado. Alinhar por
       flex e fixar a altura poe a barra de acoes toda no mesmo eixo. */
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.tb-btn:hover {
    border-color: var(--uc-primary, #2E7D32); color: var(--uc-primary, #2E7D32);
    background: var(--color-primary-light);
}
.tb-btn-link { color: var(--cgt-link, #1565C0); }

.tb-wrap { overflow-x: auto; }
.tb-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tb-tabela th {
    text-align: left; padding: 9px 11px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-text-mid, #777);
    /* Faixa de cabecalho: numa tabela sem zebra, o unico separador entre
       rotulo e dado era uma linha de 1px da mesma cor das linhas de baixo. */
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border, #e6e6e6); white-space: nowrap;
}
.tb-tabela th:first-child { border-top-left-radius: 7px; }
.tb-tabela th:last-child  { border-top-right-radius: 7px; }
.tb-tabela td {
    padding: 9px 11px;
    /* Divisoria entre linhas mais leve que a do cabecalho. `--color-border`
       resolvia para #dcdcdc (o fallback #f2f2f2 nunca chegou a valer, porque
       o token existe), e a tabela ficava riscada de cinza medio a cada linha. */
    border-bottom: 1px solid var(--color-border-light, #f2f2f2);
    vertical-align: top; max-width: 340px;
    /* `anywhere` parte a palavra no meio ainda que haja espaco na proxima
       linha, e encolhe a coluna ate o minimo de um caractere. `break-word`
       so' quebra o que nao cabe de jeito nenhum. */
    overflow-wrap: break-word;
}
.tb-tabela tbody tr:last-child td { border-bottom: none; }
.tb-tabela tbody tr:hover { background: var(--color-bg-alt, #fafafa); }
.tb-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tb-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: var(--cgt-neutro-bg, #EEF1F4); color: var(--cgt-neutro-fg, #555);
    white-space: nowrap;
}
.tb-badge.tb-ok, .tb-badge.tb-aprovado, .tb-badge.tb-vigente,
.tb-badge.tb-assinado, .tb-badge.tb-implementada, .tb-badge.tb-enviado,
.tb-badge.tb-ativo, .tb-badge.tb-concluido {
    background: var(--cgt-ok-bg, #E8F5E9); color: var(--cgt-ok-fg, #2E7D32);
}
.tb-badge.tb-alerta, .tb-badge.tb-pendente, .tb-badge.tb-media,
.tb-badge.tb-medio, .tb-badge.tb-em_analise, .tb-badge.tb-revisao,
.tb-badge.tb-em_andamento {
    background: var(--cgt-alerta-bg, #FFF4E5); color: var(--cgt-alerta-fg, #B26A00);
}
.tb-badge.tb-danger, .tb-badge.tb-alta, .tb-badge.tb-alto,
.tb-badge.tb-cancelada, .tb-badge.tb-recusado, .tb-badge.tb-inadimplente,
.tb-badge.tb-suspensa, .tb-badge.tb-vencido {
    background: var(--cgt-erro-bg, #FDECEA); color: var(--cgt-erro-fg, #C62828);
}
.tb-badge.tb-neutro { background: var(--cgt-neutro-bg, #EEF1F4); color: var(--cgt-neutro-fg, #666); }
.tb-link { color: var(--cgt-link, #1565C0); text-decoration: none; font-weight: 600; }
.tb-link:hover { text-decoration: underline; }

.tb-mais {
    margin-top: 10px; width: 100%; padding: 8px; border-radius: 7px;
    border: 1px dashed var(--color-border, #ddd); background: none;
    color: var(--color-text-mid, #666); font-size: 12.5px; cursor: pointer;
}
.tb-mais:hover { border-color: var(--uc-primary, #2E7D32); color: var(--uc-primary, #2E7D32); }
.tb-nada { font-size: 12.5px; color: var(--color-text-mid, #888); text-align: center; padding: 12px; }

.tb-texto { display: grid; gap: 14px; }
.tb-texto-item h4 { margin: 0 0 3px; font-size: 12.5px; color: var(--color-text-mid, #555); }
.tb-texto-item p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.tb-texto-vazio { color: var(--color-text-mid, #999); font-style: italic; font-size: 12.5px !important; }

/* ---------- Dimensão ---------- */

.dm-resumo {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px; padding: 14px 18px;
}
.dm-resumo-pct { font-size: 30px; font-weight: 700; color: var(--uc-primary, #2E7D32); }
.dm-resumo-txt { font-size: 13px; color: var(--color-text-mid, #555); line-height: 1.4; }
.dm-resumo-txt span { font-size: 11.5px; color: var(--color-text-mid, #888); }

.dm-inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dm-ind {
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px; padding: 13px 15px;
}
.dm-ind-nome { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.dm-ind-val { font-size: 21px; font-weight: 700; color: var(--uc-primary, #2E7D32); }
.dm-ind-meta { font-size: 13px; font-weight: 400; color: var(--color-text-mid, #888); }
.dm-ind-semmeta { font-size: 11px; color: var(--color-text-mid, #999); margin: 6px 0; }
.dm-ind-pe { font-size: 11px; color: var(--color-text-mid, #888); margin-top: 6px; }

.dm-barra {
    display: block; height: 7px; border-radius: 999px; margin: 7px 0 0;
    background: var(--color-border, #eaeaea); overflow: hidden;
}
.dm-barra-larga { min-width: 90px; }
.dm-barra-fill { display: block; height: 100%; border-radius: 999px; }
.dm-barra-fill.dm-ok { background: var(--color-positive, #2E7D32); }
.dm-barra-fill.dm-alerta { background: var(--color-warning, #d97706); }
.dm-barra-fill.dm-danger { background: var(--color-negative, #c0392b); }
.dm-barra-fill.dm-neutro { background: #78909C; }

.dm-papel { font-size: 11px; color: var(--color-text-mid, #888); margin-left: 7px; }
.dm-sobe { color: var(--cgt-ok-fg, #2E7D32); font-weight: 600; }
.dm-desce { color: var(--cgt-erro-fg, #C62828); font-weight: 600; }
.dm-igual { color: var(--color-text-mid, #888); }
.dm-diag-campos { margin-top: 14px; border-top: 1px solid var(--color-border-light, #f0f0f0); padding-top: 12px; }
.dm-diag-campos h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--color-text-mid, #555); }
.dm-diag-campos ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; }
.dm-falta { color: var(--cgt-erro-fg, #C62828); }

/* A dimensão inteira por preencher: um aviso só, no alto, no lugar dos cinco
   que cada seção dava por conta própria. Este mantém a moldura do `.cgt-vazio`
   porque é o único da tela — e porque carrega as duas portas (Diagnóstico e
   Dimensões) que não existem na barra lateral. */
.dm-comeco { padding: 34px 22px; }
.dm-comeco-acoes {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center; margin-top: 12px;
}

/* ---------- Orçamento ---------- */
.orc-rubricas { display: grid; gap: 10px; }
.orc-rubrica { display: grid; grid-template-columns: 190px 1fr 190px; gap: 12px; align-items: center; }
.orc-rubrica-nome { font-size: 13px; font-weight: 600; }
.orc-rubrica-val { font-size: 12.5px; text-align: right; font-weight: 600; }
.orc-rubrica-val span { font-weight: 400; color: var(--color-text-mid, #888); }

/* ---------- Instrumentos ---------- */
/* O aviso do inicio das atividades (Edital 13/2025, 25.3).
   Era vermelho sempre, e dizia a mesma coisa para a Rede que ainda nem assinou
   o Termo de Outorga — e portanto nao tem prazo correndo — e para a que passou
   dos 60 dias e pode ter o recurso suspenso. Alarme que nao distingue os dois
   nao serve a nenhum. Sao quatro estados, e o vermelho fica so' no que venceu.
   A cor nunca vai sozinha: cada variante troca tambem o icone e as palavras. */
.in-alerta {
    background: var(--cgt-erro-bg, #FDECEA); color: var(--cgt-erro-fg, #C62828);
    border: 1px solid var(--cgt-erro-borda, #F5C6C2);
    border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
    line-height: 1.55;
}
.in-alerta--nota {
    background: var(--color-surface, #f5f5f5);
    color: var(--color-text, #1a1a1a);
    border-color: var(--color-border, #e3e3e3);
}
.in-alerta--ok {
    background: var(--cgt-ok-bg, #E8F5E9);
    color: var(--cgt-ok-fg, #2E7D32);
    border-color: var(--cgt-ok-borda, #C8E6C9);
}
.in-alerta--aviso {
    background: var(--cgt-alerta-bg, #FFF6E5);
    /* Texto em tinta normal: o ambar sobre este fundo nao alcanca AA para
       texto. Ele fica na borda e no icone, que sao objeto grafico. */
    color: var(--color-text, #1a1a1a);
    border-color: var(--cgt-alerta-borda, #FFE0A3);
}
.in-alerta--aviso > i { color: var(--cgt-alerta-fg, #B26A00); }
.in-alerta--nota > i  { color: var(--color-text-mid, #6b6b6b); }

/* ---------- Configurações ---------- */
.cf-nota { font-size: 12.5px; color: var(--color-text-mid, #666); margin: 0 0 14px; line-height: 1.55; }
.cf-agregados {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    justify-content: start; gap: 18px 32px;
}
.cf-ag-bloco h4 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-text-mid, #777);
}
.cf-ag-item { display: grid; grid-template-columns: 110px 1fr 74px; gap: 9px; align-items: center; margin-bottom: 5px; }
.cf-ag-rot { font-size: 12.5px; overflow-wrap: anywhere; }
.cf-ag-num { font-size: 12.5px; text-align: right; font-weight: 600; }
.cf-ag-num span { font-weight: 400; color: var(--color-text-mid, #888); }

.cf-restrito {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e6e6e6);
    border-left: 4px solid var(--cgt-alerta-fg, #B26A00); border-radius: 10px; padding: 18px 20px;
}
.cf-restrito > i { font-size: 22px; color: var(--cgt-alerta-fg, #B26A00); }
.cf-restrito strong { display: block; margin-bottom: 5px; }
.cf-restrito p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--color-text-mid, #555); max-width: 74ch; }
.cf-restrito-tec { font-size: 11.5px !important; color: var(--color-text-mid, #999) !important; }

/* ── Configurações: largura e ritmo ─────────────────────────────────────
   `body.has-cg-sidebar > main` zera o max-width para os paineis encherem
   monitor grande. Numa tela de formulario e ficha isso vira linha de 1700px:
   o rotulo de um campo fica a um palmo do valor do campo ao lado, e os botoes
   da tabela a meia tela do nome da pessoa. */
body.has-cg-sidebar > main.cf-main { max-width: 1180px; }

/* Identidade da rede: sigla, nome e estado numa linha so'. Antes eram dois
   campos de dicionario com o MESMO conteudo — rede recem-provisionada tem
   nome e sigla iguais ao endereco. */
.cf-ident {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.cf-ident-sigla {
    font-size: 19px; font-weight: var(--font-w-bold, 700); letter-spacing: .01em;
    color: var(--color-primary, #2E7D32);
}
.cf-ident-nome { font-size: 14px; color: var(--color-text-mid, #6b6b6b); }
.cf-ident-url {
    margin-left: auto; font-size: 11.5px; color: var(--color-text-muted, #9e9e9e);
    background: var(--color-bg-alt, #f3f3f1); padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
}

/* Blocos com teto de largura e alinhados a esquerda: `1fr` esticava quatro
   campos por 1700px de cartao. */
.cf-rede {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 230px));
    justify-content: start; gap: 14px 28px; margin: 0;
}
.cf-rede-item dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-mid, #777); font-weight: 600; }
.cf-rede-item dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.cf-vazio { color: var(--color-text-muted, #9e9e9e); }
/* O branco que trava o sistema nao pode ter o peso de um campo opcional. */
.cf-falta dt { color: var(--cgt-alerta-fg, #B26A00); }
.cf-falta dd .cf-vazio { color: var(--cgt-alerta-fg, #B26A00); font-weight: var(--font-w-semibold, 600); }

.cf-main .tl-aviso { margin: 14px 0 0; align-items: flex-start; }
.cf-main .tl-aviso i { line-height: 1.5; flex: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
    .tl-main { padding: 16px 14px 30px; }
    .orc-rubrica { grid-template-columns: 1fr; gap: 4px; }
    .orc-rubrica-val { text-align: left; }
    .cf-ag-item { grid-template-columns: 1fr 60px; }
    .cf-ag-item .dm-barra { display: none; }
}

/* ── Formulários de cadastro (membros, plataforma) ──────────────────────
   Mesmos tokens do resto: nada de paleta nova. O `mb-` vem de "membros",
   onde o formulário nasceu, e a tela de plataforma reusa em vez de clonar. */
.mb-form { display: grid; gap: var(--space-sm, 8px); margin-bottom: var(--space-md, 16px); }
.mb-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm, 8px); }
.mb-form label { display: grid; gap: 3px; font-size: 12px; color: var(--color-text-mid, #6b6b6b); font-weight: var(--font-w-semibold, 600); }
.mb-form input, .mb-form select {
    padding: 8px 10px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #fff);
    color: inherit; font-family: inherit; font-size: 13px; font-weight: 400;
}
.mb-form input:focus-visible, .mb-form select:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -1px;
}
.mb-req { color: var(--color-negative, #c0392b); margin-left: 2px; }
.mb-ajuda { font-size: 11.5px; color: var(--color-text-muted, #9e9e9e); margin: 0 0 4px; line-height: 1.5; }
.mb-ajuda code { font-size: 11px; }

/* A dica do seletor de arquivo vem DEPOIS do campo, e nao antes como
   `.mb-ajuda` — o limite de 10 MB so' interessa a quem ja' esta' escolhendo o
   arquivo. Antes do campo seria uma advertencia para quem ainda nao decidiu
   nada. */
.mb-dica {
    display: block; margin-top: 4px;
    font-size: 11.5px; line-height: 1.5;
    color: var(--color-text-muted, #9e9e9e);
}

/* O seletor de arquivo herda o `padding: 8px 10px` de `.mb-form input`, que
   foi pensado para texto: o botao "Escolher arquivo" que o navegador desenha
   dentro do campo fica alto demais e desalinha a linha Tipo/Arquivo. */
.mb-form input[type="file"] {
    padding: 6px 8px;
    font-size: 12.5px;
    cursor: pointer;
}

.mb-doc {
    border: 1px dashed var(--color-border, #dcdcdc);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px) var(--space-md, 16px);
    margin: 0;
}
.mb-doc legend { font-size: 11.5px; color: var(--color-text-mid, #6b6b6b); font-weight: var(--font-w-semibold, 600); padding: 0 6px; }

.mb-acoes { display: flex; align-items: center; gap: var(--space-md, 16px); flex-wrap: wrap; }
.mb-btn {
    border: 1px solid var(--color-border, #dcdcdc);
    background: var(--color-bg-card, #fff); color: inherit;
    border-radius: var(--radius-md, 8px); padding: 8px 14px;
    font-family: inherit; font-size: 13px; font-weight: var(--font-w-semibold, 600); cursor: pointer;
}
.mb-btn:hover { border-color: var(--color-primary, #2E7D32); }
.mb-btn-primario {
    background: var(--color-primary, #2E7D32);
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary-text, #fff);
}
.mb-btn-primario:hover { background: var(--color-primary-hover, #1B5E20); }
.mb-btn-mini { padding: 4px 9px; font-size: 11.5px; }
/* Botão barrado por REGRA, não por espera: Aprovar enquanto o pedido tem
   documento pendente ou recusado, por exemplo. Quem lê a tela recebe o porquê
   pelo `title` e pelo aviso escrito ao lado do que trava; à folha cabe só tirar
   a promessa de clique — sem isso o botão barrado é idêntico ao que funciona. */
.mb-btn:disabled { opacity: .5; cursor: default; }
.mb-btn:disabled:hover { border-color: var(--color-border, #dcdcdc); }
.mb-btn-primario:disabled:hover { background: var(--color-primary, #2E7D32); }

.mb-status { font-size: 12.5px; color: var(--color-text-mid, #6b6b6b); }
.mb-status.mb-ok { color: var(--color-positive, #2E7D32); font-weight: var(--font-w-semibold, 600); }
.mb-status.mb-erro { color: var(--color-negative, #c0392b); }

.mb-tabela td { vertical-align: middle; }
/* Nome e e-mail na mesma celula, e o escopo debaixo do papel: sao pares —
   como a pessoa se chama e como se chega nela; que papel tem e sobre o que.
   Em colunas separadas, empurravam a ficha para fora da tabela. */
.mb-pessoa { display: grid; gap: 1px; }
.mb-pessoa-nome { font-weight: var(--font-w-semibold, 600); }
.mb-pessoa-email {
    font-size: 11.5px; color: var(--color-text-muted, #9e9e9e); overflow-wrap: anywhere;
}
.mb-escopo { display: block; font-size: 11.5px; color: var(--color-text-muted, #9e9e9e); }
.mb-ficha { font-size: 12.5px; color: var(--color-text-mid, #6b6b6b); }
.mb-ficha-vazia { color: var(--color-text-muted, #9e9e9e); }
.mb-saida { font-size: 11.5px; color: var(--color-text-muted, #9e9e9e); }
/* `input[type="search"]` do reset global e' (0,1,1) e manda `width: 100%` — o
   campo enchia a linha e empurrava CSV/XLSX para baixo, dobrando a altura da
   barra. `.tb-busca` sozinha (0,1,0) tambem perde para ele; aqui a regra sobe
   para (0,2,0). O mesmo vale para a busca das outras tabelas, que fica para
   quando for a vez delas. */
.tb-cab-acoes .mb-busca { width: 190px; }
.mb-inativo { opacity: .55; }
.mb-tag {
    display: inline-block; margin-left: 7px; padding: 1px 7px;
    border-radius: var(--radius-pill, 100px);
    background: var(--color-surface-alt, #eaeae8);
    font-size: 10.5px; font-weight: var(--font-w-semibold, 600);
    color: var(--color-text-mid, #6b6b6b);
}
.mb-nota { font-size: 11.5px; color: var(--color-text-muted, #9e9e9e); margin: var(--space-sm, 8px) 0 0; line-height: 1.5; }

@media (max-width: 860px) { .mb-linha { grid-template-columns: 1fr; } }

/* ── Vigência do edital (Configurações) ──────────────────────────────────
   Duas datas dentro do cartão largo das Configurações. Sem limite de medida,
   dois campos de mês esticavam por mil e cem pixels para receber "03/2024".

   Mora AQUI, e não em teste.css junto dos outros blocos de implantação, por
   ordem de carregamento: `.mb-form label { display: grid }` está nesta folha,
   que index.html carrega DEPOIS de teste.css. Com a mesma especificidade, a
   última vence — e a correção do asterisco não valia de lá. */
/* Margem lateral zero: o `.tl-card` já afasta 18px, e o par somava 36 — o
   formulário começava meio centímetro à direita do próprio título. É o mesmo
   acerto que os blocos de implantação levaram. */
.cf-vigencia { max-width: 560px; margin: 10px 0 4px; }
/* Recolhido, o cartão é uma linha só: o fato — o selo com as duas datas — e o
   botão que o altera. Os 12px que `.tb-cab` reserva para o conteúdo de baixo
   viram um vão no pé de um cartão que não tem conteúdo de baixo. */
.cf-vig-so-cabecalho .tb-cab { margin-bottom: 0; }
/* O `<span class="mb-req">*</span>` é filho do label, que é grid: o asterisco
   caía numa linha só dele, embaixo do rótulo. Aqui o rótulo volta ao fluxo
   normal — a mesma correção que `.pl-body` faz na tela da plataforma. */
.cf-vigencia label { display: block; }
.cf-vigencia label > input { display: block; width: 100%; margin-top: 3px; }

/* ── Orcamento: funil por IFES ──────────────────────────────────────────
   Uma linha por instituicao, com barra empilhada sobre o trilho do orcamento.
   As quatro faixas sao estados do MESMO dinheiro ao longo do tempo, entao elas
   somam o orcamento — o que sobra a' direita e' o nao comprometido. Abrir a
   linha mostra os temas, que vem do pedido (ou do projeto dele). */
/* `.oi-legenda` e `.oi-lg` sairam com a legenda de cores da execucao por IFES:
   os valores debaixo de cada barra ja' trazem o quadradinho, o nome e o numero,
   e so' das faixas que aquela IFES tem. Regra sem quem a use e' folha que
   envelhece sem ninguem notar. */
.oi-num {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--color-text-mid, #6b6b6b);
}
.oi-pt { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.oi-pt-aprovado    { background: var(--oi-e1, #7FC8A9); }
.oi-pt-executado   { background: var(--oi-e2, #3E9C6D); }
.oi-pt-prestado    { background: var(--oi-e3, #1B5E20); }
.oi-pt-sem_prestar { background: var(--oi-e4, #D9822B); }
.oi-pt-livre {
    background: var(--oi-trilho, #EFEEEC);
    box-shadow: inset 0 0 0 1px var(--color-border, #dcdcdc);
}

.oi-ifes { border-bottom: 1px solid var(--color-border-light, #efefef); }
.oi-ifes:last-child { border-bottom: 0; }
.oi-ifes > summary {
    list-style: none; cursor: pointer; padding: 14px 0; display: grid; gap: 8px;
}
.oi-ifes > summary::-webkit-details-marker { display: none; }
.oi-ifes > summary:hover .oi-nome { color: var(--color-primary, #2E7D32); }
.oi-ifes > summary:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
    border-radius: 4px;
}
.oi-cab { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.oi-seta {
    flex: none; font-size: 13px; color: var(--color-text-muted, #9e9e9e);
    transition: transform .15s;
}
.oi-ifes[open] > summary .oi-seta { transform: rotate(90deg); }
.oi-nome { font-size: 14.5px; font-weight: var(--font-w-semibold, 600); }
.oi-papel {
    font-size: 10.5px; font-weight: var(--font-w-semibold, 600);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-text-muted, #9e9e9e);
}
.oi-total {
    margin-left: auto; font-size: 12.5px; color: var(--color-text-mid, #6b6b6b);
    font-variant-numeric: tabular-nums;
}
.oi-total b { color: var(--color-text, #1a1a1a); font-weight: var(--font-w-semibold, 600); }
.oi-sem-orc { font-style: italic; color: var(--color-text-muted, #9e9e9e); }

/* O vao de 2px entre as faixas e' o que as separa sem depender de cor: em
   impressao ou em daltonismo forte, a fronteira continua la'. */
.oi-barra {
    display: flex; gap: 2px; height: 20px;
    background: var(--oi-trilho, #EFEEEC);
    border-radius: 5px; overflow: hidden;
}
.oi-s { display: block; min-width: 2px; }
.oi-s:first-child { border-radius: 5px 0 0 5px; }
.oi-s:last-child  { border-radius: 0 5px 5px 0; }
.oi-s-aprovado  { background: var(--oi-e1, #7FC8A9); }
.oi-s-executado { background: var(--oi-e2, #3E9C6D); }
.oi-s-prestado  { background: var(--oi-e3, #1B5E20); }
/* Hachura no que falta prestar: a segunda marca, para quem nao separa a cor. */
.oi-s-sem_prestar {
    background: var(--oi-e4, #D9822B);
    background-image: repeating-linear-gradient(135deg,
        rgba(0, 0, 0, .22) 0 3px, transparent 3px 7px);
}

.oi-nums { display: flex; flex-wrap: wrap; gap: 3px 16px; padding-left: 22px; }
.oi-num b {
    color: var(--color-text, #1a1a1a); font-weight: var(--font-w-semibold, 600);
    font-variant-numeric: tabular-nums;
}
.oi-nada { font-style: italic; color: var(--color-text-muted, #9e9e9e); }

.oi-temas { padding: 2px 0 16px 22px; display: grid; gap: 11px; }
.oi-tema-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.oi-tema-nome { font-size: 12.5px; font-weight: var(--font-w-semibold, 600); }
.oi-tema-val {
    margin-left: auto; font-size: 11.5px; color: var(--color-text-mid, #6b6b6b);
    font-variant-numeric: tabular-nums;
}
.oi-temas .oi-barra { height: 13px; }
.oi-nota {
    margin: 4px 0 0; font-size: 11.5px; line-height: 1.5;
    color: var(--color-text-mid, #6b6b6b);
    display: flex; gap: 6px; align-items: baseline;
}
.oi-nota i { flex: none; font-size: 11px; }

@media (max-width: 700px) {
    .oi-total { margin-left: 0; flex-basis: 100%; }
    .oi-nums, .oi-temas { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .oi-seta { transition: none; } }

/* ── Plataforma ─────────────────────────────────────────────────────────
   Unica tela do sistema sem sidebar. Como nao ha' menu comendo largura, os
   1400px de `.tl-main` esticavam tres campos de ponta a ponta; 1080px e' a
   medida em que a tabela de quatro colunas ainda respira e o formulario
   continua parecendo formulario. */
.pl-main { max-width: 1080px; }

/* Conta e saida, no lugar onde as outras telas poem o alternador de tema.
   Sem isto quem entrava com a conta errada nao tinha como sair dela. */
.pl-conta { display: inline-flex; align-items: center; gap: var(--space-sm, 8px); min-width: 0; }
.pl-conta-email {
    font-size: 12px; color: var(--color-text-mid, #6b6b6b);
    max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-sair {
    display: inline-flex; align-items: center; gap: 5px; height: 30px;
    border: 1px solid var(--color-border, #dcdcdc); background: none; color: inherit;
    border-radius: var(--radius-md, 8px); padding: 0 10px;
    font-family: inherit; font-size: 12px; font-weight: var(--font-w-semibold, 600);
    cursor: pointer; white-space: nowrap;
    transition: border-color .12s, color .12s;
}
.pl-sair:hover { border-color: var(--color-primary, #2E7D32); color: var(--color-primary, #2E7D32); }
@media (max-width: 720px) { .pl-conta-email { display: none; } }

/* Marca + conta + tema em tela de telefone: a barra empurrava a página para a
   rolagem lateral. Some o e-mail (regra acima), aperta-se o resto.

   A marca NAO sai mais. Ela era dispensavel quando o titulo "Plataforma"
   ficava ao lado dizendo onde se estava; hoje e' o unico texto da esquerda —
   e, o que pesa mais, e' por onde se entra. Escondida no telefone, a tela
   ficava sem porta. */
@media (max-width: 600px) {
    .pl-body .top-navbar { padding: 0 14px; gap: 10px; }
    .pl-body .navbar-left { min-width: 0; }
    .pl-body .cgt-topbar-acoes { gap: 8px; padding-right: 0; }
}

/* `.mb-form label` e' grid, e o `<span class="mb-req">*</span>` e' filho dele:
   o asterisco caia numa linha so' dele, embaixo do rotulo, empurrando o campo
   para baixo. Aqui o rotulo volta ao fluxo normal — texto e asterisco na mesma
   linha, campo embaixo. Restrito a esta tela: os cadastros de membros usam a
   mesma regra e teriam de ser conferidos um a um. */
.pl-body .mb-form label { display: block; }
.pl-body .mb-form label > input,
.pl-body .mb-form label > select { display: block; width: 100%; margin-top: 3px; }

/* Campo de 560px numa pagina de 1080: um formulario de tres campos esticado de
   ponta a ponta le-se pior, e o par sigla/IES fica com o dobro do necessario. */
.pl-form-rede { max-width: 560px; }

/* ── Nova rede, recolhida ────────────────────────────────────────────────
   Criar rede e' a acao eventual; a lista e' o motivo de a tela existir. O
   recolhivel e' o `.fc-bloco` de teste.css, o mesmo dos outros formularios do
   sistema — aqui ele so' acerta o passo com o cartao da lista logo abaixo:
   mesmo raio, mesmo respiro, e o titulo no mesmo corpo do `.tb-cab-tit h3`,
   senao ficavam duas secoes empilhadas com dois tamanhos de titulo. */
.pl-nova { border-radius: 10px; margin-bottom: 18px; }
.pl-nova > summary { font-size: 15px; gap: 10px; }
/* Aberto, o cabecalho vira cabecalho: sem a divisoria, o primeiro rotulo do
   formulario encostava na barra e os dois liam como um bloco so'. */
.pl-nova[open] > summary { border-bottom: 1px solid var(--color-border-light, #efefef); }
/* `.fc-bloco` tem `overflow: hidden`: anel de foco para fora seria cortado
   pela propria borda arredondada, entao ele e' desenhado para dentro. */
.pl-nova > summary:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -2px;
}

/* Uma coluna. Havia duas — formulario e um painel que explicava o que
   acontecia depois de criar —, e o painel saiu junto com o resto do texto:
   quem opera esta tela e' uma pessoa so', e ela nao le' duas vezes o que ja'
   sabe. O que sobra e' o quadro do formulario, na medida de leitura. */
.pl-nova-corpo { padding: 18px; }

/* Dentro do bloco, o respiro separa os grupos — dentro de cada grupo os campos
   andam colados de proposito. Com o mesmo espaco em toda parte, os blocos liam
   como uma pilha de campos. */
.pl-nova-corpo .pl-form-rede { margin: 0; gap: 15px; }
.pl-nova-corpo .pl-form-rede .pl-grupo { margin-top: 0; }
/* A acao fecha o formulario, e nao e' mais um campo dele. */
.pl-form-rede .pl-rodape {
    margin-top: 1px; padding-top: 14px;
    border-top: 1px solid var(--color-border-light, #efefef);
}

/* Vigencia e' UM dado com duas pontas, e nao dois campos soltos. O nome do par
   fica em cima — tinta cheia, um degrau acima do cinza dos rotulos filhos, que
   e' o que diz quem e' pai de quem sem precisar de mais uma caixa. O aviso
   atravessa as duas colunas: pendurado so' na direita, ele deixava a base do
   formulario em pedacos. */
.pl-grupo { margin-top: 4px; }
.pl-grupo-rot {
    display: block; margin-bottom: 5px;
    font-size: 12px; font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
}
/* Com o mesmo respiro em cima e embaixo, o aviso boiava entre o grupo que ele
   descreve e o botao que nao tem nada com ele. Perto do grupo, longe da acao.

   E em `--color-text-mid`, nao no cinza de nota: esta frase diz que a rede para
   de abrir. `--color-text-muted` sobre o cartao branco da 2,6:1 — abaixo do
   minimo de 4,5:1, e nao e' texto decorativo que se possa deixar apagado. */
.pl-grupo .mb-nota { margin-top: 6px; color: var(--color-text-mid, #6b6b6b); }

/* O endereco e' a unica coisa da rede que nao muda depois de criada. Em vez de
   uma frase avisando disso, o campo mostra o que esta' sendo construido: o
   fixo e' fixo, e so' o miolo e' editavel. */
.pl-campo { display: grid; gap: 3px; }
.pl-url {
    display: flex; align-items: stretch; max-width: 520px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #fff);
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.pl-url:focus-within {
    border-color: var(--color-primary, #2E7D32);
    box-shadow: 0 0 0 3px var(--color-primary-light, #2E7D3212);
}
.pl-url-fixo {
    display: flex; align-items: center; padding: 0 9px;
    background: var(--color-bg-alt, #f3f3f1);
    color: var(--color-text-muted, #9e9e9e);
    font-size: 12.5px; white-space: nowrap; user-select: none;
}
.pl-url-fixo:first-child { border-right: 1px solid var(--color-border-light, #efefef); }
.pl-url-fixo:last-child  { border-left: 1px solid var(--color-border-light, #efefef); }
/* No escuro `html.darkmode input` pinta todo campo de #3C3C3C, e o miolo deste
   ficava mais escuro que os campos ao lado. Mesmo cinza, mesma relacao do
   claro: o fixo um tom abaixo do editavel. */
html.darkmode .pl-url { background: #3C3C3C; }
html.darkmode .pl-url-fixo { background: var(--color-surface-alt, #2D2D2D); }
.mb-form .pl-url input {
    flex: 1 1 auto; min-width: 7ch; width: 100%;
    border: none; border-radius: 0; background: none;
    text-transform: lowercase;
}
/* O anel de foco e' do grupo inteiro, senao ficariam dois retangulos. */
.mb-form .pl-url input:focus-visible { outline: none; }

/* Altura reservada: a linha nasce vazia e recebe erro ou confirmacao enquanto
   se digita. Sem o `min-height` o formulario inteiro pulava a cada tecla. */
.pl-dica {
    display: flex; align-items: center; gap: 5px;
    min-height: 17px; margin: 5px 0 0;
    font-size: 11.5px; line-height: 1.4;
    color: var(--color-text-muted, #9e9e9e);
}
.pl-dica i { font-size: 10px; flex: none; }
.pl-dica-erro { color: var(--color-negative, #c0392b); }
.pl-dica-ok { color: var(--color-text-mid, #6b6b6b); }

/* Identidade da rede: a sigla e' como se fala dela, o slug e' onde ela mora.
   Eram duas colunas estreitas; viraram uma celula de duas linhas. */
.pl-id { display: grid; gap: 1px; }
.pl-id-sigla { font-size: 13.5px; font-weight: var(--font-w-semibold, 600); }
.pl-id-slug {
    font-size: 11.5px; color: var(--color-text-muted, #9e9e9e);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pl-ca-lista { display: grid; gap: 2px; font-size: 12.5px; overflow-wrap: anywhere; }

/* Rede sem Comite Administrativo nao anda. Antes isso era uma frase vermelha
   dentro da celula; agora e' estado: etiqueta na coluna, faixa na linha e o
   botao que resolve em destaque. */
.pl-parada > td:first-child {
    box-shadow: inset 3px 0 0 var(--cgt-erro-fg, #C62828);
    padding-left: 14px;
}
.pl-acoes { white-space: nowrap; display: flex; gap: var(--space-sm, 8px); align-items: center; justify-content: flex-end; }
.pl-body .tb-btn.pl-btn-primario {
    background: var(--color-primary, #2E7D32);
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary-text, #fff);
}
.pl-body .tb-btn.pl-btn-primario:hover {
    background: var(--color-primary-hover, #1B5E20);
    border-color: var(--color-primary-hover, #1B5E20);
    color: var(--color-primary-text, #fff);
}

/* Cadastro do Comitê Administrativo embutido na linha da rede. */
.pl-form-linha > td {
    background: var(--color-bg-alt, #f3f3f1);
    padding: 14px 16px;
    box-shadow: inset 3px 0 0 var(--color-primary, #2E7D32);
}
.pl-form-ca { max-width: 560px; margin: 0; }
.pl-vazio-acao { margin-top: var(--space-sm, 8px); }
.pl-bloqueio { max-width: 640px; margin: 40px auto 0; }

/* Cabecalho de coluna que existe para o leitor de tela: a coluna de acoes nao
   leva rotulo visivel, mas uma tabela sem `th` preenchido e' um buraco. */
.cgt-so-leitor {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* No escuro o primario e' menta (#4EC9B0) e o texto continuava branco: 1,9:1,
   ilegivel. O portal ja' resolveu isto para `.btn-primario` em
   style-global.css — botao fantasma, tinta menta — e aqui e' a mesma solucao,
   nao uma cor nova.

   Era restrito a `.pl-body`, com a ressalva de que os cadastros de membros
   tinham o mesmo defeito "noutra passada". Esta e' a passada: com o cadastro
   manual, `.mb-btn-primario` passou a ser o botao Salvar de TODAS as telas, e
   deixar so' a plataforma legivel nao faz sentido nenhum. */
html.darkmode .mb-btn-primario,
html.darkmode .pl-body .tb-btn.pl-btn-primario {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--cgt-ok-borda);
}
html.darkmode .mb-btn-primario:hover,
html.darkmode .pl-body .tb-btn.pl-btn-primario:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* `html.darkmode a` pinta link de menta, e o "Abrir" e' <a> ao lado de um
   <button>: dois botoes iguais em forma, um menta e o outro cinza. */
html.darkmode .pl-body a.tb-btn { color: var(--color-text); }

/* Anel de foco visivel nos botoes. Restrito a esta tela: `.tb-btn` e `.mb-btn`
   valem no sistema inteiro, e mudanca de foco em tudo nao e' o pedido aqui. */
.pl-body .tb-btn:focus-visible,
.pl-body .mb-btn:focus-visible,
.pl-sair:focus-visible,
.cgt-tema-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}

.pl-cmd {
    display: inline-block; margin-top: 4px; padding: 3px 7px;
    background: var(--color-surface-alt, #eaeae8);
    border-radius: var(--radius-sm, 4px); font-size: 11.5px;
    color: var(--color-text, #1a1a1a);
}

/* Reenvio do convite: o cadastro nao se refaz por causa de e-mail perdido. */
.pl-ca { display: flex; align-items: baseline; gap: var(--space-sm, 8px); flex-wrap: wrap; }
.pl-reenviar {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 11px; color: var(--cgt-link, #1565C0); text-decoration: underline;
}
.pl-reenviar:hover { color: var(--color-primary, #2E7D32); }
.pl-reenviar:disabled { cursor: default; text-decoration: none; color: var(--color-text-muted, #9e9e9e); }
.pl-reenviar.pl-ok { color: var(--color-positive, #2E7D32); }

.mb-acoes-td { white-space: nowrap; display: flex; gap: var(--space-sm, 8px); }

/* `hidden` é atributo, não classe — e a regra de autor `display: grid` do
   .mb-linha vence a do navegador, deixando o bloco visível mesmo escondido
   pelo JS. Os campos de tema e projeto apareciam para Comitê Gestor e
   Administrativo por causa disto. */
.mb-linha[hidden], .mb-doc[hidden], [hidden] { display: none !important; }

/* Dependência não atendida: em vez de um seletor vazio, o motivo. */
.mb-vazio-dep {
    grid-column: 1 / -1;
    background: var(--cgt-alerta-bg, #FFF4E5); color: var(--cgt-alerta-fg, #B26A00);
    border: 1px solid var(--cgt-alerta-borda, #FFE0B2); border-radius: var(--radius-md, 8px);
    padding: 10px 13px; font-size: 12.5px; line-height: 1.55;
}
.mb-vazio-dep a { color: var(--cgt-alerta-fg, #B26A00); font-weight: var(--font-w-semibold, 600); }

/* ── Cadastro manual dentro do bloco ─────────────────────────────────────
   O botão fica na mesma barra do CSV/XLSX e usa a mesma `.tb-btn`: cadastrar
   é uma ação do bloco, como exportar, e não merece mais peso visual que elas.
   Só o ícone puxa a cor primária — o suficiente para a pessoa achar o botão
   sem que ele domine o cabeçalho. */
.tb-btn-cadastro i {
    font-size: 13px;
    line-height: 1;
    color: var(--uc-primary, #2E7D32);
}
.tb-btn-cadastro[aria-expanded="true"] {
    border-color: var(--uc-primary, #2E7D32);
    color: var(--uc-primary, #2E7D32);
    background: var(--color-primary-light);
}

/* O nome da ação já está no botão do cabeçalho.

   O painel abria com um SEGUNDO recolhível dentro — "Cadastrar parceria",
   com a bolinha verde de expandir —, a dois dedos do "+ Cadastrar" que
   acabara de ser clicado. E ele não era só repetição: parece o próximo passo,
   então se clica nele, e o clique FECHA o formulário que acabou de abrir.
   Dois cliques para chegar onde um bastava, e o segundo desfazendo o
   primeiro.

   Mesma correção que os blocos de implantação das Configurações levaram. O
   `<details>` continua ali, sempre aberto — quem abre e fecha é o botão. */
.tb-cadastro .fc-bloco > summary { display: none; }
.tb-cadastro .fc-bloco { border: none; margin-bottom: 0; }
.tb-cadastro .fc-bloco[open] { border: none; }
.tb-cadastro .fc-bloco > .fc-form { padding: 0; }

/* O painel abre entre o cabeçalho e a tabela, e não sobre ela: o formulário
   precisa da lista à vista para a pessoa conferir o que já existe antes de
   duplicar um registro. */
.tb-cadastro { margin: 10px 0 14px; }
.tb-cadastro[hidden] { display: none; }

/* O cabeçalho saiu do bloco que `desenhar()` reescreve, para o formulário de
   cadastro poder ficar entre ele e a tabela sem ser apagado a cada busca.
   É um invólucro, não um nível visual novo: nada de margem própria. */
.tb-cabecalho { display: contents; }

/* ── "Cadastrar membro": ação na barra, formulário na linha de baixo ─────
   Fechado, é só mais uma ação ao lado de CSV e XLSX, e não merece uma linha
   inteira. Aberto, deixou de ser botão e virou um formulário de oito campos:
   `flex-basis:100%` o empurra para a linha seguinte, ocupando a largura toda.
   `.tb-cab` já é flex com wrap — nada de layout novo. */
/* `.tb-cab` distribui com `space-between`, e o cabecalho dos membros passou a
   ter TRES filhos — titulo, acoes e o recolhivel. Com tres, o do meio ficaria
   solto no centro. Empurrando o titulo, os dois de acao voltam a andar juntos
   na direita. Para os cabecalhos de dois filhos isto nao muda nada: `auto` e
   `space-between` dao o mesmo resultado. */
.tb-cab > .tb-cab-tit { margin-right: auto; }

.mb-novo {
    border: none;
    margin: 0;
    background: none;
}
.mb-novo > summary {
    /* Mesma forma dos botões vizinhos, para a barra ficar num eixo só. */
    padding: 0 10px;
    height: 30px;
    font-size: 12px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 7px;
    background: var(--color-bg-card, #fff);
}
.mb-novo > summary::before {
    width: 16px;
    height: 16px;
    font-size: 12px;
}
.mb-novo[open] {
    flex-basis: 100%;
    order: 9;
    margin-top: 4px;
    border: 1px solid var(--color-primary, #2E7D32);
    border-radius: 12px;
    background: var(--color-background, #fff);
}
.mb-novo[open] > summary {
    border: none;
    background: none;
    height: auto;
    padding: 14px 18px;
    font-size: 14px;
}

/* ── Fila de suporte, na plataforma ──────────────────────────────────────
   Cada chamado é um cartão de três faixas: o que é e quando (topo), o relato
   (meio), e quem mandou, de onde, e a ação (pé). A ordem é a da leitura de
   quem tria: classificar, ler, decidir.

   Cartão e não linha de tabela: o relato é texto livre de até duas mil letras,
   e texto livre numa célula ou estoura a largura ou vira reticências — e um
   chamado com reticências obriga a abrir cada um para saber se importa. */
.pl-chamados { display: flex; flex-direction: column; gap: 10px; }

.pl-ch {
    padding: 13px 15px;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px;
    background: var(--color-bg-card, #fff);
}
/* Resolvido continua na lista e sai do primeiro plano — some seria fazer a
   pessoa procurar em outro lugar o que ela acabou de fechar. */
.pl-ch-feito { opacity: .58; }
.pl-ch-feito .pl-ch-texto { font-weight: 400; }

.pl-ch-topo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 9px;
}
.pl-ch-rede {
    font-size: 12px; font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
}
.pl-ch-papel, .pl-ch-quando {
    font-size: 11.5px; color: var(--color-text-muted, #8a8a8a);
}
/* A hora encosta na direita: é o campo que se lê em varredura vertical, e no
   meio da linha ela mudava de lugar a cada chamado. */
.pl-ch-quando { margin-left: auto; white-space: nowrap; }

/* `pre-wrap` guarda as quebras de linha de quem escreveu. Sem ele, um relato
   em três parágrafos chega à triagem como um bloco só, e a estrutura que a
   pessoa deu ao contar — o que fez, o que esperava, o que houve — se perde. */
.pl-ch-texto {
    margin: 0;
    font-size: 13px; line-height: 1.6;
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.pl-ch-pe {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--color-border-light, #efefef);
    font-size: 11.5px; color: var(--color-text-muted, #8a8a8a);
}
.pl-ch-quem { font-weight: var(--font-w-semibold, 600); color: var(--color-text-mid, #666); }
.pl-ch-url {
    padding: 2px 7px; border-radius: 5px;
    background: var(--color-bg-alt, #f4f4f4);
    font-size: 11px; overflow-wrap: anywhere;
}
html.darkmode .pl-ch-url { background: var(--color-surface-alt, #2D2D2D); }
.pl-ch-btn { margin-left: auto; }

/* ── A resposta a quem abriu ─────────────────────────────────────────────
   O suporte era mão única: o chamado chegava, era lido, era fechado — e quem
   escreveu nunca soube. Estas duas peças são a volta. Em cima, o que já foi
   respondido, que fica no cartão; embaixo, o campo onde se responde.

   Filete à esquerda, e não caixa colorida: é o mesmo recurso do e-mail
   (`destaque` em notificar.ts) e da linha de rede sem comitê — marcar a
   margem de um trecho sem transformá-lo num aviso de aplicativo. */
.pl-ch-resposta {
    margin: 11px 0 0;
    padding: 9px 0 9px 12px;
    border-left: 3px solid var(--color-primary, #2E7D32);
    font-size: 13px; line-height: 1.6;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Rótulo de sistema: sans, corpo pequeno, caixa alta. Ele nomeia o trecho, não
   continua a leitura — e sem essa separação a resposta se lia como parte do
   relato de quem abriu, que é exatamente o contrário do que ela é. */
.pl-ch-rot {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px; font-weight: var(--font-w-semibold, 600);
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--color-text-muted, #8a8a8a);
}
.pl-ch-rot span { font-weight: 400; text-transform: none; letter-spacing: 0; }

.pl-ch-resolver {
    margin-top: 12px;
    padding: 12px 13px;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 9px;
    background: var(--color-bg-alt, #f4f4f4);
}
html.darkmode .pl-ch-resolver { background: var(--color-surface-alt, #2D2D2D); }

.pl-ch-campo {
    display: block; width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 7px;
    background: var(--color-bg-card, #fff);
    color: inherit;
    font: inherit; font-size: 13px; line-height: 1.55;
    /* Só na vertical: horizontal quebraria a largura do cartão, e a resposta
       cabe crescendo para baixo. */
    resize: vertical;
}
.pl-ch-campo:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32);
    outline-offset: 1px;
}

/* Para quem vai, com nome e endereço. O texto deste campo não é rascunho de
   e-mail: ele já é o e-mail, e quem escreve tem de saber disso antes de
   clicar — não depois. */
.pl-ch-dica {
    margin: 8px 0 0;
    font-size: 11.5px; line-height: 1.55;
    color: var(--color-text-muted, #8a8a8a);
}
.pl-ch-dica strong { color: var(--color-text-mid, #666); }

.pl-ch-acoes {
    display: flex; flex-wrap: wrap; gap: var(--space-sm, 8px);
    margin-top: 11px;
}

/* "Aviso a caminho" / "avisado em ...", no pé do cartão que acabou de ser
   fechado — e não no alto da página. A fila de suporte é a última seção da
   tela: uma confirmação lá em cima nasceria fora do campo de visão de quem
   clicou aqui embaixo. */
.pl-ch-avisado {
    color: var(--color-primary, #2E7D32);
    font-weight: var(--font-w-semibold, 600);
    white-space: nowrap;
}

/* O filtro em vigor não é um botão a mais na barra: é o estado em que a lista
   está. Sem a marca, os dois pareciam duas ações e ninguém sabia o que estava
   vendo. */
.pl-ch-ativo {
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary, #2E7D32);
    background: var(--color-primary-light);
}
/* Teto dito, e não silencioso: uma lista cortada que não avisa que cortou se
   lê como a lista inteira. */
.pl-ch-teto {
    margin: 12px 0 0;
    font-size: 11.5px; color: var(--color-text-muted, #8a8a8a);
}

@media (max-width: 560px) {
    .pl-ch-quando { margin-left: 0; }
    .pl-ch-btn { margin-left: 0; width: 100%; }
    .pl-ch-acoes .tb-btn { flex: 1 1 100%; }
}

/* ── Campo de dinheiro ───────────────────────────────────────────────────
   O `R$` fica DENTRO da moldura do campo, e não como rótulo ao lado: é a
   unidade do que se digita, não o nome do que se pede. Fora dela, some da
   vista justamente na hora de conferir o número. */
.fc-moeda {
    display: flex; align-items: stretch;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg, #fff);
    overflow: hidden;
}
.fc-moeda:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.fc-moeda-simbolo {
    display: flex; align-items: center; padding: 0 10px;
    background: var(--color-surface-alt); color: var(--color-text-mid);
    font-size: 12.5px; font-weight: var(--font-w-semibold, 600);
    border-right: 1px solid var(--color-border-light);
}
.fc-moeda-campo {
    flex: 1; min-width: 0; border: none !important;
    background: transparent !important; box-shadow: none !important;
    text-align: right; font-variant-numeric: tabular-nums;
}

/* O filtro em vigor não é mais um botão na barra: é o estado em que a lista
   está. Sem a marca, "Todos / Até 2025 / De 2026" leem como três ações
   possíveis, e ninguém sabe qual delas está valendo. Mesma marcação da fila de
   suporte da plataforma, que resolve o mesmo problema. */
.tb-btn-ativo {
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary, #2E7D32);
    background: var(--color-primary-light);
}

/* ── Orçamento: a razão do exercício ────────────────────────────────────
   Cinco cartões iguais afirmavam cinco medidas irmãs, e não eram: o aprovado
   é o TODO, reservado + executado + disponível o particiona, e o que falta
   prestar é uma fatia de DENTRO do executado — `saldoDosPedidos` soma o mesmo
   valor nos dois, de propósito.

   A primeira correção disse isso por escrito, em 21px, e trocou um defeito por
   outro: virou texto para LER numa página cujo resto se bate o olho. Aqui a
   contenção é estrutural — recuo e fio de ligação — e o texto volta ao tamanho
   de quem trabalha nesta tela todo dia. */
.orc-razao { padding: 18px 20px 16px; }

.orc-rz-topo {
    display: flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e3e3e3);
}
.orc-rz-tit {
    margin: 0; font-size: 14px;
    font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
}
/* O recorte fica ao lado do título, e não numa linha própria: como olho
   separado ele repetia, a 8px de distância, o que o seletor do canto superior
   direito já dizia. */
.orc-rz-recorte { font-size: 12px; color: var(--color-text-mid, #6b6b6b); }
.orc-rz-teto {
    margin-left: auto; font-size: 20px;
    font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
    font-variant-numeric: tabular-nums;
}

/* Três colunas: rótulo, proporção, valor. A do valor é a que faz o trabalho —
   alinhada à direita e com algarismo de largura fixa, ela põe R$ 20.000.000,00
   e R$ 2.400,00 na mesma régua de leitura, e a diferença de ordem de grandeza
   aparece no comprimento sem que nada precise gritar. */
.orc-rz-linhas { margin: 4px 0 0; }
.orc-rz-linha {
    display: grid;
    grid-template-columns: 1fr auto minmax(9.5em, auto);
    align-items: baseline;
    gap: 4px 14px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--color-text-mid, #6b6b6b);
}
.orc-rz-linha + .orc-rz-linha { border-top: 1px solid var(--color-border-soft, #f0f0f0); }
.orc-rz-rot { min-width: 0; }
.orc-rz-pct {
    font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--color-text-mid, #6b6b6b);
    white-space: nowrap;
}
.orc-rz-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
    white-space: nowrap;
}

/* As duas linhas que particionam o teto pesam mais que as que as detalham. */
.orc-rz-forte .orc-rz-rot {
    font-weight: var(--font-w-semibold, 600);
    color: var(--color-text, #1a1a1a);
}
.orc-rz-forte .orc-rz-val { font-size: 15px; }

/* O RECUO É O ARGUMENTO. Um filho recuado sob o pai, com o fio ligando os
   dois, não se soma ao pai — e era exatamente essa soma (15.600 + 28.600 =
   44.200, que não é dinheiro nenhum) que cinco caixas lado a lado convidavam
   a fazer. O fio é `border-left`, logo sobrevive ao modo de alto contraste. */
.orc-rz-filho { padding-left: 20px; position: relative; }
.orc-rz-filho::before {
    content: ""; position: absolute;
    left: 7px; top: 0; bottom: 0;
    border-left: 1px solid var(--color-border, #e3e3e3);
}
.orc-rz-filho .orc-rz-val { font-weight: var(--font-w-regular, 400); }
/* Segundo nível: o que falta prestar é filho do EXECUTADO, e não irmão dele.
   Um recuo só poria os dois lado a lado e a soma voltaria a parecer possível. */
.orc-rz-neto { padding-left: 40px; }
.orc-rz-neto::before { left: 27px; }

/* A única cor da faixa, na única linha que pede alguém. Filete e ícone, e não
   preenchimento: a sub-fatia não pode gritar mais alto que o pai. O texto sai
   em tinta normal — o âmbar sobre fundo claro fica abaixo de AA para texto, e
   por isso ele só pinta objeto gráfico, onde 3:1 basta. Nada aqui depende de
   cor: a linha diz "sem prestar contas" com todas as letras. */
.orc-rz-alerta { text-decoration: none; }
.orc-rz-alerta::before { border-left-color: var(--cgt-alerta-fg, #B26A00); border-left-width: 2px; }
.orc-rz-alerta .orc-rz-rot { color: var(--color-text, #1a1a1a); }
.orc-rz-alerta .orc-rz-ic { color: var(--cgt-alerta-fg, #B26A00); margin-right: 6px; font-size: 11px; }
.orc-rz-alerta .orc-rz-ir { margin-left: 6px; color: var(--color-text-mid, #6b6b6b); font-size: 12px; }
.orc-rz-alerta:hover .orc-rz-rot,
.orc-rz-alerta:focus-visible .orc-rz-rot {
    text-decoration: underline; text-underline-offset: 3px;
}
.orc-rz-alerta:focus-visible {
    outline: 2px solid var(--color-text, #1a1a1a); outline-offset: 2px;
}

.orc-rz-neg .orc-rz-val, .orc-rz-neg .orc-rz-pct { color: var(--color-negative, #c0392b); }

/* Uma linha só, e só quando ela tem hora a marcar: o teto é anual, e o que
   sobra em 31/12 não migra. Em "todos os exercícios" não há data, e a linha
   some por :empty em vez de dizer meia verdade. */
.orc-rz-prazo {
    margin: 12px 0 0; font-size: 12px; line-height: 1.5;
    color: var(--color-text-mid, #6b6b6b);
}
.orc-rz-prazo:empty { display: none; }
.orc-rz-vazio:empty { display: none; }

#orc-ifes { scroll-margin-top: 16px; }

@media (max-width: 620px) {
    .orc-rz-linha { grid-template-columns: 1fr auto; }
    /* A proporção passa para baixo do rótulo em vez de espremer o valor. */
    .orc-rz-pct { grid-column: 1; grid-row: 2; }
    .orc-rz-val { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .orc-rz-teto { margin-left: 0; }
}

/* ---------- Configurações · painel de orçamento ----------
   Um envelope por origem: o total em cima, o rateio embaixo, e a faixa que
   diz quanto ainda não tem destino. Ver `montarPainelOrcamento`. */

.cf-orc { gap: var(--space-md, 16px); }
.cf-orc-envelopes { display: grid; gap: var(--space-md, 16px); }

/* `fieldset` porque cada envelope É um grupo de campos, e o `<legend>` dá a
   ele um nome que o leitor de tela anuncia ao entrar. A folha zera a moldura
   nativa, que vem com borda dupla e recuo próprio. */
.cf-orc-env {
    position: relative;
    margin: 0; padding: 14px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-card, #fff);
    display: grid; gap: var(--space-sm, 8px);
}
.cf-orc-legenda {
    padding: 0 6px; margin-left: -6px;
    font-size: 11px; font-weight: var(--font-w-bold, 700);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-primary);
}
/* A segunda fonte em diante é dinheiro de fora do repasse, e a cor diz isso
   antes da leitura: o dourado institucional, que nesta tela não aparece em
   mais nada. */
.cf-orc-env:not(:first-child) { border-left-color: var(--color-accent, #CCB87A); }
.cf-orc-env:not(:first-child) .cf-orc-legenda { color: var(--color-text-mid); }

.cf-orc-cab {
    display: grid; gap: var(--space-sm, 8px);
    grid-template-columns: 110px minmax(0, 1.6fr) minmax(0, 1fr) 160px;
    align-items: end;
}
.cf-orc-opt {
    font-weight: var(--font-w-regular, 400);
    color: var(--color-text-muted, #9e9e9e); font-size: 11px;
}

/* O total é o número que ancora o resto, e tem corpo de número que ancora. */
.cf-orc-cab .cf-orc-total { font-size: 16px; font-weight: var(--font-w-semibold, 600); }

/* Quatro colunas e um botão não cabem no celular sem rolar. Rola a TABELA,
   e não a página: o corpo do documento nunca anda de lado. */
.cf-orc-rolagem { overflow-x: auto; }
.cf-orc-tabela { width: 100%; min-width: 660px; border-collapse: collapse; }
.cf-orc-tabela th {
    text-align: left; padding: 0 6px 5px;
    font-size: 10.5px; font-weight: var(--font-w-bold, 700);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-muted, #9e9e9e); white-space: nowrap;
}
.cf-orc-tabela th:first-child, .cf-orc-tabela td:first-child { padding-left: 0; }
.cf-orc-tabela th.cf-orc-th-valor { text-align: right; }
.cf-orc-tabela td { padding: 3px 6px; vertical-align: middle; }
.cf-orc-tabela td:first-child { width: 150px; }
/* O ano e' quatro digitos, e uma coluna de select nao precisa de mais. */
.cf-orc-tabela td:nth-child(2) { width: 92px; }
.cf-orc-tabela td:last-child { width: 34px; padding-right: 0; }

/* Linha com gasto lancado nao tem botao de tirar — tem cadeado. Apagar a
   dotacao deixaria as despesas dela apontando para um documento que nao
   existe. O `title` do <span> diz onde se altera. */
.cf-orc-travada {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    color: var(--color-text-muted, #9e9e9e); cursor: help;
}
.cf-orc-tabela select { width: 100%; }

.cf-orc-x {
    display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid transparent; border-radius: var(--radius-sm, 4px);
    background: none; color: var(--color-text-muted, #9e9e9e);
    cursor: pointer; line-height: 1;
}
.cf-orc-x:hover {
    color: var(--color-negative, #c0392b);
    border-color: var(--color-border, #dcdcdc);
}
.cf-orc-x-env { position: absolute; top: 8px; right: 8px; }

.cf-orc-mais {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--color-border, #dcdcdc);
    border-radius: var(--radius-sm, 4px);
    background: none; color: var(--color-text-mid, #6b6b6b);
    font-size: 12.5px; font-weight: var(--font-w-medium, 500);
    cursor: pointer;
}
.cf-orc-mais:hover {
    border-style: solid; border-color: var(--color-primary);
    color: var(--color-primary);
}
.cf-orc-mais-fonte { justify-self: start; }

/* A conferência. Some quando não há o que conferir (`:empty`) — uma faixa
   dizendo "distribuído R$ 0,00" num formulário em branco é ruído, e ocupa a
   linha que o primeiro campo deveria ter. */
.cf-orc-confere {
    margin: 0; padding: 9px 11px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface, #f3f3f1);
    border: 1px solid var(--color-border-light, #efefef);
    font-size: 12.5px; color: var(--color-text-mid, #6b6b6b);
    font-variant-numeric: tabular-nums;
}
.cf-orc-confere:empty { display: none; }
/* Passar do total AVISA, e não impede. Âmbar, e não vermelho: vermelho é a
   cor do que falhou, e aqui nada falhou — o salvamento segue. */
.cf-orc-passou {
    background: var(--cgt-alerta-bg, #FFF4E5);
    border-color: var(--cgt-alerta-borda, #FFE0B2);
    color: var(--cgt-alerta-fg, #B26A00);
}

@media (max-width: 860px) {
    .cf-orc-cab { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .cf-orc-cab { grid-template-columns: 1fr; }
}