/* Folha das PÁGINAS-DOCUMENTO do site público (Transparência, Termos).
   Extraída de `transparencia.html` no mesmo dia em que a segunda página
   nasceu: duas cópias de cem linhas de estilo divergem, e divergem
   justamente nos documentos que precisam sair iguais no papel.

   Princípio: isto é um DOCUMENTO, não uma peça de conversão — coluna
   estreita, entrelinha larga, tabelas legíveis, nada que se mova. */
/* Esta página é um DOCUMENTO, não uma peça de conversão: coluna estreita,
   entrelinha larga, tabelas legíveis e nada que se mova. Ela existe para ser
   lida inteira, impressa e encaminhada ao setor jurídico de um órgão. */
.tema-btn{background:var(--surface-sunken);color:var(--text-muted);
  border-color:var(--border-default);width:44px;height:44px;}
.tema-btn:hover{background:var(--border-default);color:var(--text-default);}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text-default);
  background:var(--surface-app);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;
  transition:color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--text-heading)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--surface-card);
  color:var(--text-heading);padding:.8rem 1.2rem;border-radius:0 0 var(--radius-md) 0;
  font-weight:var(--weight-semibold);box-shadow:var(--shadow-lg)}
.skip:focus{left:0}
/* topo */
.barra{position:sticky;top:0;z-index:40;background:var(--surface-barra-topo);
  border-bottom:1px solid var(--border-default);backdrop-filter:saturate(180%) blur(8px)}
.barra .in{max-width:920px;margin:0 auto;padding:12px 24px;display:flex;
  align-items:center;gap:16px}
.barra .marca{display:flex;align-items:center;gap:10px;text-decoration:none}
/* O símbolo troca de arte com o tema — a versão azul-marinho desaparece sobre
   o fundo escuro. Mesma solução da página inicial (`home.html`), e não uma
   nova: fundo em CSS, uma linha por tema. */
.barra .simbolo{display:block;width:26px;height:26px;flex:0 0 auto;
  background:url('/media/brand/logo-symbol.svg') center/contain no-repeat}
[data-theme="dark"] .barra .simbolo{
  background-image:url('/media/brand/logo-symbol-white.svg')}
.barra .marca span{color:var(--text-heading);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-open)}
.barra .dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1.5px solid transparent;border-radius:var(--radius-md);font-family:inherit;
  font-weight:var(--weight-semibold);cursor:pointer;transition:var(--transition-base);
  padding:.55rem 1.1rem;font-size:var(--text-body-sm);min-height:44px;
  text-decoration:none;white-space:nowrap}
.btn-sec{background:var(--surface-card);color:var(--text-heading);
  border-color:var(--border-default)}
.btn-sec:hover{border-color:var(--royal-500);color:var(--text-heading)}
/* corpo */
.doc{max-width:920px;margin:0 auto;padding:0 24px 96px}
.cabeca{padding:64px 0 40px;border-bottom:1px solid var(--border-default);
  margin-bottom:8px}
h1{font-size:var(--display-md);color:var(--text-heading);
  font-weight:var(--weight-bold);letter-spacing:-0.01em;line-height:1.15;
  text-wrap:balance}
.sub{margin-top:16px;color:var(--text-muted);font-size:var(--text-body-lg);
  line-height:1.65;max-width:62ch}
.carimbo{margin-top:20px;font-size:var(--text-small);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
h2{font-size:var(--text-h2,1.5rem);color:var(--text-heading);
  font-weight:var(--weight-bold);letter-spacing:-0.005em;margin:56px 0 14px;
  scroll-margin-top:76px;line-height:1.25}
h3{font-size:var(--text-h4);color:var(--text-heading);
  font-weight:var(--weight-semibold);margin:28px 0 8px}
p{line-height:1.7;margin-bottom:14px;max-width:70ch}
ul,ol{margin:0 0 16px 1.25rem;line-height:1.7;max-width:70ch}
li{margin-bottom:8px}
b,strong{color:var(--text-strong);font-weight:var(--weight-semibold)}
code{font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.92em;background:var(--surface-sunken);padding:1px 5px;
  border-radius:var(--radius-sm)}
/* sumário */
.sumario{background:var(--surface-card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);padding:22px 26px;margin:32px 0 8px}
.sumario .tt{font-size:var(--text-small);text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);font-weight:var(--weight-semibold);
  margin-bottom:10px}
.sumario ol{margin:0 0 0 1.15rem;line-height:1.9}
/* Medido no celular: os itens de UMA linha do sumário davam 20 px de altura de
   alvo. São nove links de navegação, não links no meio de uma frase — no dedo
   isso erra. O calço só entra no ponteiro grosso: no desktop, nove itens a
   44 px transformariam o sumário num bloco de 400 px. */
/* Sem sublinhado em repouso: numa LISTA de navegação ele não distingue nada —
   todos os itens são links — e serrilha o bloco. Volta no cursor e no foco de
   teclado, onde volta a ser informação. */
.sumario ol a{display:inline-block;text-decoration:none}
.sumario ol a:hover,.sumario ol a:focus-visible{text-decoration:underline}
@media(pointer:coarse){
  .sumario ol{line-height:1.5}
  .sumario ol a{padding:11px 0;min-height:44px}
}
/* tabelas */
.rolagem{overflow-x:auto;margin:18px 0 22px;border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);background:var(--surface-card)}
table{border-collapse:collapse;width:100%;min-width:560px;
  font-size:var(--text-body-sm)}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-default);
  vertical-align:top;line-height:1.55}
th{font-weight:var(--weight-semibold);color:var(--text-heading);
  background:var(--surface-sunken);white-space:nowrap}
tr:last-child td{border-bottom:0}
td b{white-space:nowrap}
/* o caminho do exame */
.passos{counter-reset:passo;margin:22px 0 26px;padding:0;list-style:none}
.passos li{counter-increment:passo;position:relative;padding:0 0 22px 52px;
  margin:0;border-left:2px solid var(--border-default);margin-left:15px}
.passos li:last-child{border-left-color:transparent;padding-bottom:0}
.passos li::before{content:counter(passo);position:absolute;left:-16px;top:-2px;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--gradient-royal);color:#fff;font-weight:var(--weight-bold);
  font-size:var(--text-small);font-variant-numeric:tabular-nums}
.passos .t{display:block;font-weight:var(--weight-semibold);
  color:var(--text-heading);margin-bottom:4px}
.passos p{margin:0;font-size:var(--text-body-sm);color:var(--text-muted)}
/* caixas */
.caixa{border-left:3px solid var(--royal-600);background:var(--status-info-surface);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:16px 20px;margin:20px 0}
.caixa.aviso{border-left-color:var(--warning-600);
  background:var(--status-warning-surface)}
.caixa .tt{display:flex;align-items:center;gap:8px;
  font-weight:var(--weight-bold);color:var(--text-strong);margin-bottom:6px}
.caixa p:last-child{margin-bottom:0}
.caixa p{font-size:var(--text-body-sm)}
/* rodapé */
.rodape{border-top:1px solid var(--border-default);padding:32px 24px;
  color:var(--text-muted);font-size:var(--text-small)}
.rodape .in{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between}
/* ---------------------------- PAPEL ----------------------------
   Papel não tem tema. O mesmo documento tem de sair igual venha de onde vier,
   e no tema escuro ele saía com texto claro sobre superfícies pintadas.
   As cores do tema CLARO são reafirmadas aqui, montadas a partir das RAMPAS
   (`--neutral-*`, `--royal-*`, `--white`), que não mudam com o tema — nenhuma
   cor literal entra nesta folha.
   O seletor com `[data-theme="dark"]` é o que vence: sem ele, a redeclaração
   empataria em especificidade com o bloco escuro do design system e dependeria
   só da ordem dos arquivos. */
@media print{
  :root,:root[data-theme="dark"]{
    color-scheme:light;
    --text-strong:var(--neutral-900); --text-default:var(--neutral-800);
    --text-muted:var(--neutral-500); --text-subtle:var(--neutral-400);
    --text-link:var(--royal-600); --text-brand:var(--royal-600);
    --text-heading:var(--royal-800); --text-heading-2:var(--royal-700);
    --surface-app:var(--white); --surface-card:var(--white);
    --surface-sunken:var(--neutral-100); --surface-soft:var(--royal-50);
    --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
    --status-info-surface:var(--royal-50);
    --status-warning-surface:var(--warning-50);
    --status-warning-text:var(--warning-700);
  }
  .barra,.skip,.imprimir{display:none}
  /* O fundo é declarado à parte porque `body` já o pinta com o token: sem esta
     linha, a superfície do tema escuro sobreviveria à troca dos tokens em
     navegador que ignore a herança dentro do @media. */
  body{background:var(--white);color:var(--text-default)}
  /* Os discos numerados e os filetes coloridos das caixas são o que faz o
     documento impresso continuar legível como documento. Sem isto, o
     navegador descarta os fundos por padrão. */
  .passos li::before,.caixa,th{-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .rolagem,.sumario{box-shadow:none;border:1px solid var(--neutral-300)}
  /* No papel não há para onde clicar: o azul e o sublinhado viram ruído.
     A cor é declarada pelo TOKEN, e não por `inherit`: `inherit` depende do
     elemento em que o link estiver, e num sumário dentro de cartão isso já
     rendeu um azul de tema escuro sobrevivendo à troca. Token não depende de
     onde o link está. */
  a{color:var(--text-default);text-decoration:none}
}
@media(max-width:640px){
  h1{font-size:var(--display-sm)}
  .cabeca{padding:40px 0 28px}
}