/* 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; }
}

.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; }
.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; }
.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; }

/* ── 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; }

/* 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 {
    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); }

.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); }

/* ── 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;
}
.fc-dica {
    font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0;
    color: var(--color-text-muted, #9e9e9e);
}

/* 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. */
.cf-implant-itens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 18px 4px;
}
.cf-implant-mais {
    font-size: 12px;
    color: var(--color-text-muted, #888);
    align-self: center;
}
.cf-implant-vazio {
    margin: 10px 18px 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-mid, #666);
}
/* O formulário dentro do bloco 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; }

/* ── Á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;
}
.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);
}