/* teste.css — complementos do ambiente de teste.
   Tudo o mais vem de /assets/css/capes-global.css e dos CSS por modulo, que
   sao reaproveitados sem copia. Aqui ficam so os elementos que nao existem no
   original: badge de ambiente, botao de tema (substitui o avatar) e os estados
   vazio/carregando, que no original nao eram necessarios porque o dado vinha
   embutido no proprio JS. */

/* ── Ponte de tokens ────────────────────────────────────────────────────
   `telas.css`, `relatorios.css` e o `plano-acao.css` que reaproveitamos
   escrevem `--color-bg-card`, `--uc-primary`, `--color-text-secondary` e
   companhia. Nenhum desses nomes existe em style-global.css: `--uc-primary`
   so' e' definido em rede.css (a cor de cada rede), que estas paginas nao
   carregam, e os outros nao existem em lugar nenhum.

   Resultado: toda regra caia no literal do fallback. No claro passava — o
   literal era branco e cinza, parecido com o token. No escuro nao: o cartao
   ficava #fff sobre o fundo #1E1E1E, e o verde #2E7D32 sobre preto da' 3,2:1,
   abaixo do minimo de 4,5:1.

   Aqui os nomes viram apelido dos tokens reais. Os valores claros repetem os
   fallbacks que ja' vigoravam, entao o modo claro nao muda; o escuro passa a
   existir. Nenhuma cor nova: tudo aponta para style-global.css.

   Fica nesta folha, e nao em style-global.css, porque so' o /teste carrega
   teste.css — as telas de producao que usam os mesmos nomes seguem como
   estao, sem risco de mudarem de aparencia por tabela. */
:root {
    --color-bg-card:              #ffffff;
    --color-bg-alt:               var(--color-surface);
    --uc-primary:                 var(--color-primary);
    --color-text-secondary:       var(--color-text-mid);
    --color-text-high:            var(--color-text);
    --color-background:           var(--color-bg-card);
    --color-background-secondary: var(--color-surface);
    --color-background-info:      #E3F2FD;
    --color-text-info:            #1565C0;
    --color-background-warning:   #FFF8E1;
    --color-text-warning:         #6d4c00;

    /* Tinta de estado. As telas repetiam estes seis literais em cada folha;
       agora sao um nome so', com par escuro logo abaixo. */
    --cgt-ok-bg:      #E8F5E9;  --cgt-ok-fg:      #2E7D32;
    --cgt-alerta-bg:  #FFF4E5;  --cgt-alerta-fg:  #B26A00;
    --cgt-erro-bg:    #FDECEA;  --cgt-erro-fg:    #C62828;
    --cgt-neutro-bg:  #EEF1F4;  --cgt-neutro-fg:  #555555;
    --cgt-ok-borda:     #C8E6C9;
    --cgt-alerta-borda: #FFE0B2;
    --cgt-erro-borda:   #F5C6C2;

    /* Link dentro de tabela. */
    --cgt-link: #1565C0;

    /* Funil do orcamento por IFES. As etapas sao uma SEQUENCIA — aprovado,
       executado, prestado —, entao a cor caminha de claro para escuro conforme
       o dinheiro anda; nao sao tres cores avulsas.

       O que falta prestar e' AMBAR, e nao vermelho, por medida e nao por gosto:
       vermelho escuro contra verde escuro da' 2,0 de separacao em protanopia,
       ou seja, some para quem nao distingue vermelho de verde — justamente o
       par que mais importa nesta tela. Em ambar a separacao vai a 14,9. O
       vermelho continua existindo, na etiqueta, que tem icone e texto e nao
       depende de cor. */
    --oi-e1: #7FC8A9;   /* pedido e aprovado  */
    --oi-e2: #3E9C6D;   /* executado          */
    --oi-e3: #1B5E20;   /* prestado contas    */
    --oi-e4: #D9822B;   /* sem prestar contas */
    --oi-trilho: #EFEEEC;
}

html.darkmode {
    --color-bg-card:              var(--color-surface);
    --color-bg-alt:               var(--color-surface-alt);
    --color-background-info:      rgba(78, 201, 176, 0.12);
    --color-text-info:            var(--color-info);
    --color-background-warning:   rgba(204, 167, 0, 0.12);
    --color-text-warning:         var(--color-warning);

    /* Fundo esmaecido + texto vivo, como o resto do escuro do portal ja' faz
       com .badge-green / .alert-warning em style-global.css. */
    --cgt-ok-bg:      rgba(78, 201, 176, 0.14);  --cgt-ok-fg:      #4EC9B0;
    --cgt-alerta-bg:  rgba(204, 167, 0, 0.14);   --cgt-alerta-fg:  #CCA700;
    --cgt-erro-bg:    rgba(244, 135, 113, 0.14); --cgt-erro-fg:    #F48771;
    /* #3C3C3C, e nao --color-surface-alt: sobre o cartao (#252526) a diferenca
       de 8 pontos some, e a etiqueta "não" virava texto solto no meio das
       outras, que tem cor. E o mesmo cinza dos campos de formulario no escuro
       (style-global.css), entao nao e' tom novo. */
    --cgt-neutro-bg:  #3C3C3C;  --cgt-neutro-fg:  #B0B0B0;
    --cgt-ok-borda:     rgba(78, 201, 176, 0.30);
    --cgt-alerta-borda: rgba(204, 167, 0, 0.30);
    --cgt-erro-borda:   rgba(244, 135, 113, 0.30);

    /* O azul do claro nao sobrevive ao fundo escuro (2,1:1). O portal ja'
       resolveu isto em style-global.css — `html.darkmode a` e' menta. */
    --cgt-link: var(--color-primary);

    /* Degraus proprios, e nao os do claro clareados: sobre #252526 o verde
       escuro do claro da' 1,95:1 de contraste e a faixa some no cartao. Estes
       quatro foram validados contra a superficie escura — separacao 15,2 em
       protanopia e contraste acima de 3:1 nos quatro. */
    --oi-e1: #BFEAD5;
    --oi-e2: #4FB183;
    --oi-e3: #2A8055;
    --oi-e4: #E8A33D;
    --oi-trilho: #303031;
}

.cgt-topbar-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-right: 16px;
}

/* O lado esquerdo do topbar nao encolhe por padrao — `.navbar-left` e'
   `flex-shrink: 0` em style-global.css, herdado de uma barra que so' tinha
   logos. Com sigla da rede, titulo da tela e, em Pedidos, o escopo, a barra
   transbordava em tela estreita em vez de aparar o texto; o `text-overflow`
   do titulo nunca chegava a agir, porque o pai nao cedia largura. Mesmo
   ajuste que o PDPG 38 ja' faz pelo mesmo motivo. */
.top-navbar .navbar-left { min-width: 0; flex-shrink: 1; }

/* Identidade da rede, onde antes ficavam as logos institucionais.
   Cada rede e' de uma universidade diferente: as logos da UFG no cabecalho de
   outra seriam erro de fato. Ocupa o mesmo lugar e a mesma altura, entao a
   barra nao muda de forma. */
.cgt-rede-id {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.cgt-rede-sigla {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-primary, #2E7D32);
    white-space: nowrap;
}
.cgt-rede-nome {
    font-size: 12.5px;
    color: var(--color-text-muted, #6b6b6b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34ch;
}
/* Em tela estreita o titulo da pagina e' que tem de sobrar. */
@media (max-width: 860px) {
    .cgt-rede-nome { display: none; }
}

/* ── Escopo dos dados, ao lado da identidade da rede ─────────────────────────
   Só quem coordena tem esta escolha, e a tela abre estreitada na própria IES.
   Fica na ESQUERDA, encostado na sigla da rede, porque diz de que recorte são
   os números — não é preferência de quem olha, como idioma e tema, que moram
   do outro lado. Contorno neutro e não o verde do sistema, pelo mesmo motivo
   que o seletor de idioma: verde no topo é a cor de "você está aqui", e um
   controle verde ao lado da sigla leria como estado da navegação. */
.cgt-escopo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 30px;
    margin-left: 10px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-text-muted, #6b6b6b);
}
/* O `hidden` do HTML precisa vencer o `display` da classe: o seletor nasce
   escondido e só aparece quando o vínculo diz que há escolha a oferecer. */
.cgt-escopo[hidden] { display: none; }
.cgt-escopo:hover { border-color: var(--color-primary, #2E7D32); }
.cgt-escopo > i { font-size: 13px; line-height: 1; }
.cgt-escopo-sel {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    max-width: 20ch;
}
.cgt-escopo-sel:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32);
    outline-offset: 2px;
    border-radius: 4px;
}
html.darkmode .cgt-escopo-sel { color: var(--color-text, #e8e8e8); }
/* O menu aberto é pintado pelo sistema operacional, que não lê o nosso tema:
   sem isto, no escuro ele sai branco sobre branco em parte dos navegadores. */
html.darkmode .cgt-escopo-sel option { background: #252526; color: #e8e8e8; }

/* Em tela estreita a topbar aperta e o título da página é que tem de sobrar.
   Some o ícone, fica o seletor — que é o que informa e o que se opera. */
@media (max-width: 620px) {
    .cgt-escopo { margin-left: 6px; padding: 0 4px 0 6px; }
    .cgt-escopo > i { display: none; }
}


.cgt-tema-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--color-text-mid, #666);
}
.cgt-tema-btn:hover { background: var(--color-bg-alt, #f1f1f1); }
html.darkmode .cgt-tema-btn:hover { background: #2D2D2D; }

/* ── Conta no cabecalho ─────────────────────────────────────────────────
   O circulo, o menu e a sombra sao `.navbar-avatar*` de style-global.css — o
   mesmo componente do portal admin, nao uma copia. Daqui e' so' o que ele nao
   tinha: a foto da pessoa por cima das iniciais.

   As iniciais ficam por baixo, sempre. Quem entra por link de e-mail nao tem
   foto nenhuma (e e' boa parte dos membros das IES associadas), e a URL do
   Google as vezes devolve 403 — nos dois casos o que aparece e' o circulo com
   as iniciais, que e' o padrao do portal, e nao um vazio. */
.cgt-avatar-wrap { margin-left: 4px; }

/* ── Sino ────────────────────────────────────────────────────────────────
   O servidor gravava aviso in-app desde sempre e ninguem nunca viu um: iam
   para fora da rede, onde nem o dono podia ler. Esta e' a tela que faltava.
   Reusa a linguagem do avatar ao lado — mesmo tamanho de alvo, mesmo painel
   flutuante — para nao inventar um terceiro componente no cabecalho. */
.cgt-sino-wrap { position: relative; display: flex; }

.cgt-sino {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.cgt-sino:hover { background: rgba(127, 127, 127, .16); }
.cgt-sino:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* O contador nao usa vermelho: no resto do sistema vermelho e' erro e prazo
   vencido, e um aviso comum nao e' nenhum dos dois. */
.cgt-sino-contador {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #2E7D32;
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    pointer-events: none;
}

.cgt-sino-painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
    background: var(--cor-superficie, #fff);
    border: 1px solid var(--cor-borda, #e2e5e2);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
    z-index: 60;
}

.cgt-sino-topo {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cor-borda, #e2e5e2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

.cgt-sino-item {
    display: grid;
    gap: 2px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cor-borda, #e2e5e2);
    color: inherit;
    text-decoration: none;
}
.cgt-sino-item:last-child { border-bottom: none; }
.cgt-sino-item:hover { background: rgba(127, 127, 127, .09); }

/* Nao lido se distingue por peso e por uma marca a esquerda, nao so' por cor:
   a diferenca precisa sobreviver a quem nao distingue as duas tintas. */
.cgt-sino-item.nao-lido {
    border-left: 3px solid #2E7D32;
    padding-left: 11px;
    font-weight: 600;
}

.cgt-sino-titulo { font-size: 13px; }
.cgt-sino-msg { font-size: 12px; opacity: .78; font-weight: 400; }
.cgt-sino-quando { font-size: 10.5px; opacity: .6; font-weight: 400; }

.cgt-sino-vazio {
    margin: 0;
    padding: 22px 14px;
    text-align: center;
    font-size: 12.5px;
    opacity: .65;
}
.navbar-avatar { position: relative; overflow: hidden; }
.cgt-avatar-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    display: block;
}

/* ── Tema, no pe' da sidebar ────────────────────────────────────────────
   Estava no topbar, ao lado do badge de ambiente, entre coisas do sistema.
   Nao e' acao da pagina, e' preferencia de quem usa. `margin-top: auto`
   prende no pe' da barra, que ja' e' coluna flex. */
.cg-nav-rodape {
    margin-top: auto;
    /* A lista de itens e' mais alta que a tela em janela baixa, e ai' o
       `margin-top: auto` nao tem folga para empurrar nada: o botao ia parar
       abaixo da dobra da barra, so' alcancavel rolando. Grudado no pe' do
       proprio container de rolagem, ele esta' sempre a vista, e os itens
       passam por baixo. `inherit` pega a tinta da barra em qualquer tema. */
    position: sticky;
    bottom: -16px;              /* anula o padding de baixo da .cg-nav */
    background: inherit;
    padding-bottom: 16px;
}
.cg-nav-rodape .cg-nav-sep { margin-bottom: 4px; }

/* ── Seletor de idioma, na topbar ────────────────────────────────────────────
   À esquerda do sino de avisos. A tinta é a da própria barra, não o verde do
   sistema: no topo o verde é a cor de "você está aqui" da navegação, e um botão
   verde ao lado do sino leria como estado, não como controle. */
.cgt-idioma .qg-idioma-btn {
    height: 34px;
    gap: 7px;
    padding: 0 11px;
    color: var(--color-text, #1a1a1a);
    background: transparent;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-pill, 999px);
    font-size: 12px;
}
.cgt-idioma .qg-idioma-btn:hover {
    background: var(--color-surface-alt, rgba(127, 127, 127, 0.1));
    border-color: var(--color-primary, #2E7D32);
}
html.darkmode .cgt-idioma .qg-idioma-btn { color: var(--color-text, #e8e8e8); }

/* Em tela estreita a topbar aperta: fica a bandeira, some a sigla. A bandeira
   sozinha não diz qual espanhol, mas o nome acessível continua dizendo — e o
   menu, aberto, mostra os três por extenso. */
@media (max-width: 620px) {
    .cgt-idioma .qg-idioma-btn { padding: 0 8px; gap: 0; }
    .cgt-idioma .qg-idioma-sigla { display: none; }
}

/* Assinatura de quem fez e administra, no pe' de toda tela — o mesmo par que
   fecha todo e-mail do sistema. Discreta de proposito: nao disputa atencao com
   a navegacao, mas o endereco de suporte nunca precisa ser cacado. */
.cg-nav-assinatura {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--color-text-mid, #6b7280);
}
.cg-nav-assinatura a {
    color: inherit;
    text-decoration: none;
    /* O endereco e' mais largo que a barra em janela estreita; deixar quebrar
       mantem as duas metades legiveis em vez de estourar a coluna. */
    overflow-wrap: anywhere;
}
.cg-nav-assinatura a:hover { text-decoration: underline; }
.cg-nav-tema {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
/* Com a barra aberta os itens escondem o icone e mostram so' o rotulo — o
   nome basta para saber aonde se vai. Aqui nao: o icone E' o estado, lua no
   claro e sol no escuro, e e' o que o pedido queria ver mudar. */
.cg-nav-link.cg-nav-tema i { display: inline-block; }

/* Peça que a versão ainda não tem — não é estado vazio, e por isso não usa a
   moldura tracejada do vazio. Uma linha discreta, para o que está ausente por
   construção não se confundir com o que está ausente por falta de dado. */
.cgt-nota-indisponivel {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--color-text-muted, #9e9e9e);
}
.cgt-nota-indisponivel i { font-size: 13px; opacity: .7; }

/* ── Estado vazio ───────────────────────────────────────────── */
.cgt-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border: 1px dashed var(--color-border, #d6d6d6);
    border-radius: 10px;
    padding: 30px 22px;
    text-align: center;
    color: var(--color-text-mid, #666);
    font-size: 13.5px;
    line-height: 1.6;
}
.cgt-vazio i {
    font-size: 22px;
    opacity: .5;
    margin-bottom: 2px;
}
.cgt-vazio strong {
    color: var(--color-text-high, #1a1a1a);
    font-weight: 600;
    font-size: 14px;
}
html.darkmode .cgt-vazio strong { color: #D4D4D4; }
.cgt-vazio code {
    background: var(--color-bg-alt, #f1f1f1);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}
html.darkmode .cgt-vazio code { background: #2D2D2D; }

/* Coleção vazia de verdade — o quinto motivo, e o único que não é problema.
   Uma linha, e não a moldura tracejada acima: uma dimensão abre com até cinco
   blocos por preencher, e cinco cartões seguidos dizem "alarme" sobre o que é
   só o começo do preenchimento. O peso do cartão fica para os quatro motivos
   que precisam parar quem lê. */
.cgt-sem-registro {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 10px 2px 4px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-text-muted, #9e9e9e);
}
.cgt-sem-registro i { font-size: 12px; opacity: .7; }
/* Dentro de célula, a linha herda o respiro da própria tabela. */
td > .cgt-sem-registro, th > .cgt-sem-registro { padding: 12px 10px; }

/* ── Pedidos: o que a folha portada ainda puxa para o outro lado ─────
   `capes-pedidos.css` e' compartilhada com a tela de producao
   (/privado/projetos/capes-global/capes-pedidos/), entao nao se mexe nela: o
   que e' da rede se corrige aqui, que so' as telas de rede carregam. */

/* Largura. `body.has-cg-sidebar > main` zera o max-width para os paineis
   encherem monitor grande — numa lista de pedidos isso poe o valor a meia tela
   do nome de quem pediu. Mesma medida da tela de Configuracoes. */
body.has-cg-sidebar > main.cp-main {
    max-width: 1180px;
    /* A folha portada reserva `margin-left: 210px` para a barra de filtros que
       nao existe mais. Sem isto o conteudo continua deslocado, agora contra
       nada — e a coluna deixa de estar centrada no espaco util. */
    margin-left: auto;
    margin-right: auto;
}

/* Dinheiro em monoespaçada era o traco mais visivel de "outro sistema": oito
   lugares da folha portada pedem `--font-mono`. O sistema alinha numero por
   `tabular-nums`, que mantem a fonte do resto da tela e ainda assim faz as
   casas baterem em coluna. */
.cp-main .cp-pedido-valor,
.cp-main .cp-dado--money,
.cp-main .cp-painel-total,
.cp-main .cp-doc-row-nome {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/* Cabecalho: sem titulo dentro do <main> (ele vive no topbar), a linha de
   filtros sozinha abria uma faixa vazia de 18px antes dos KPIs. */
.cp-main .tl-header-row { margin-bottom: 12px; justify-content: flex-end; }
.cp-main .tl-header:empty { display: none; }

/* As duas faixas do topo aparecem quando tem o que dizer, e o `display` das
   regras acima e' mais especifico que o `[hidden]` do navegador — sem estas
   duas linhas, esconder seria pedido e ignorado.

   Filtro: `ajustarFiltro()` so' mostra a linha quando a lista passa de oito
   pedidos. KPIs: `renderKpis()` esvazia a faixa para quem faz pedido, e o
   `:empty` recolhe a margem junto — faixa de altura zero com 18px embaixo
   deixaria um buraco no lugar do que foi tirado. */
.cp-main .tl-header-row[hidden] { display: none; }
.cp-main .tl-kpis:empty { display: none; }

/* O número da faixa de Pedidos sai na tinta do texto, e não no verde.
   `.tl-kpi .val` está cravado em `--uc-primary`, que é o mesmo hex de
   `--cgt-ok-fg` — a cor que nesta mesma tela significa "resolvido", nas
   pastilhas três centímetros abaixo. Ela pintava de verde justamente o monte
   que exige ação, e como era constante nos cinco cartões não distinguia nada:
   o único canal visual disponível, gasto sem informar.

   O que precisa chamar atenção agora é a etiqueta de demora, que tem fundo e
   borda próprios. Override escopado em `.cp-` de propósito: Orçamento usa
   `.tl-kpi` e não muda. */
.cp-main .cp-kpi .val {
    color: var(--color-text, #1a1a1a);
    font-variant-numeric: tabular-nums;
}
/* A etiqueta assenta na linha de apoio, que é 11,5px. */
.cp-main .cp-kpi .sub .tb-badge { font-size: 10.5px; padding: 1px 7px; }

/* A idade na linha do pedido. Peso, e não cor, marca a demora: `--cgt-alerta-fg`
   sobre o fundo do cartão dá 4,24:1, abaixo do mínimo. O negrito distingue sem
   depender de cor nenhuma, e quem precisa de mais que isso tem a etiqueta no
   cartão do topo. */
.cp-main .cp-idade { white-space: nowrap; }
.cp-main .cp-idade-demora { font-weight: 700; color: var(--color-text, #1a1a1a); }

/* Dois cartões pedem mais largura que os cinco de antes: o rótulo
   "Devolvidos, esperando correção" quebra em três linhas a 150px. */
.cp-main .tl-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 640px) {
    .cp-main .tl-kpis { grid-template-columns: 1fr; }
}

/* A lista mora dentro de um `.tl-card` agora: o cartao de cada pedido perde a
   borda e o fundo proprios e vira linha, separada como as da `.tb-tabela`. */
.cp-main .cp-lista { display: block; }
.cp-main .cp-pedido {
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-light, #efefef);
    border-radius: 0;
    box-shadow: none;
    padding: 11px 4px;
}
.cp-main .cp-pedido:last-child { border-bottom: none; }
.cp-main .cp-pedido:hover { background: var(--color-bg-alt, #fafafa); }
.cp-main .cp-pedido:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -2px;
}

/* Painel de detalhe: o chip de status virou `.tb-badge` e os dois botoes de
   decisao viraram `.mb-btn`. Devolver e' recusa, entao ganha a tinta de erro —
   e' o unico botao do sistema que precisa dela, e por isso a variante mora
   aqui, e nao em telas.css. No escuro o vermelho vem do token, que ja' tem par. */
.cp-btn-devolver {
    color: var(--cgt-erro-fg, #C62828);
    border-color: var(--cgt-erro-borda, #F5C6C2);
}
.cp-btn-devolver:hover { border-color: var(--cgt-erro-fg, #C62828); }
.cp-painel-header-right { gap: var(--space-sm, 8px); }

/* ── Pedidos: o cabecalho do Coordenador de Projeto ─────────────
   A tela dele nao e' a de revisao: as duas acoes sao acompanhar o que e' dele
   e pedir. Ambas moram no topbar — o titulo, que passa a ser "Meus pedidos",
   e o botao, ao lado do avatar. Uma barra propria dentro do <main> repetia o
   titulo que o topbar ja' dava. */

/* O escopo (projeto ou tema) ao lado do titulo: diz de quem e' a lista curta
   que vem abaixo. Some no telefone, onde o espaco e' do titulo. */
.cp-escopo {
    font-size: 12.5px;
    color: var(--color-text-muted, #9e9e9e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cp-btn-pedir {
    display: inline-flex; align-items: center; gap: 6px; height: 34px;
    padding: 0 14px; border: 1px solid var(--color-primary, #2E7D32);
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary, #2E7D32); color: var(--color-primary-text, #fff);
    font-family: inherit; font-size: 13px; font-weight: var(--font-w-semibold, 600);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.cp-btn-pedir:hover { background: var(--color-primary-hover, #1B5E20); }
.cp-btn-pedir:focus-visible { outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px; }

/* Num topbar de 60px com sigla da rede, titulo e avatar, o rotulo do botao e'
   a primeira coisa que nao cabe no telefone. Fica o icone, com o nome da acao
   no `aria-label` para quem le a tela em voz. */
@media (max-width: 700px) {
    .cp-escopo { display: none; }
    .cp-btn-pedir { padding: 0 10px; gap: 0; }
    .cp-btn-pedir-txt { display: none; }
}
/* No escuro o primario e' menta e texto branco da' 1,9:1 — mesmo botao
   fantasma que `.mb-btn-primario` ja' usa la'. */
html.darkmode .cp-btn-pedir {
    background: var(--color-primary-light); color: var(--color-primary);
    border-color: var(--cgt-ok-borda);
}

/* Fatos que o vínculo decide, dentro do modal de pedido: instituição, tema e
   projeto não se escolhem — digitados, o pedido nasceria fora do escopo de
   quem o criou e sumiria da lista dele. */
.pn-fixos {
    display: flex; flex-wrap: wrap; gap: 6px 26px;
    padding: 10px 12px; margin-bottom: 16px;
    background: var(--color-bg-alt, #f3f3f1); border-radius: var(--radius-md, 8px);
}
.pn-fixos dt {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-muted, #9e9e9e); font-weight: var(--font-w-semibold, 600);
}
.pn-fixos dd { margin: 1px 0 0; font-size: 13px; }
.pn-secao {
    margin: 22px 0 10px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-mid, #6b6b6b);
}
/* Rascunho e' secundario, mas nao neutro: e' a mesma acao de gravar, so' que
   sem enviar. Na vitrine isso vinha por `style=` inline no botao. */
.pn-btn-rascunho { color: var(--color-primary, #2E7D32); border-color: var(--color-primary, #2E7D32); }
.pn-status { min-height: 18px; margin: 14px 0 0; font-size: 12.5px; }
.pn-status.pn-ok { color: var(--color-positive, #2E7D32); font-weight: var(--font-w-semibold, 600); }
.pn-status.pn-erro { color: var(--color-negative, #c0392b); }

/* ── Recado de uma ação ─────────────────────────────────────────
   Resultado de cadastro. Fica FORA do cartão e do formulário porque a ação
   que o produziu redesenha os dois: a mensagem tem de sobreviver a isso e ser
   lida uma vez. Nasceu na tela da plataforma, como `.pl-recado`; virou `cgt-`
   quando o cadastro de membros precisou do mesmo — mesma situação, mesmo
   componente, e não uma segunda cópia com outro prefixo. */
.cgt-recado {
    display: flex; align-items: flex-start; gap: var(--space-sm, 8px);
    border-radius: 9px; padding: 11px 14px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.5;
}
.cgt-recado i { font-size: 12px; line-height: 1.5; flex: none; }
.cgt-recado code {
    background: var(--color-surface-alt, #eaeae8); color: var(--color-text, #1a1a1a);
    padding: 1px 6px; border-radius: var(--radius-sm, 4px); font-size: 12px;
}
.cgt-recado-ok {
    background: var(--cgt-ok-bg, #E8F5E9); color: var(--cgt-ok-fg, #2E7D32);
    border: 1px solid var(--cgt-ok-borda, #C8E6C9);
}
.cgt-recado-erro {
    background: var(--cgt-erro-bg, #FDECEA); color: var(--cgt-erro-fg, #C62828);
    border: 1px solid var(--cgt-erro-borda, #F5C6C2);
}

/* ── Carregando ─────────────────────────────────────────────── */
.cgt-carregando {
    padding: 26px 20px;
    text-align: center;
    color: var(--color-text-muted, #888);
    font-size: 13px;
}
.cgt-carregando::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cgt-spin .7s linear infinite;
}
@keyframes cgt-spin { to { transform: rotate(360deg); } }

/* Estado vazio dentro de uma celula de tabela ocupa a linha toda */
td > .cgt-vazio, th > .cgt-vazio { border: none; padding: 22px 10px; }

/* ── Produção científica: metadados do Scopus ───────────────────
   O módulo original só exibia título, autores, periódico e tags. O export
   do Scopus traz 45 colunas; estas regras estilizam o bloco recolhível que
   mostra o que não cabia no card. */

.pc-chip--oa   { background:#E8F5E9; color:#2E7D32; }
.pc-chip--cit  { background:#EDE7F6; color:#4527A0; }
.pc-chip--link { background:#E3F2FD; color:#1565C0; text-decoration:none; }
.pc-chip--link:hover { background:#BBDEFB; }
html.darkmode .pc-chip--oa   { background:rgba(46,125,50,.18);  color:#81C784; }
html.darkmode .pc-chip--cit  { background:rgba(69,39,160,.22);  color:#B39DDB; }
html.darkmode .pc-chip--link { background:rgba(21,101,192,.18); color:#64B5F6; }

.pc-scopus { margin-top: 10px; border-top: 1px solid var(--color-border, #e6e6e6); }
.pc-scopus > summary {
    cursor: pointer;
    padding: 7px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-mid, #666);
    list-style: none;
}
.pc-scopus > summary::-webkit-details-marker { display: none; }
.pc-scopus > summary::before { content: '▸ '; font-size: 10px; }
.pc-scopus[open] > summary::before { content: '▾ '; }
.pc-scopus > summary:hover { color: var(--uc-primary, #2E7D32); }

.pc-scopus-body { padding: 10px 0 4px; font-size: 12.5px; line-height: 1.55; }

.pc-kw-rot {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted, #999);
    margin-bottom: 4px;
}

.pc-abstract, .pc-refs { margin-bottom: 12px; }
.pc-abstract p, .pc-refs p { margin: 0; color: var(--color-text-mid, #555); }
/* Referências costumam ser um bloco enorme: limita a altura e deixa rolar */
.pc-refs p { max-height: 120px; overflow-y: auto; font-size: 11.5px; }

.pc-kw { margin-bottom: 10px; }
.pc-kw-item {
    display: inline-block;
    background: var(--color-bg-alt, #f1f1f1);
    border-radius: 4px;
    padding: 2px 7px;
    margin: 0 4px 4px 0;
    font-size: 11.5px;
}
html.darkmode .pc-kw-item { background: #2D2D2D; }

.pc-meta {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 3px 14px;
    margin: 0;
}
.pc-meta dt { font-weight: 600; color: var(--color-text-mid, #666); font-size: 11.5px; }
.pc-meta dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .pc-meta { grid-template-columns: 1fr; gap: 0 0; }
    .pc-meta dd { margin-bottom: 7px; }
}

/* ── Separacao da sidebar ───────────────────────────────────────────────
   `.cg-nav` pega `--color-surface` em capes-global.css — e o plano-acao.css
   pinta o `body` com esse MESMO token. Medido no Plano de Acao: barra em
   #f3f3f1, conteudo em #f3f3f1, e a divisao inteira era a linha de 1px do
   `border-right`. Nas outras telas o body fica em --color-bg (#fafafa), o
   que da' 7 pontos de diferenca — subtil demais para ler de relance.

   A barra passa para `--color-surface-alt`, o degrau seguinte da mesma
   escala de superficies: separa de #fafafa e de #f3f3f1 sem inventar tom.

   So' vale no claro. No escuro `html.darkmode .cg-nav` (capes-global.css)
   tem especificidade maior e continua mandando — e la' o contraste ja'
   existia: barra #1f1f1f contra corpo #1E1E1E ou #252526. */
.cg-nav {
    background: var(--color-surface-alt);
}

/* Os divisores entre os grupos estavam em --color-border-light (#efefef):
   sobre a barra nova quase nao aparecem. */
.cg-nav-sep {
    border-top-color: var(--color-border);
}

/* ── Grupos da sidebar ──────────────────────────────────────────────────
   A sidebar e agrupada (Avaliação · Execução · Prestação de contas). Nada
   aqui inventa estilo: o divisor e o `.cg-nav-sep` que a propria sidebar ja
   define em capes-global.css, o recolher/expandir repete o padrao de
   `.adm-sidebar-group` do admin (max-height + chevron girando 180°), os
   icones sao do mesmo conjunto Flaticon do portal e as cores sao os tokens
   semanticos de style-global.css.

   Nao existe variante "-light" para warning/info/positive (so' primary e
   accent tem), entao o tom da categoria aparece como faixa de 2px e no
   rotulo, em vez de fundo esmaecido. */

.cg-tom-warning  { --cg-tom: var(--color-warning); }
.cg-tom-info     { --cg-tom: var(--color-info); }
.cg-tom-positive { --cg-tom: var(--color-positive); }

/* Cabecalho da secao: mesmo rotulo miudo de antes, agora operavel por
   teclado (e <button>) e com o chevron a direita. */
.cg-nav-grupo {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: var(--font-w-bold, 700);
    color: var(--cg-tom, var(--color-text-muted));
    padding: var(--space-sm, 8px) 12px var(--space-xs, 4px);
    border-radius: var(--radius-sm, 4px);
}
.cg-nav-grupo:hover { background: var(--color-surface, #f3f3f1); }
.cg-nav-grupo:focus-visible { outline: 2px solid var(--cg-tom, var(--color-primary)); outline-offset: -2px; }
.cg-nav-grupo > span { flex: 1; }
.cg-nav-grupo > i { font-size: 12px; line-height: 1; flex-shrink: 0; }

/* Barra aberta: o rotulo da secao basta, sem icone antes do nome. E' o mesmo
   criterio que capes-global.css ja' aplica aos itens — `.cg-nav-brand i,
   .cg-nav-link i { display: none }` no estado expandido.

   O icone continua no HTML porque na barra recolhida ele e' a unica marca do
   grupo: ali o rotulo e o chevron somem, e sem ele o cabecalho da secao viraria
   um botao vazio. O chevron fica de fora da regra, senao o grupo perderia o
   sinal de abre/fecha. */
.cg-nav-grupo > i:not(.cg-nav-chevron) { display: none; }
body.cg-sidebar-collapsed .cg-nav-grupo > i:not(.cg-nav-chevron) { display: inline-block; }

.cg-nav-chevron { transition: transform 0.2s ease; }
.cg-nav-grupo-bloco.aberto .cg-nav-chevron { transform: rotate(180deg); }

/* Faixa da categoria a esquerda dos itens. A margem negativa encosta a faixa
   na borda da sidebar, onde a barra de item ativo (`.cg-nav-link.active`)
   tambem fica — na linha ativa ela cobre a faixa, o que e o certo: o estado
   ativo tem precedencia sobre o agrupamento. */
.cg-nav-sublista {
    border-left: 2px solid var(--cg-tom, var(--color-border));
    margin-left: -12px;
    padding-left: 12px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
    /* Coluna, como a .cg-nav-list. `.cg-nav-link` e' `inline-flex` em
       capes-global.css e so' empilha porque la' os links sao filhos diretos da
       lista, que ja' e' flex-column. Dentro do agrupamento — que e' daqui, o
       original nao tem — eles voltavam ao fluxo em linha e se emparelhavam:
       "Orçamento  Pedidos" na mesma linha, e "Relatórios  Instrumentos"
       tambem. Os itens de Avaliação escapavam por serem largos demais para
       caber dois na largura da barra. */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cg-nav-grupo-bloco.aberto .cg-nav-sublista { max-height: 500px; }

/* Recolhida: a sidebar mostra so' icones. O rotulo e o chevron somem, os
   grupos ficam sempre abertos (senao os icones sumiriam sem saida visivel) e
   o icone da secao vira a marca do grupo. */
body.cg-sidebar-collapsed .cg-nav-grupo > span,
body.cg-sidebar-collapsed .cg-nav-chevron,
/* A assinatura e' texto corrido: na barra recolhida, que tem largura de icone,
   ela estouraria a coluna. Some junto com os rotulos e volta com eles. */
body.cg-sidebar-collapsed .cg-nav-assinatura {
    display: none;
}
body.cg-sidebar-collapsed .cg-nav-grupo {
    justify-content: center;
    padding: var(--space-sm, 8px) 0 var(--space-xs, 4px);
}
body.cg-sidebar-collapsed .cg-nav-sublista {
    max-height: none;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* ── Portão de acesso (gate.js) ─────────────────────────────────────────
   A área da rede deixou de ser pública. Enquanto não há vínculo, o overlay
   cobre a página: deixar a tela montar por trás faria toda leitura voltar
   vazia, e o usuário concluiria que o sistema quebrou em vez de perceber
   que falta entrar. Tokens e ícones são os mesmos do resto do portal. */
body.cgt-gate-aberto { overflow: hidden; }

#cgt-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md, 16px);
    background: var(--color-bg, #fafafa);
}
.cgt-gate-caixa {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.06));
    padding: var(--space-lg, 28px);
    text-align: center;
}
.cgt-gate-icone {
    font-size: 26px;
    color: var(--color-primary, #2E7D32);
    display: block;
    margin-bottom: var(--space-sm, 8px);
}
/* Volta aos 8px de origem: o <h2> saiu da tela de login, e nos avisos — que
   são os que ainda têm título — ele sempre foi seguido de um parágrafo. */
.cgt-gate-caixa h2 { margin: 0 0 var(--space-sm, 8px); font-size: 18px; }
.cgt-gate-caixa p {
    margin: 0 0 var(--space-md, 16px);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-mid, #6b6b6b);
}
.cgt-gate-btn {
    width: 100%;
    padding: 10px 14px;
    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: 13.5px;
    font-weight: var(--font-w-semibold, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 8px);
}
.cgt-gate-btn:hover { border-color: var(--color-primary, #2E7D32); }
.cgt-gate-btn-primario {
    background: var(--color-primary, #2E7D32);
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary-text, #fff);
}
.cgt-gate-btn-primario:hover { background: var(--color-primary-hover, #1B5E20); }
/* Dois botoes de provedor empilhados encostavam um no outro: o `.cgt-gate-btn`
   nasceu filho unico e nunca precisou de margem. O seletor de irmao adjacente
   da o respiro sem alcancar o botao do formulario (que vem depois de um
   <input>) nem o "Sair", que continuam sozinhos onde estao. */
.cgt-gate-btn + .cgt-gate-btn { margin-top: var(--space-sm, 8px); }
/* O logotipo nao pode encolher quando o rotulo cresce. */
.cgt-gate-btn svg { flex: none; }

.cgt-gate-ou {
    position: relative;
    margin: var(--space-md, 16px) 0;
    border-top: 1px solid var(--color-border-light, #efefef);
}
.cgt-gate-ou span {
    position: relative;
    top: -9px;
    background: var(--color-bg-card, #fff);
    padding: 0 var(--space-sm, 8px);
    font-size: 11.5px;
    color: var(--color-text-muted, #9e9e9e);
}
.cgt-gate-form { text-align: left; display: grid; gap: var(--space-sm, 8px); }
.cgt-gate-form label { font-size: 12px; color: var(--color-text-mid, #6b6b6b); font-weight: var(--font-w-semibold, 600); }
.cgt-gate-form input {
    padding: 10px 12px;
    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: 13.5px;
}
.cgt-gate-form input:focus-visible { outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -1px; }
.cgt-gate-nota { font-size: 11.5px !important; color: var(--color-text-muted, #9e9e9e) !important; margin-top: var(--space-md, 16px) !important; }
.cgt-gate-erro {
    background: var(--color-negative, #c0392b);
    color: #fff;
    border-radius: var(--radius-sm, 4px);
    padding: 9px 12px;
    font-size: 12.5px;
    margin-bottom: var(--space-md, 16px);
    text-align: left;
}
.cgt-gate-carregando { font-size: 13.5px; color: var(--color-text-mid, #6b6b6b); padding: var(--space-md, 16px); }
/* O recado da sessão que expirou por inatividade. NÃO usa a tarja vermelha do
   `.cgt-gate-erro`: expirar depois de uma hora parada é o sistema cumprindo o
   combinado, e vermelho diria que houve falha — a pessoa concluiria que perdeu
   o acesso em vez de entender que precisa só entrar de novo. O vermelho fica
   para o que deu errado, e os dois podem aparecer na mesma caixa. */
.cgt-gate-recado {
    background: var(--cgt-neutro-bg, #eef1f4);
    color: var(--color-text-mid, #6b6b6b);
    border-left: 3px solid var(--color-primary, #2E7D32);
    border-radius: var(--radius-sm, 4px);
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: var(--space-md, 16px);
    text-align: left;
}

/* ── Aviso de sessão ociosa (inatividade.js) ────────────────────────────
   A caixa que aparece dois minutos antes de a sessão de uma hora se fechar
   sozinha. Reusa `.cgt-gate-caixa`, `.cgt-gate-btn` e `.cgt-gate-icone` acima
   — é a mesma conversa sobre a mesma sessão, e uma segunda linguagem visual
   só para ela seria uma terceira coisa a manter.

   O que ela NÃO reusa é o `#cgt-gate`: os dois podem existir ao mesmo tempo
   (aba de trás com o login aberto, aba da frente contando para trás), e um
   `id` só faria um apagar o outro. Vem por cima, com o fundo escurecido em
   vez de opaco: quem é interrompido precisa ver que a tela dele continua
   ali, inteira, esperando. */
#cgt-ocioso {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md, 16px);
    background: rgba(0, 0, 0, .45);
}
.cgt-ocioso-caixa {
    width: 100%;
    max-width: 380px;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,.07));
    padding: var(--space-lg, 28px);
    text-align: center;
}
.cgt-ocioso-caixa h2 { margin: 0 0 var(--space-sm, 8px); font-size: 18px; }
.cgt-ocioso-caixa p {
    margin: 0 0 var(--space-md, 16px);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-mid, #6b6b6b);
}
/* Tabular, para o número não dançar de largura a cada segundo que passa. */
.cgt-ocioso-conta {
    font-size: 34px;
    font-weight: var(--font-w-bold, 700);
    line-height: 1.2;
    color: var(--color-primary, #2E7D32);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-sm, 8px);
}
@media (prefers-reduced-motion: no-preference) {
    #cgt-ocioso { animation: cgt-ocioso-entra .16s ease-out; }
}
@keyframes cgt-ocioso-entra { from { opacity: 0; } to { opacity: 1; } }

/* ── Cadastro manual (form-cadastro.js) ─────────────────────────────────
   Mora AQUI, e nao em telas.css, porque `form-cadastro.js` serve qualquer
   tela — inclusive as portadas, que carregam so' esta folha. Deixar o
   estilo na folha das telas novas fez o formulario ir ao ar sem
   formatacao nenhuma no Plano de Acao. */
.pa-cadastro { margin: 0 0 18px; }

.fc-bloco {
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s;
}
.fc-bloco[open] { border-color: var(--color-primary, #2E7D32); }
.fc-bloco > summary {
    cursor: pointer;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
}
.fc-bloco > summary::-webkit-details-marker { display: none; }
.fc-bloco > summary::before {
    content: '+';
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none;
    border-radius: 50%;
    background: var(--color-primary, #2E7D32); color: #fff;
    font-size: 14px; line-height: 1;
}
/* Aberto vira o sinal de menos. Estava um caractere de controle seguido de
   '2': o glifo nao sobreviveu a uma gravacao em outra codificacao, e a
   bolinha verde do bloco expandido passou a exibir o algarismo dois. O
   escape CSS \2212 e imune a recodificacao. */
.fc-bloco[open] > summary::before { content: '\2212'; }
.fc-bloco > summary:hover { background: var(--color-background-secondary, #fafafa); }
/* No escuro `--color-background-secondary` e `--color-background` caem os dois
   em `--color-surface`: o hover pintava o cabecalho da mesma cor do cartao, e
   a unica barra clicavel do bloco nao respondia ao mouse. `--color-surface-alt`
   e' o tom que o sistema ja' usa para superficie levantada no escuro. */
html.darkmode .fc-bloco > summary:hover { background: var(--color-surface-alt, #2D2D2D); }

.fc-bloco .mb-ajuda { padding: 0 18px; margin: 0 0 12px; }
.fc-bloco .fc-form { padding: 0 18px 18px; }
/* O cadastro de membros reusa este mesmo bloco recolhivel, com `.mb-form` no
   lugar do `.fc-form`: e' o unico recolhivel de formulario do sistema, e dois
   seriam duas gramaticas para a mesma coisa. */
.fc-bloco > .mb-form { padding: 0 18px 18px; margin-bottom: 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. Aqui o rotulo volta
   ao fluxo normal — texto e asterisco na mesma linha, campo embaixo. Restrito
   ao formulario dentro do bloco recolhivel: `.fc-grade label` tem grid proprio
   e nao pode virar bloco junto. */
.fc-bloco > .mb-form label { display: block; }
.fc-bloco > .mb-form label > input,
.fc-bloco > .mb-form label > select { display: block; width: 100%; margin-top: 3px; }

.fc-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 14px;
}
.fc-grade .fc-largo { grid-column: 1 / -1; }
.fc-grade label {
    display: grid; gap: 4px; min-width: 0;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-secondary, #666);
}
.fc-grade input, .fc-grade select, .fc-grade textarea {
    height: 34px; padding: 0 13px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 999px;
    background: var(--color-background, #fff);
    color: var(--color-text, #1a1a1a);
    font-family: inherit; font-size: 13px; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    min-width: 0;
}
.fc-grade textarea {
    height: auto; padding: 9px 14px;
    border-radius: 12px; resize: vertical; line-height: 1.5;
}
.fc-grade input:focus-visible,
.fc-grade select:focus-visible,
.fc-grade textarea:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -1px;
}
/* Rótulo e asterisco numa linha só — ver o comentário em `campoHTML`. Como o
   label é grid, basta serem UM filho; `block` é para os labels que alguma tela
   devolveu ao fluxo normal com `display: block`. */
.fc-rot { display: block; }
.fc-dica {
    font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0;
    color: var(--color-text-muted, #9e9e9e);
    line-height: 1.45;
}

/* Os chips: mesmos de .pa-chip, clicáveis e apagados até serem marcados. */
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.fc-chip {
    font-size: 11px; padding: 4px 11px; border-radius: 999px;
    font-weight: 500; white-space: nowrap;
    border: 1px solid var(--color-border, #e0e0e0);
    background: none; color: var(--color-text-secondary, #666);
    cursor: pointer; font-family: inherit;
    text-transform: none; letter-spacing: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.fc-chip:hover { border-color: var(--color-text-secondary, #999); }
.fc-chip:focus-visible { outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 1px; }
.fc-chip[aria-pressed="true"] { border-color: transparent; font-weight: 600; }
.fc-chip.pa-chip--ods[aria-pressed="true"] {
    background: var(--color-background-info, #E3F2FD); color: var(--color-text-info, #1565C0);
}
.fc-chip.pa-chip--politica[aria-pressed="true"] {
    background: var(--color-background-warning, #FFF8E1); color: var(--color-text-warning, #6d4c00);
}

.fc-form .mb-acoes { margin-top: 14px; }
.fc-form .mb-btn { height: 34px; border-radius: 999px; padding: 0 18px; }

@media (max-width: 720px) { .fc-grade { grid-template-columns: 1fr; } }

/* Projetos dentro do cartão do tema — parte dele, não bloco irmão. */
.pa-projetos { display: flex; flex-direction: column; gap: 6px; }
.pa-projeto {
    padding: 9px 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 10px;
    background: var(--color-background-secondary, #fafafa);
}
.pa-projeto-nome { font-size: 13px; font-weight: 600; color: var(--color-text, #1a1a1a); }
.pa-projeto-meta { font-size: 11.5px; color: var(--color-text-secondary, #666); margin-top: 2px; }
.pa-projeto-form { margin-top: 10px; }
.pa-projeto-form .fc-bloco { margin-bottom: 0; }

/* Aviso de contexto — vive na folha compartilhada porque qualquer tela pode
   precisar dele, inclusive as portadas, que só carregam esta. */
.cgt-aviso {
    display: flex; align-items: baseline; gap: 8px;
    background: var(--cgt-alerta-bg, #FFF4E5);
    color: var(--cgt-alerta-fg, #B26A00);
    border: 1px solid #FFE0B2;
    border-radius: var(--radius-md, 8px);
    padding: 11px 14px; margin: 0 0 16px;
    font-size: 13px; line-height: 1.55;
}

/* ── Gaveta dos campos que a tabela não mostra ───────────────────────────
   Uma coleção do edital tem de 10 a 43 campos manuais. Os que a tabela exibe
   já respondem "que registro é este"; o resto é exigência que aparece depois,
   e abrir tudo de uma vez faria a pessoa desistir na primeira tela. Herda a
   moldura do `.fc-bloco` de fora, um tom mais leve. */
.fc-mais {
    margin: 4px 18px 14px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 10px;
    background: var(--color-background-secondary, #fafafa);
}
.fc-mais > summary {
    cursor: pointer;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
}
.fc-mais > summary::-webkit-details-marker { display: none; }
.fc-mais > summary::before {
    content: '+';
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: none;
    border: 1px solid var(--color-border, #d6d6d6);
    border-radius: 50%;
    font-size: 13px; line-height: 1;
}
.fc-mais[open] > summary::before { content: '\2212'; }
.fc-mais > summary:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32);
    outline-offset: -2px;
}
.fc-mais > .fc-grade { padding: 0 14px 14px; }

/* ── Blocos de implantação (Configurações) ───────────────────────────────
   Cada bloco mostra o que já existe e pede só o básico. As etiquetas são as
   mesmas `.tb-badge` das tabelas — nada de componente novo.

   Margem lateral zero, e não 18px: o cartão (`.tl-card`) já afasta 18px, e o
   par somava 36. As etiquetas começavam meio centímetro à direita do título e
   da sugestão do edital, que assentam na borda do cartão — três recuos
   diferentes dentro do mesmo quadro, que é o que se lê como desalinho. */
.cf-implant-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}
.cf-implant-mais {
    font-size: 12px;
    color: var(--color-text-muted, #888);
    align-self: center;
}
.cf-implant-vazio {
    margin: 10px 0 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-mid, #666);
}
/* O motivo de a vigência importar, ao lado do título e não embaixo dele.
   Um ponto abaixo do `.tb-cab-tit h3` e sem peso: é a legenda do selo
   vermelho ao lado, não um segundo título disputando a linha. */
/* ── Sugestão do edital, no cadastro de IES ──────────────────────────────
   O edital já sabe quais instituições formam esta rede. Oferecê-las é a
   diferença entre procurar seis siglas numa lista de 112 e conferir seis
   linhas — e conferir é o que a pessoa de fato tem condições de fazer.

   Painel com filete à esquerda, e não caixa colorida: é apoio ao formulário
   logo abaixo, não aviso. A mesma marcação de margem do resto do sistema. */
.cf-sugestao {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--color-bg-alt, #f7f9fc);
    border-left: 3px solid var(--color-primary, #2E7D32);
    border-radius: 0 6px 6px 0;
}
.cf-sugestao-cab { font-size: 13px; line-height: 1.55; }
.cf-sugestao-cab span { color: var(--color-text-mid, #666); }
/* A rede casada, à vista: é o que torna o palpite conferível. */
.cf-sugestao-fonte {
    margin: 4px 0 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-muted, #8a8a8a);
}
.cf-sugestao-itens { display: flex; flex-wrap: wrap; gap: 7px; }
.cf-sug-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    border: 1px solid var(--color-border, #dcdcdc);
    background: var(--color-bg-card, #fff);
    color: inherit;
}
/* Botão: é o que se clica para preencher o formulário. */
button.cf-sug-add { cursor: pointer; transition: border-color .12s, color .12s; }
button.cf-sug-add:hover {
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary, #2E7D32);
}
button.cf-sug-add:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}
/* Já cadastrada: sai do fluxo de ação, e não some — some seria fazer a
   pessoa contar de novo quantas das seis já entraram. */
.cf-sug-ok {
    color: var(--color-text-muted, #8a8a8a);
    border-style: dashed;
    font-weight: 400;
}

.cf-vig-motivo {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-mid, #666);
}
/* ── O painel de cadastro da implantação ─────────────────────────────────
   A AÇÃO subiu para a barra do cabeçalho — é a `.tb-btn-cadastro` das tabelas
   e do cadastro de membros. Fechada, ela ocupava uma faixa inteira do cartão
   para dizer duas palavras, e com cinco blocos empilhados a mesma ação
   aparecia em cinco alturas diferentes: achá-la exigia procurar em cada
   cartão. Na barra ela fica sempre no mesmo lugar em relação ao título.

   O PAINEL não subiu junto. Ele abre abaixo das etiquetas e da sugestão do
   edital porque é essa a ordem das perguntas — a sugestão responde "quais são
   as minhas?" e o formulário pergunta "qual você quer cadastrar?" —, e porque
   são os chips da sugestão que preenchem o formulário. Aberto acima deles, o
   chip preencheria um formulário que a pessoa já passou.

   Fechado, é `[hidden]`, e a regra global de `telas.css` o tira do fluxo com
   a margem junto. */
.cf-implant-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light, #efefef);
}
/* O formulário dentro do painel não repete a moldura do cartão. */
.cf-implant-form .fc-bloco {
    border: none;
    margin-bottom: 0;
}
.cf-implant-form .fc-bloco[open] { border: none; }
/* O nome da ação já está no botão do cabeçalho; o recolhível que
   `form-cadastro.js` monta traria um segundo "Cadastrar IES" a dois dedos do
   primeiro. O `<details>` continua ali e sempre aberto — quem abre e fecha é o
   botão —, e sem a barra dele o formulário não precisa mais do recuo que a
   compensava: alinha-se ao título, como o resto do cartão. */
.cf-implant-form .fc-bloco > summary { display: none; }
.cf-implant-form .fc-bloco > .fc-form { padding: 0; }

/* ── Área do beneficiário ────────────────────────────────────────────────
   Tela sem sidebar: quem entra aqui não é membro da rede, e as treze portas
   do sistema de gestão estariam todas trancadas para ele. O cabeçalho carrega
   a identidade da rede sozinho. */
.md-main { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }
.md-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light, #eee);
}
.md-cabecalho h1 { margin: 0; font-size: 20px; font-weight: 600; }

/* Entrada por link mágico: mesma moldura do portão dos membros. */
.md-entrada {
    max-width: 460px;
    margin: 48px auto;
    text-align: center;
}
.md-entrada h2 { margin: 12px 0 8px; font-size: 19px; }
.md-entrada p { font-size: 13.5px; line-height: 1.6; color: var(--color-text-mid, #666); }
.md-erro {
    color: var(--cgt-erro-fg, #C62828);
    background: var(--cgt-erro-bg, #FDECEA);
    border: 1px solid var(--cgt-erro-borda, #F5C6C2);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
}

.md-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px;
    margin: 12px 18px;
}
.md-ficha dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #888);
}
.md-ficha dd { margin: 2px 0 0; font-size: 14px; }
.md-nota {
    margin: 10px 18px 4px;
    font-size: 12.5px;
    color: var(--color-text-muted, #888);
}

/* ── Guia do item, no pedido de gasto ────────────────────────────────────
   Aparece ao escolher a rubrica e o item. É o que quem pede não tinha em
   lugar nenhum: o que aquele item paga, o teto, o prazo, e — antes de montar
   o pedido — o que a rubrica NÃO paga. */
.pn-guia {
    margin: 8px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-left: 3px solid var(--color-primary, #2E7D32);
    border-radius: 8px;
    background: var(--color-background-secondary, #fafafa);
    font-size: 12.5px;
    line-height: 1.6;
}
/* Selo do que o edital exige, ao lado do rótulo do anexo. Distingue o
   documento que a norma pede do campo geral — um volta o pedido, o outro não. */
.pn-selo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--cgt-ok-bg, #E8F5E9);
    color: var(--cgt-ok-fg, #2E7D32);
    border: 1px solid var(--cgt-ok-borda, #C8E6C9);
    vertical-align: 1px;
}
/* O segundo selo e' NEUTRO, e nao verde, porque o que ele marca nao e' exigencia
   do envio: a nota fiscal e o comprovante de transferencia so' voltam a ser
   cobrados na prestacao de contas, meses depois. Verde ao lado de verde faria os
   dois pesarem igual, e o campo que nao trava nada passaria a parecer o que
   trava o pedido. Sem caixa alta tambem: o rotulo tem tres palavras, e em 9,5px
   maiusculo ele grita mais alto que o proprio nome do documento. */
.pn-selo--prest {
    background: var(--cgt-neutro-bg, #EEF1F4);
    color: var(--cgt-neutro-fg, #555555);
    border-color: var(--color-border, #e0e0e0);
    text-transform: none;
    letter-spacing: 0;
}
.pn-guia h4 {
    margin: 10px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted, #888);
}
.pn-guia h4:first-child { margin-top: 0; }
.pn-guia p { margin: 0 0 6px; }
/* `gap` numa coluna flex, como o `ol` do painel já faz — e não margem, que
   colapsa entre irmãos e some justamente onde precisa aparecer. */
.pn-guia ul {
    margin: 0 0 4px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pn-guia li { margin: 0; }

/* A lista de vedações é a que mais precisa de ar: cada linha é o nome do que
   não pode MAIS a norma que proíbe, e emendadas viram um parágrafo só — a
   pessoa lê a proibição de um item e a justificativa do seguinte. O filete
   separa sem pesar; a explicação desce para a própria linha. */
.pn-guia-vedados { gap: 0 !important; }
.pn-guia-vedados li {
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border-light, #ebebeb);
}
.pn-guia-vedados li:first-child { padding-top: 0; }
.pn-guia-vedados li:last-child { border-bottom: none; padding-bottom: 0; }
.pn-guia-vedados strong { display: block; margin-bottom: 3px; }
.pn-guia-vedados span {
    display: block;
    color: var(--color-text-mid, #666);
}
/* A ressalva do item — costuma ser a vedação que devolve o pedido. */
.pn-guia-alerta {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--cgt-alerta-bg, #FFF4E5);
    color: var(--cgt-alerta-fg, #B26A00);
    border: 1px solid var(--cgt-alerta-borda, #FFE0B2);
}

/* ── A conta do pedido ───────────────────────────────────────────────────
   Uma missão não é um número que alguém sabe de cabeça: é passagem, mais
   diárias do grupo do país vezes os dias menos um, mais seguro, tudo
   convertido. Quem preenchia trazia isso de uma planilha à parte — ou não
   trazia. Aqui os campos da conta ficam entre o item e o Valor, e o Valor
   passa a ser o resultado. */
.pn-calc {
    margin: 2px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    background: var(--color-background-secondary, #fafafa);
}
.pn-calc .srv-form-group { margin-bottom: 10px; }
/* Ida e volta lado a lado: são um par, e separá-los faz procurar a segunda. */
.pn-par { display: flex; gap: 10px; }
.pn-par > * { flex: 1; min-width: 0; }
.pn-dica {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-muted, #888);
}
.pn-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.pn-check input { margin-top: 2px; flex: none; }

.pn-conta {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
}
.pn-conta-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pn-conta-tab th {
    text-align: left;
    font-weight: 600;
    padding: 5px 0;
    white-space: nowrap;
    vertical-align: top;
}
.pn-conta-det {
    padding: 5px 10px;
    color: var(--color-text-mid, #666);
    line-height: 1.5;
}
/* Números alinhados à direita e com dígitos de largura fixa: é assim que se
   confere uma coluna de dinheiro sem somar de cabeça. */
.pn-conta-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pn-conta-sub th, .pn-conta-sub .pn-conta-num {
    padding-top: 8px;
    border-top: 1px solid var(--color-border-light, #ebebeb);
}
.pn-conta-tot th, .pn-conta-tot .pn-conta-num {
    padding-top: 8px;
    border-top: 1px solid var(--color-border, #e0e0e0);
    font-weight: 700;
    font-size: 14px;
}
.pn-conta-vazio, .pn-conta-nota {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text-muted, #888);
}
.pn-conta-nota { margin-top: 10px; }
/* O aviso não trava o envio: são 22 dias em vez de 20, e a exceção existe.
   Mas quem passou do intervalo por engano precisa ver antes de mandar. */
.pn-conta-aviso {
    margin: 10px 0 0;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.55;
    background: var(--cgt-alerta-bg, #FFF4E5);
    color: var(--cgt-alerta-fg, #B26A00);
    border: 1px solid var(--cgt-alerta-borda, #FFE0B2);
}

/* ── Suporte: o botão do canto, e o painel que ele abre ──────────────────
   Mora AQUI porque `suporte.js` roda em dezoito telas — as dezessete do
   sistema de gestão e a área do beneficiário —, e `teste.css` é a única folha
   que todas as dezoito já carregam. Numa folha própria seriam dezoito
   `<link>` a mais para uma tela de comentário.

   `z-index` 9998, um degrau abaixo do aviso de armazenamento (9999): quando
   os dois estão na tela, quem manda é o aviso — ele aparece uma vez na vida
   de cada pessoa, e o botão está lá todo dia. `--sp-piso` afasta o botão da
   faixa enquanto ela existir; `suporte.js` mede e zera. */
.sp-raiz {
    --sp-piso: 0px;
    position: fixed;
    right: 20px;
    bottom: calc(20px + var(--sp-piso));
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* O contêiner não pode capturar clique fora dos filhos: ele é uma coluna
       que chega a 460px de altura com o painel aberto, e um retângulo
       invisível desse tamanho engoliria a interface embaixo dele. */
    pointer-events: none;
}
.sp-raiz > * { pointer-events: auto; }

/* Pílula, e não círculo com ícone só. Um alvo redondo de 56px com um balão
   dentro pede que se adivinhe o que ele faz — e ícone sozinho é justamente o
   que a disciplina de acessibilidade manda evitar. A palavra cabe, e resolve. */
.sp-botao {
    display: inline-flex; align-items: center; gap: 8px;
    /* 44px de altura: o mínimo de toque, o mesmo que o aviso de
       armazenamento adota logo ao lado. */
    height: 44px; padding: 0 18px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: 999px;
    background: var(--color-bg-card, #fff);
    color: var(--color-text, #1a1a1a);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .13);
    transition: border-color .12s, color .12s, box-shadow .12s;
}
.sp-botao i { font-size: 15px; line-height: 1; color: var(--color-primary, #2E7D32); }
.sp-botao:hover {
    border-color: var(--color-primary, #2E7D32);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}
.sp-botao:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}
.sp-botao[aria-expanded="true"] {
    border-color: var(--color-primary, #2E7D32);
    color: var(--color-primary, #2E7D32);
}
html.darkmode .sp-botao { box-shadow: 0 3px 16px rgba(0, 0, 0, .5); }

/* Largura de leitura, e não de tela: o campo é de texto corrido, e um painel
   de 600px faria linhas que o olho perde ao voltar. `min()` cuida do celular,
   onde os 20px de cada lado da raiz são o respiro que sobra. */
.sp-painel {
    width: min(360px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 120px));
    overflow-y: auto;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
html.darkmode .sp-painel { box-shadow: 0 12px 44px rgba(0, 0, 0, .6); }

.sp-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 12px 14px 18px;
    border-bottom: 1px solid var(--color-border-light, #efefef);
}
.sp-cab h2 { margin: 0; font-size: 14px; font-weight: 600; }
.sp-fechar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border: none; border-radius: 8px;
    background: none; color: var(--color-text-mid, #666);
    font-size: 14px; cursor: pointer;
}
.sp-fechar:hover { background: var(--color-bg-alt, #f4f4f4); }
.sp-fechar:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -2px;
}
html.darkmode .sp-fechar:hover { background: var(--color-surface-alt, #2D2D2D); }

.sp-form { padding: 16px 18px 18px; }

/* O `<fieldset>` traz borda e recuo do navegador, e os dois desenhariam uma
   caixa em volta de três pastilhas. A `<legend>` fica: é ela que o leitor de
   tela anuncia antes do grupo. */
.sp-tipos { border: none; margin: 0 0 14px; padding: 0; }
.sp-tipos legend {
    padding: 0; margin-bottom: 7px;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-secondary, #666);
}
/* O rádio some da vista, e não da árvore: `display: none` o tiraria do foco e
   das setas do teclado, que é o que faz um grupo de rádio ser um grupo. */
.sp-tipos input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.sp-tipos label {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: 6px; padding: 7px 13px;
    border: 1px solid var(--color-border, #dcdcdc);
    border-radius: 999px;
    font-size: 12.5px; cursor: pointer;
    transition: border-color .12s, background .12s;
}
.sp-tipos label i { font-size: 12px; line-height: 1; }
.sp-tipos label:hover { border-color: var(--color-text-secondary, #999); }
.sp-tipos input:checked + label {
    border-color: var(--color-primary, #2E7D32);
    background: var(--color-primary-light);
    color: var(--color-primary, #2E7D32);
    font-weight: 600;
}
/* O anel acompanha o rádio escondido; sem isto, navegar o grupo pelo teclado
   não mostra onde se está. */
.sp-tipos input:focus-visible + label {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}

.sp-campo {
    display: block;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-secondary, #666);
}
.sp-campo textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 10px 13px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 12px;
    background: var(--color-background, #fff);
    color: var(--color-text, #1a1a1a);
    font-family: inherit; font-size: 13px; font-weight: 400;
    text-transform: none; letter-spacing: 0; line-height: 1.55;
    resize: vertical;
}
.sp-campo textarea:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -1px;
}

.sp-contexto {
    margin: 10px 0 0;
    font-size: 11.5px; line-height: 1.5;
    color: var(--color-text-mid, #666);
}

.sp-acoes { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sp-enviar {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 16px;
    border: none; border-radius: 999px;
    background: var(--color-primary, #2E7D32); color: #fff;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}
.sp-enviar i { font-size: 12px; line-height: 1; }
.sp-enviar:hover { background: var(--color-primary-hover, #1B5E20); }
.sp-enviar:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}
.sp-enviar:disabled { opacity: .6; cursor: default; }
.sp-status { font-size: 11.5px; line-height: 1.45; color: var(--color-text-mid, #666); }
.sp-status.sp-erro { color: var(--color-negative, #c0392b); }

.sp-recibo { padding: 22px 18px 20px; text-align: center; }
.sp-recibo > i {
    font-size: 26px; line-height: 1;
    color: var(--color-primary, #2E7D32);
}
.sp-recibo p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; }
/* A promessa de volta. Vem logo depois de "está na fila", e antes do
   protocolo: o que a pessoa quer saber ao mandar um chamado é se alguém vai
   responder — o número serve para depois. */
.sp-volta { color: var(--color-text-mid, #666); font-size: 12px !important; }
.sp-volta strong { overflow-wrap: anywhere; }
.sp-protocolo { color: var(--color-text-mid, #666); font-size: 11.5px !important; }
.sp-protocolo code {
    font-size: 11.5px;
    padding: 2px 6px; border-radius: 5px;
    background: var(--color-bg-alt, #f4f4f4);
}
html.darkmode .sp-protocolo code { background: var(--color-surface-alt, #2D2D2D); }
.sp-outro {
    margin-top: 14px; height: 32px; padding: 0 14px;
    border: 1px solid var(--color-border, #dcdcdc); border-radius: 999px;
    background: none; color: inherit;
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sp-outro:hover { border-color: var(--color-primary, #2E7D32); }
.sp-outro:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}

/* No celular a pílula vira o ícone: a palavra ao lado cobre um pedaço real da
   tela, e ali o balão no canto já é o gesto que todo mundo conhece. O nome
   continua dito — pelo texto escondido, que o leitor de tela lê. */
@media (max-width: 560px) {
    .sp-raiz { right: 14px; bottom: calc(14px + var(--sp-piso)); }
    .sp-botao { width: 44px; padding: 0; justify-content: center; }
    .sp-botao span {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
    }
    .sp-botao i { font-size: 17px; }
}

/* Disponível negativo: reservado e executado passaram do aprovado. É o único
   número da faixa de KPIs que pede ação, e por isso é o único que muda de cor. */
.tl-kpi .val.orc-negativo { color: var(--color-negative, #c0392b); }

/* ── Campo de pares: uma instituição e o país dela por linha ─────────────
   Nasceu do convênio internacional, onde "às vezes o convênio é com umas 4
   universidades, cada uma de um país". O par instituicao/pais guardava só a
   primeira; uma lista de nomes por vírgula guardaria as quatro e perderia de
   qual país é cada uma — que é o dado de que a derivação de BRICS e região vai
   precisar depois.

   Grade de três colunas, e a mesma em todas as larguras. Empilhar no celular
   pediria esconder o cabeçalho, e aí os dois campos ficariam identificados só
   por placeholder — que some assim que se digita, bem quando a pessoa quer
   conferir se acertou a coluna. */
.fc-pares { display: grid; gap: 6px; }
.fc-par-cab, .fc-par {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 30px;
    gap: 6px;
    align-items: center;
}
.fc-par-cab {
    font-size: 10.5px; font-weight: var(--font-w-semibold, 600);
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted, #9e9e9e);
    padding: 0 2px;
}
/* Os campos herdam a forma dos outros da grade — pílula, mesma altura, mesmo
   anel de foco —, e não redesenham nada: duas gramáticas de campo no mesmo
   formulário se leem como dois formulários. */
.fc-pares input { min-width: 0; }
.fc-par-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 34px; padding: 0;
    border: none; border-radius: 9px;
    background: none; color: var(--color-text-muted, #9e9e9e);
    font-size: 13px; cursor: pointer;
    transition: background .12s, color .12s;
}
.fc-par-x:hover { background: var(--cgt-erro-bg, #FDECEA); color: var(--cgt-erro-fg, #C62828); }
.fc-par-x:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -2px;
}
html.darkmode .fc-par-x:hover { background: rgba(198, 40, 40, .18); }

/* Tracejado, e do tamanho do bloco: é o convite para a próxima linha, e não
   uma ação de peso igual ao Salvar logo abaixo. */
.fc-par-mais {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 2px; padding: 7px;
    border: 1px dashed var(--color-border, #dcdcdc); border-radius: 9px;
    background: none; color: var(--color-text-mid, #666);
    font-family: inherit; font-size: 12px; font-weight: var(--font-w-semibold, 600);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.fc-par-mais i { font-size: 12px; line-height: 1; }
.fc-par-mais:hover {
    border-color: var(--color-primary, #2E7D32); color: var(--color-primary, #2E7D32);
}
.fc-par-mais:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: 2px;
}

@media (max-width: 560px) {
    .fc-par-cab, .fc-par { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 26px; gap: 4px; }
    .fc-par-x { width: 26px; }
}

/* ── Repetidor de N colunas ──────────────────────────────────────────────
   O `pares` acima com o número de colunas aberto. A grade vem do próprio
   campo, por `--fc-cols`, porque o número muda por uso: sete colunas nos
   indicadores do plano de ação, duas ou três noutros. Uma classe por
   combinação encheria esta folha de nomes que só dizem um número.

   Rola na horizontal, e o cartão em volta não: sete colunas não cabem num
   celular, e deixar o formulário empurrar a página inteira para o lado é
   pior do que rolar a tabela. O `min-width` é o que dá o que rolar. */
.fc-linhas {
    display: grid; gap: 6px;
    overflow-x: auto;
}
.fc-linha-cab, .fc-linha {
    display: grid;
    grid-template-columns: var(--fc-cols, minmax(0, 1fr) 30px);
    gap: 6px;
    align-items: center;
    min-width: 480px;
}
.fc-linha-cab {
    font-size: 10.5px; font-weight: var(--font-w-semibold, 600);
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted, #9e9e9e);
    padding: 0 2px;
}
/* Mesma forma dos outros campos da grade — pílula, altura e anel de foco
   iguais. Duas gramáticas de campo no mesmo formulário se leem como dois
   formulários. */
.fc-linhas .fc-linha-c { min-width: 0; }

/* ── Grade de seis colunas, quando o formulário quer agrupar ─────────────
   `auto-fit` acomoda de três a um campo por linha e trata todos por igual —
   que é o certo para um formulário genérico e errado quando os campos se leem
   em grupos. Numa parceria são três grupos: com quem (parceiro e país),
   quando e para quê (as duas datas e o objeto), e com quem mais (a lista de
   instituições).

   Seis colunas porque seis divide por dois e por três: `span 4 + 2` faz a
   primeira linha, `2 + 2 + 2` faz a segunda, e `1 / -1` faz a terceira. */
.fc-grade-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Padrão de duas colunas — três campos por linha, que é o que `auto-fit` dava.
   Campo sem `span` declarado não muda de tamanho por causa dos vizinhos. */
.fc-grade-6 > label { grid-column: span 2; }
.fc-grade-6 > .fc-span-2 { grid-column: span 2; }
.fc-grade-6 > .fc-span-3 { grid-column: span 3; }
.fc-grade-6 > .fc-span-4 { grid-column: span 4; }
.fc-grade-6 > .fc-largo  { grid-column: 1 / -1; }

/* No estreito a grade de seis vira uma coluna, como a de `auto-fit` já fazia:
   `span 4` de seis num celular é um campo de 200px ao lado de um de 100px, e
   o país não cabe em 100px. */
@media (max-width: 720px) {
    .fc-grade-6 { grid-template-columns: 1fr; }
    .fc-grade-6 > label,
    .fc-grade-6 > .fc-span-2,
    .fc-grade-6 > .fc-span-3,
    .fc-grade-6 > .fc-span-4,
    .fc-grade-6 > .fc-largo { grid-column: 1 / -1; }
}

/* ── A nota do diagnóstico, editável na própria dimensão ─────────────────
   Campo estreito dentro da célula numérica: são dois por linha e sete linhas
   de IES, e um campo de largura cheia transformaria a tabela numa parede de
   caixas. O `type=number` traz as setas do navegador, que aqui ajudam — a
   nota anda de 5 em 5 na cabeça de quem avalia. */
.dm-nota {
    width: 72px; height: 28px; padding: 0 8px;
    border: 1px solid var(--color-border, #e0e0e0); border-radius: 7px;
    background: var(--color-background, #fff); color: var(--color-text, #1a1a1a);
    font-family: inherit; font-size: 13px; text-align: right;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s, background .3s;
}
.dm-nota:focus-visible {
    outline: 2px solid var(--color-primary, #2E7D32); outline-offset: -1px;
}
.dm-nota:disabled { opacity: .6; }
/* Verde que desbota: a confirmação precisa ser vista sem exigir leitura, e
   sumir sozinha — sete notas seguidas deixariam sete avisos na tela. */
.dm-nota-ok { background: var(--cgt-ok-bg, #E8F5E9); border-color: var(--color-primary, #2E7D32); }
.dm-nota-erro { border-color: var(--color-negative, #c0392b); background: var(--cgt-erro-bg, #FDECEA); }

/* ── A nota de rodapé da tabela por região ───────────────────────────────
   Ela existe para o PAPEL. Na tela, quem lê a tabela tem o sistema inteiro em
   volta para perguntar; impressa ou em PDF, a tabela viaja sozinha — e um
   número de BRICS sem a nota é um número que o leitor não tem como conferir.

   `print` não a esconde, ao contrário do resto do enfeite: é justamente na
   impressão que ela mais serve. */
.tb-nota-brics {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text-muted, #8a8a8a);
    max-width: 92ch;
}
@media print {
    .tb-nota-brics { color: #000; font-size: 9pt; break-inside: avoid; }
}

/* Checklist — o inventario da IES, e nao mais um campo de texto.
   Duas colunas em tela larga, uma no telefone: oito linhas empilhadas viram
   uma coluna alta que empurra o resto do formulario para fora da vista.
   A caixa fica com 20px e a linha inteira e' o alvo de clique — a regra de
   44px de area toca aqui, e um quadradinho de 13px nao a cumpre. */
.fc-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 16px;
  margin-top: 4px;
}
.fc-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  margin: 0;
  border-radius: 6px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}
.fc-check-item:hover { background: var(--color-surface, #f3f4f6); }
.fc-check-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primary, #1f6b3b);
  cursor: pointer;
}
/* O foco vai na LINHA, e nao so' na caixa: quem navega por teclado precisa
   ver qual item esta' selecionado, e um anel de 20px ao lado de um texto de
   40 caracteres nao diz qual e'. */
.fc-check-item:focus-within {
  outline: 2px solid var(--color-primary, #1f6b3b);
  outline-offset: 1px;
  background: var(--color-surface, #f3f4f6);
}
.fc-check-item span { flex: 1 1 auto; }
@media (max-width: 640px) {
  .fc-check { grid-template-columns: 1fr; }
}