/* =============================================================================
   GovOne · tokens e componentes comuns
   Carregado pelas TRÊS cascas. Um componente só entra aqui se mais de uma
   casca o usa — foi medido nos templates, não suposto.
   ========================================================================== */
/* =============================================================================
   Sistema visual. As telas não inventam estilo próprio: compõem estes blocos.

   A paleta é a do Admin GovOne África (`admin-govone-africa/prototype`) — verde
   #249346 sobre branco, com o conteúdo recuado em #eef1f5. Substituiu o padrão
   gov.br em 17/09/2026; os nomes de classe e de token ficaram os mesmos de
   propósito, para que as 69 telas herdassem a troca sem serem tocadas.
   ========================================================================== */

:root {
  /* cor — identidade GovOne, medida em `admin-govone-africa/prototype`
     (colors.css, button.css, table.css, card.css). O que era o padrão gov.br
     — azul #1351b4 e faixa amarela — saiu inteiro. */
  --gov-primary: #249346;
  --gov-primary-dark: #007c3c;
  --gov-primary-soft: #e9f5ed;
  --gov-primary-line: #bfe1cb;
  /* Âmbar, e não mais o amarelo do gov.br: o token sobreviveu porque o mapa de
     calor precisa de um degrau entre o verde e o vermelho. Não é assinatura
     de marca em lugar nenhum — a faixa de 3px da barra superior saiu. */
  --gov-accent: #e8a33d;
  /* gráficos: slots 1 e 2 da paleta categórica, validados com
     validate_palette (claro sobre #fff, escuro sobre #182029): ΔE de visão
     normal 33,6 / 31,8, contraste ≥ 3:1. Série única usa --gov-primary. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --gov-success: #047857;
  --gov-success-soft: #d1fae5;
  --gov-warning: #6b5a14;
  --gov-warning-soft: #fef8e2;
  --gov-danger: #dc2626;
  --gov-danger-soft: #fef2f2;
  --gov-info-soft: #e6f0fb;
  /* Tons que estavam fixos dentro das etiquetas e dos recados. Viraram token
     quando o tema escuro entrou: `color: #0d5c16` sobre um fundo que escurece
     é texto escuro sobre fundo escuro — a etiqueta "concluída" sumia. */
  --gov-neutral-soft: #eef1f5;
  --gov-neutral-ink: #414a56;
  --gov-neutral-line: #dfe4ea;
  --gov-success-ink: #0d5c16;
  --gov-success-line: #bfe3c4;
  --gov-warning-line: #f4dcb4;
  --gov-danger-line: #f6c9c5;
  /* Petróleo: título de cartão e botão de voltar. É a segunda cor da
     identidade — estrutura, nunca ação. */
  --gov-petrol: #264259;

  --gov-surface: #ffffff;
  --gov-bg: #eef1f5;
  --gov-bg-alt: #f9fafb;
  --gov-border: #e5e7eb;
  --gov-border-strong: #d1d5db;
  --gov-text: #111827;
  /* usado em .breadcrumb-item.active; sem declarar, o item ativo herdava a cor
     do link e o "você está aqui" ficava igual ao resto da trilha */
  --gov-ink: #111827;
  --gov-text-soft: #374151;
  --gov-muted: #6b7280;

  /* Menu claro (onda 3): a onda 2 escureceu o menu para tirar peso da barra
     lateral. A identidade nova resolve o mesmo problema por outro caminho —
     o menu fica branco e quem recua é o **fundo** do conteúdo (#eef1f5), de
     modo que o cartão branco é o que salta. O verde aparece só no item ativo. */
  --gov-nav-bg: #ffffff;
  --gov-nav-bg-hover: #f3f4f6;
  --gov-nav-bg-active: #f3f4f6;
  --gov-nav-text: #111827;
  --gov-nav-text-active: #111827;
  --gov-nav-section: #9ca3af;
  --gov-nav-marker: var(--gov-primary);

  /* tipografia — Inter, servida de `static/vendor/inter/` */
  --gov-font: 'Inter', 'Segoe UI', Roboto, -apple-system, system-ui, sans-serif;

  /* forma */
  /* 6px no que se clica, 8px no que contém — a proporção da referência.
     Era 8/12, e o cartão de 12px destoava do campo dentro dele. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
  --sh-3: 0 10px 15px -3px rgba(16, 24, 40, .10), 0 4px 6px -2px rgba(16, 24, 40, .05);

  /* espaço */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  /* usado em .empty--page; sem declarar, o padding de baixo virava zero e o
     estado vazio encostava na borda */
  --s-7: 3rem;
}

/* ------------------------------------------------------------------ ícones */
/* SVG de traço herdando a cor do texto: o ícone acompanha o rótulo em peso e
   em cor, inclusive quando o item está ativo ou desabilitado. */
.icon { display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.icon--grande { width: 2rem; height: 2rem; stroke-width: 1.25; opacity: .55; }
.panel__title-icon .icon { vertical-align: -.2em; }
.empty__icon .icon { color: var(--gov-muted); }

/* -------------------------------------------------------------- skip link */
/* Primeiro elemento focável da página: quem navega por teclado não deve
   percorrer dezoito itens de menu para chegar ao conteúdo. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  background: var(--gov-primary); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------- base */
body {
  background: var(--gov-bg);
  color: var(--gov-text);
  font-family: var(--gov-font);
  font-size: .9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -.01em; color: var(--gov-text); }
a { color: var(--gov-primary); text-decoration: none; }
a:hover { color: var(--gov-primary-dark); text-decoration: underline; }
code { color: var(--gov-primary-dark); background: var(--gov-primary-soft); padding: 0 .25rem;
       border-radius: var(--r-sm); font-size: .82em; }
.text-muted { color: var(--gov-muted) !important; }
hr { border-color: var(--gov-border); opacity: 1; }

::selection { background: var(--gov-primary-soft); }
*:focus-visible { outline: 2px solid var(--gov-primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- navbar */
/* Branca, e sem a faixa amarela: a barra deixou de ser a marca e virou o lugar
   de quem está logado e do que chegou. Quem carrega a identidade agora é o menu
   (marca no topo) e o verde do que se clica. A sombra cai para a direita porque
   o menu fica à esquerda — as duas superfícies brancas precisam se separar. */
.navbar-gov {
  background: var(--gov-surface);
  box-shadow: 2px 1px 4px rgba(16, 24, 40, .08);
  padding: .35rem 0;
  position: relative; z-index: 1020;
}
.navbar-gov .navbar-brand {
  color: var(--gov-text); font-weight: 700; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem;
}
.navbar-gov .navbar-brand__mark {
  width: 28px; height: 28px; border-radius: var(--r-md); background: var(--gov-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
}
.navbar-gov .nav-link, .navbar-gov .dropdown-toggle { color: var(--gov-text-soft); }

/* Botão que recolhe o menu. Sem moldura: é ferramenta, não ação. */
.navbar-toggle {
  border: 0; background: none; color: var(--gov-muted); padding: .3rem;
  display: inline-flex; align-items: center; border-radius: var(--r-md); line-height: 1;
}
.navbar-toggle:hover { background: var(--gov-nav-bg-hover); color: var(--gov-text); }

/* Nome **e** e-mail, como na referência: em órgão grande há homônimo, e o
   e-mail é o que diz qual conta está aberta. */
.navbar-user { display: flex; align-items: center; gap: .5rem; color: var(--gov-text-soft); }
.navbar-user__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gov-primary-soft); color: var(--gov-primary-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
}
.navbar-user__name { line-height: 1.15; font-size: .85rem; font-weight: 500; color: var(--gov-text); }
.navbar-user__role { font-size: .72rem; font-weight: 400; color: var(--gov-muted); }
.organ-switch .btn { border-color: var(--gov-border-strong); color: var(--gov-text-soft); font-size: .8rem; }
.organ-switch .btn:hover { background: var(--gov-bg-alt); border-color: var(--gov-muted); }

/* Sino: a contagem é o dado; o ícone sozinho não diz nada. */
.navbar-sino { position: relative; display: inline-flex; color: var(--gov-muted); padding: .3rem; }
.navbar-sino__contagem {
  position: absolute; top: -.1rem; right: -.2rem;
  background: var(--gov-danger); color: #fff; font-size: .62rem; font-weight: 700;
  border-radius: var(--r-pill); padding: 0 .3rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ page shell */
.page { padding: var(--s-4) var(--s-2) var(--s-6); }
/* Trilha de navegação: é a única orientação de contexto no portal (sem menu lateral),
   então precisa ser legível — não um rodapé cinza de 0.8rem. */
.breadcrumbs {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--gov-border);
}
.breadcrumb {
  font-size: .82rem;
  margin: 0;
  flex-wrap: wrap;
  row-gap: .15rem;
}
.breadcrumb-item a {
  color: var(--gov-muted);
  text-decoration: none;
  border-radius: var(--r-sm, 4px);
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible { color: var(--gov-primary); text-decoration: underline; }
.breadcrumb-item.active { color: var(--gov-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item { padding-left: .4rem; }
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--gov-muted);
  padding-right: .4rem;
}
.breadcrumb-item__home { font-weight: 600; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.page-head__title { font-size: 1.35rem; margin: 0; }
.page-head__subtitle { color: var(--gov-muted); font-size: .85rem; margin: .15rem 0 0; max-width: 62ch; }
.page-head__meta { display: flex; align-items: center; gap: var(--s-2); margin-top: .35rem; flex-wrap: wrap; }
.page-head__actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ----------------------------------------------------------------- panel */
/* O cartão passou a se separar do fundo por **sombra**, não por borda: o fundo
   recuou para #eef1f5 e a borda virou ruído. A borda de 1px continua, quase
   invisível, só para o cartão não sumir em tela de contraste baixo. */
.panel {
  background: var(--gov-surface); border: 1px solid var(--gov-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); margin-bottom: var(--s-4);
}
/* Sem linha embaixo: quando o corpo é uma tabela, o próprio cabeçalho dela
   (fundo cinza) já faz a separação, e duas linhas seguidas viravam degrau. */
.panel__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-2);
}
.panel__title { font-weight: 700; font-size: .95rem; margin: 0; display: flex; align-items: center; gap: .45rem;
                color: var(--gov-petrol); }
.panel__title-icon {
  width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--gov-primary-soft);
  color: var(--gov-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem;
}
.panel__meta { color: var(--gov-muted); font-size: .8rem; }
.panel__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.panel__body { padding: var(--s-4); }
.panel__body--flush { padding: 0; }
.panel__foot { padding: .65rem var(--s-4); border-top: 1px solid var(--gov-border); background: var(--gov-bg-alt);
               border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: .82rem;
               display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
               flex-wrap: wrap; color: var(--gov-muted); }

/* --------------------------------------------------------------- toolbar */
.toolbar {
  background: var(--gov-surface); border: 1px solid var(--gov-border); border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); box-shadow: var(--sh-1);
}
.toolbar__row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end; }
.toolbar__field { display: flex; flex-direction: column; gap: .2rem; min-width: 11rem; flex: 1 1 11rem; }
.toolbar__field--grow { flex: 2 1 18rem; }
.toolbar__field--auto { flex: 0 0 auto; min-width: 0; }
.toolbar__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--gov-muted); font-weight: 600; }
.toolbar__actions { display: flex; gap: var(--s-2); align-items: flex-end; }

/* ------------------------------------------------------------------ tags */
.tag {
  display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem;
  border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.tag--neutral { background: var(--gov-neutral-soft); color: var(--gov-neutral-ink); border-color: var(--gov-neutral-line); }
.tag--info { background: var(--gov-primary-soft); color: var(--gov-primary-dark); border-color: var(--gov-primary-line); }
.tag--success { background: var(--gov-success-soft); color: var(--gov-success-ink); border-color: var(--gov-success-line); }
.tag--warning { background: var(--gov-warning-soft); color: var(--gov-warning); border-color: var(--gov-warning-line); }
.tag--danger { background: var(--gov-danger-soft); color: var(--gov-danger); border-color: var(--gov-danger-line); }
.tag--plain::before { display: none; }

/* ---------------------------------------------------------------- tabela */
.table-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.data-table { width: 100%; margin: 0; font-size: .875rem; border-collapse: separate; border-spacing: 0; }
/* Cinza cheio e sem caixa alta, como na referência: o cabeçalho para de gritar
   e a coluna de protocolo, que é o que se procura, volta a ser o mais escuro
   da tabela. Arredonda só nas pontas — a tabela é o corpo do cartão. */
.data-table thead th {
  background: var(--gov-border); color: var(--gov-muted); font-size: .78rem; font-weight: 500;
  letter-spacing: 0; padding: .55rem var(--s-4);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.data-table thead tr > th:first-child { border-top-left-radius: var(--r-md); }
.data-table thead tr > th:last-child { border-top-right-radius: var(--r-md); }
.data-table tbody td { padding: .6rem var(--s-4); border-bottom: 1px solid var(--gov-border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--gov-bg-alt); }
.data-table__primary { font-weight: 600; color: var(--gov-text); }
.data-table__sub { color: var(--gov-muted); font-size: .78rem; margin-top: .1rem; }
.data-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table__actions { text-align: right; white-space: nowrap; width: 1%; }
/* Uma densidade só, decidida em 18/09/2026 olhando as três lado a lado.
   Havia um `.data-table--compact` que tirava 6px da linha — uma linha a mais por
   tela — e estava em 18 listagens e ausente em 23, sem critério. Diferença que
   ninguém escolheu não é variante, é deriva; por isso a regra saiu junto com os
   usos, em vez de ficar disponível para alguém reintroduzir a divergência. */

/* ------------------------------------------------------------ empty state */
.empty { text-align: center; padding: var(--s-6) var(--s-4); }
.empty__icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gov-primary-soft);
  color: var(--gov-primary); display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: var(--s-3);
}
.empty__title { font-weight: 600; margin: 0 0 .2rem; }
.empty__text { color: var(--gov-muted); font-size: .85rem; margin: 0 auto var(--s-3); max-width: 46ch; }
.empty__actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* páginas de erro usam o mesmo bloco vazio, com respiro maior */
.empty--page { padding: var(--s-6) var(--s-4) var(--s-7); }
.empty--page .empty__icon { width: 60px; height: 60px; font-size: 1.6rem; }
.empty--page .empty__title { font-size: 1.25rem; }

/* --------------------------------------------------------------- métricas
   Ícone tingido, número grande, e um rodapé cinza com o caminho para o detalhe.
   A barra lateral de 4px continua: ela codifica o tom para quem não distingue
   as cores do ícone, e é o que sobra quando o cartão não tem ícone. */
.metric {
  background: var(--gov-surface); border: 1px solid var(--gov-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
}
.metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gov-primary); }
.metric--success::before { background: var(--gov-success); }
.metric--warning::before { background: var(--gov-warning); }
.metric--danger::before { background: var(--gov-danger); }
.metric--neutral::before { background: var(--gov-border-strong); }

.metric__corpo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); flex: 1; }
.metric__icone {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gov-bg); color: var(--gov-text-soft);
}
.metric--info .metric__icone { background: var(--gov-primary-soft); color: var(--gov-primary-dark); }
.metric--success .metric__icone { background: var(--gov-success-soft); color: var(--gov-success); }
.metric--warning .metric__icone { background: var(--gov-warning-soft); color: var(--gov-warning); }
.metric--danger .metric__icone { background: var(--gov-danger-soft); color: var(--gov-danger); }
.metric__numeros { min-width: 0; }
.metric__label { font-size: .8rem; color: var(--gov-muted); font-weight: 500; }
.metric__value { font-size: 1.75rem; font-weight: 700; line-height: 1.05;
                 font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Rodapé: separa "o que é" de "para onde ir". Sem ele o número fica sem saída. */
.metric__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  flex-wrap: wrap;
  padding: .6rem var(--s-4);
  background: var(--gov-bg-alt); border-top: 1px solid var(--gov-border);
}
.metric__hint { font-size: .78rem; color: var(--gov-muted); }
.metric__link { font-size: .78rem; font-weight: 600; margin-left: auto; white-space: nowrap; }
/* compatibilidade */
.stat-tile { border-left: 4px solid var(--gov-primary); }
.stat-tile .value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-tile .label { color: var(--gov-muted); font-size: .78rem; }

/* --------------------------------------------------------- lista chave/valor */
.kv { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: .1rem var(--s-3); font-size: .85rem; }
.kv__key { color: var(--gov-muted); padding: .3rem 0; }
.kv__value { padding: .3rem 0; border-bottom: 1px solid var(--gov-border); }
.kv__value:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- timeline */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline > li { position: relative; padding: 0 0 var(--s-4) var(--s-5); border-left: 2px solid var(--gov-border); }
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline > li::before {
  content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gov-surface); border: 3px solid var(--gov-primary);
}
/* três situações, não duas: a fase que ainda não começou existe na tela desde
   que a linha do tempo passou a vir do desenho (RF-001/RF-006) */
.timeline > li.is-concluida::before { border-color: var(--gov-success); background: var(--gov-success); }
.timeline > li.is-atual::before { border-color: var(--gov-primary); background: var(--gov-primary);
                                  box-shadow: 0 0 0 4px var(--gov-primary-soft); }
.timeline > li.is-futura::before { border-color: var(--gov-border); background: var(--gov-surface); }
.timeline > li.is-futura { color: var(--gov-muted); }
.timeline > li.is-futura .timeline__title { font-weight: 500; }
.timeline > li.is-late::before { border-color: var(--gov-danger); background: var(--gov-danger); }
/* nomes antigos preservados: outras telas ainda os usam */
.timeline > li.is-done::before { border-color: var(--gov-success); background: var(--gov-success); }
.timeline > li.is-current::before { border-color: var(--gov-primary); background: var(--gov-primary);
                                    box-shadow: 0 0 0 4px var(--gov-primary-soft); }
.timeline .when { font-size: .74rem; color: var(--gov-muted); font-variant-numeric: tabular-nums; }
.timeline__title { font-weight: 600; font-size: .875rem; }

/* --------------------------------------------------------------- botões
   Alimentamos as **variáveis** do Bootstrap, não as propriedades.

   Antes era `.btn-primary { background: ... }`, e isso só acerta o estado
   parado: `.btn:disabled` e `.btn:active` são do Bootstrap, têm especificidade
   maior (0,2,0 contra 0,1,0) e leem `--bs-btn-disabled-color`. O botão
   "Salvar campos" do construtor de formulários, que nasce desabilitado, saía
   **azul** no meio da tela verde. Passava despercebido enquanto a nossa
   primária também era azul; a troca de identidade revelou o defeito.

   Com as variáveis, os cinco estados seguem a paleta de uma vez só. */
.btn { border-radius: var(--r-md); font-weight: 500; }
.btn-sm { font-size: .8rem; padding: .28rem .6rem; }

.btn-primary {
  --bs-btn-bg: var(--gov-primary);
  --bs-btn-border-color: var(--gov-primary);
  --bs-btn-hover-bg: var(--gov-primary-dark);
  --bs-btn-hover-border-color: var(--gov-primary-dark);
  --bs-btn-active-bg: var(--gov-primary-dark);
  --bs-btn-active-border-color: var(--gov-primary-dark);
  /* desabilitado é o verde lavado da referência (#4ba064): continua legível
     como "este é o botão principal", e continua dizendo "agora não" */
  --bs-btn-disabled-bg: #4ba064;
  --bs-btn-disabled-border-color: #4ba064;
  --bs-btn-focus-shadow-rgb: 36, 147, 70;
}
.btn-outline-primary {
  --bs-btn-color: var(--gov-primary-dark);
  --bs-btn-border-color: var(--gov-primary-line);
  --bs-btn-hover-bg: var(--gov-primary);
  --bs-btn-hover-border-color: var(--gov-primary);
  --bs-btn-active-bg: var(--gov-primary-dark);
  --bs-btn-active-border-color: var(--gov-primary-dark);
  --bs-btn-disabled-color: var(--gov-muted);
  --bs-btn-disabled-border-color: var(--gov-border-strong);
  --bs-btn-focus-shadow-rgb: 36, 147, 70;
}
.btn-success {
  --bs-btn-bg: var(--gov-success);
  --bs-btn-border-color: var(--gov-success);
  --bs-btn-hover-bg: #036446;
  --bs-btn-hover-border-color: #036446;
  --bs-btn-active-bg: #036446;
  --bs-btn-active-border-color: #036446;
  --bs-btn-focus-shadow-rgb: 4, 120, 87;
}
.btn-danger {
  --bs-btn-bg: var(--gov-danger);
  --bs-btn-border-color: var(--gov-danger);
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-link { --bs-btn-color: var(--gov-primary-dark); --bs-btn-hover-color: var(--gov-primary);
            text-decoration: none; }

/* A paginação também é do Bootstrap e também vinha azul por variável. */
.pagination {
  --bs-pagination-color: var(--gov-text-soft);
  --bs-pagination-hover-color: var(--gov-primary-dark);
  --bs-pagination-hover-bg: var(--gov-bg-alt);
  --bs-pagination-focus-color: var(--gov-primary-dark);
  --bs-pagination-focus-bg: var(--gov-primary-soft);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(36, 147, 70, .25);
  --bs-pagination-active-bg: var(--gov-primary);
  --bs-pagination-active-border-color: var(--gov-primary);
  --bs-pagination-border-color: var(--gov-border-strong);
  --bs-pagination-disabled-color: var(--gov-muted);
  --bs-pagination-disabled-border-color: var(--gov-border);
}

/* E o que o Bootstrap chama de "primária" fora do botão: `.text-primary`,
   `.border-primary`, o `:checked` do formulário, o foco do `.form-control`. */
:root {
  --bs-primary: #249346;
  --bs-primary-rgb: 36, 147, 70;
  --bs-link-color: #007c3c;
  --bs-link-color-rgb: 0, 124, 60;
  --bs-link-hover-color: #249346;
  --bs-link-hover-color-rgb: 36, 147, 70;
  --bs-focus-ring-color: rgba(36, 147, 70, .25);
}

/* --------------------------------------------------------------- formulário */
.form-label { font-size: .82rem; font-weight: 600; color: var(--gov-text-soft); margin-bottom: .2rem; }
.form-control, .form-select {
  border-color: var(--gov-border-strong); border-radius: var(--r-md); font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gov-primary); box-shadow: 0 0 0 3px var(--gov-primary-soft);
}
.form-text { font-size: .76rem; color: var(--gov-muted); }
.form-check-input:checked { background-color: var(--gov-primary); border-color: var(--gov-primary); }

/* --------------------------------------------------------------- alertas */
.alert { border-radius: var(--r-md); border-width: 1px; font-size: .875rem; }
.alert-info { background: var(--gov-info-soft); border-color: var(--gov-primary-line); color: var(--gov-primary-dark); }
.alert-success { background: var(--gov-success-soft); border-color: var(--gov-success-line); color: var(--gov-success-ink); }
.alert-warning { background: var(--gov-warning-soft); border-color: var(--gov-warning-line); color: var(--gov-warning); }
.alert-danger { background: var(--gov-danger-soft); border-color: var(--gov-danger-line); color: var(--gov-danger); }
.alert-secondary { background: var(--gov-bg-alt); border-color: var(--gov-border); color: var(--gov-text-soft); }

/* -------------------------------------------------------------- wizard */
.wizard-steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--s-4);
                padding-bottom: var(--s-2); border-bottom: 1px solid var(--gov-border); }
.wizard-steps .step {
  padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--gov-neutral-soft); color: var(--gov-text-soft);
  font-size: .8rem; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent;
}
.wizard-steps .step.current { background: var(--gov-primary); color: #fff; font-weight: 600; }
.wizard-steps .step.done { background: var(--gov-success-soft); color: var(--gov-success-ink); border-color: var(--gov-success-line); }
.wizard-steps .step.done::before { content: '✓'; font-weight: 700; }

/* ------------------------------------------- formulários por etapa (processo) */
.step-card { border: 1px solid var(--gov-border); border-radius: var(--r-md);
             padding: var(--s-3); margin-bottom: var(--s-3); background: var(--gov-surface); }
.step-card--empty { background: var(--gov-bg-alt); border-style: dashed; }
.step-card__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step-card__badge {
  background: var(--gov-primary-soft); color: var(--gov-primary-dark); border-radius: var(--r-sm);
  padding: .05rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}
.step-card__badge--optional { background: var(--gov-neutral-soft); color: var(--gov-text-soft); }
.step-card__tools { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.step-list { list-style: none; padding-left: 0; margin: var(--s-2) 0 0; }
.step-list > li {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem;
  border: 1px solid var(--gov-primary-line); border-left: 3px solid var(--gov-primary);
  background: var(--gov-primary-soft); border-radius: var(--r-sm); margin-bottom: .3rem;
}
.step-list > li.missing { border-color: var(--gov-danger-line); border-left-color: var(--gov-danger); background: var(--gov-danger-soft); }
.step-list__order {
  min-width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gov-primary); color: #fff; border-radius: 50%; font-size: .7rem; font-weight: 700;
}

/* ------------------------------------------------------------- utilidades */
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.cluster { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.muted-box { background: var(--gov-bg-alt); border: 1px solid var(--gov-border);
             border-radius: var(--r-md); padding: var(--s-3); }
.scroll-y { overflow-y: auto; }
.tabular { font-variant-numeric: tabular-nums; }


/* -------------------------------------- painel de propriedades do construtor */
.props-section {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--gov-muted); margin: var(--s-4) 0 var(--s-2);
  padding-bottom: .2rem; border-bottom: 1px solid var(--gov-border);
}
.option-row {
  display: grid; grid-template-columns: 1.4rem 1fr 1fr 1.2rem; gap: .35rem;
  align-items: center; margin-bottom: .3rem;
}
.option-row__handle {
  width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gov-primary-soft); color: var(--gov-primary-dark);
  border-radius: 50%; font-size: .68rem; font-weight: 700;
}
.field-card__rules {
  margin-top: .3rem; font-size: .72rem; color: var(--gov-muted);
  background: var(--gov-bg-alt); border-radius: var(--r-sm); padding: .1rem .35rem; display: inline-block;
}

.data-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  overflow-wrap: anywhere;
}

/* seleção de formatos aceitos no anexo */
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .15rem .5rem; }
.option-grid__item { margin: 0; }

/* ------------------------------------ caixa de trabalho: recorte e lote (E3) */
.panel--tight .panel__body { padding: var(--s-3) var(--s-4); }

/* coluna de marcação da linha — estreita e sem competir com a ação principal */
.data-table__pick { width: 2.2rem; text-align: center; vertical-align: middle; }
.data-table__pick .form-check-input { margin: 0; }

/* cabeçalho de um grupo de etapa, quando a fila é vista agrupada */
.group-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--gov-bg-alt);
  border-top: 1px solid var(--gov-border);
  border-bottom: 1px solid var(--gov-border);
  font-size: .82rem;
}
.group-head:first-child { border-top: none; }

/* pendência aberta na tela do cidadão: o único painel que pede ação dele */
.panel--pendencia { border-color: var(--gov-warning); border-left: 4px solid var(--gov-warning); }
.panel--pendencia .panel__head { background: var(--gov-warning-soft, #fff8e6); }

/* grupo repetível (RF-109) e separador de seção (RF-100) */
.repeater__row {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end;
  padding: var(--s-2) 0; border-bottom: 1px dashed var(--gov-border);
}
.repeater__row:last-of-type { border-bottom: none; }
.repeater__label { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem;
  color: var(--gov-muted); flex: 1 1 8rem; }
.form-section {
  margin: var(--s-5) 0 var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--gov-border);
}
.form-section__title { font-size: .95rem; font-weight: 700; margin: 0; }
.form-section__help { font-size: .8rem; color: var(--gov-muted); margin: .15rem 0 0; }

@media (max-width: 991px) {
  .page { padding: var(--s-3) var(--s-1) var(--s-5); }
}


/* --------------------------------------------------- conversa (D50, O28) */
/* A mesma marcação serve ao portal e ao atendimento: a conversa é a mesma, e
   duas folhas de estilo divergiriam na primeira correção. */
.conversa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.conversa__item {
  border: 1px solid var(--gov-border); border-radius: var(--r-md);
  padding: var(--s-3); background: var(--gov-surface); max-width: 46rem;
}
.conversa__item--cidadao { border-left: 3px solid var(--gov-primary); }
.conversa__item--equipe { border-left: 3px solid var(--gov-success); margin-left: auto; background: var(--gov-bg-alt); }
.conversa__cabeca { display: flex; justify-content: space-between; gap: var(--s-3); font-size: .85rem; }
.conversa__quando { color: var(--gov-muted); font-variant-numeric: tabular-nums; }
.conversa__corpo { margin: .35rem 0 0; white-space: pre-line; }
.conversa__anexo { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; margin-top: .4rem; }

/* ------------------------------------------------------------- paginação
   Rodapé do cartão, e não controle solto: na identidade GovOne a lista e o
   seu "quanto falta" são o mesmo objeto. Como o `{% include %}` vem **depois**
   do `.panel` no template, a costura é feita aqui — o painel perde o canto de
   baixo e a paginação perde o de cima, e as duas peças viram uma só. */
.panel:has(+ .paginacao) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap;
  padding: .6rem var(--s-4);
  background: var(--gov-bg-alt);
  border: 1px solid var(--gov-border); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-bottom: var(--s-4);
  box-shadow: var(--sh-2);
}
.paginacao__contagem { margin: 0; font-size: .82rem; color: var(--gov-muted); font-variant-numeric: tabular-nums; }
.paginacao__contagem b { color: var(--gov-text-soft); font-weight: 600; }
.paginacao__paginas { margin: 0; }
.paginacao__paginas .page-link {
  min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums;
}
/* o "…" não é botão: não recebe borda de foco nem cursor de link */
.paginacao__salto { border-color: transparent !important; background: transparent !important; }

/* ------------------------------------------------- filtros dentro do cartão
   Na identidade GovOne o filtro e a lista são o mesmo objeto: o filtro entra
   sob o cabeçalho do cartão, não num cartão próprio acima dele. `.toolbar`
   continua existindo para as telas onde o filtro é a tela inteira (validação
   pública, busca do portal); aqui ele perde a casca e vira uma faixa. */
.panel__filtros {
  display: block;
  padding: var(--s-2) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--gov-border);
}
.panel__filtros .toolbar__row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-end; }

/* amostra de cor na tela de identidade visual: o quadradinho ao lado do hex */
.amostra-de-cor {
  display: inline-block; width: 1rem; height: 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--gov-border-strong); vertical-align: -.15em; margin-right: .4rem;
}

/* =============================================================================
   TEMA ESCURO

   **Escolha explícita, nunca `prefers-color-scheme`.** O atributo `data-theme`
   é escrito por quem clica no seletor do cabeçalho do back-office, e só lá.
   Seguir a preferência do sistema arrastaria junto o portal do cidadão, que tem
   dezenove cores fixas na própria folha e sairia meio claro e meio escuro para
   quem nunca pediu nada — um defeito que aparece só na máquina de quem tem o
   sistema no escuro, que é o pior lugar para um defeito morar.

   Só **tokens** aqui dentro. Componente algum ganha regra própria no escuro:
   se um bloco precisa de regra nova para sobreviver, é porque ele tem cor fixa,
   e o conserto é tirar a cor fixa dele — não empilhar exceção.
   ========================================================================== */
:root[data-theme="dark"] {
  /* Fundo mais escuro que a superfície, como no claro: o cartão é que salta.
     Não é preto puro — #000 com texto claro cria halo e cansa em turno longo. */
  --gov-bg: #0f141b;
  --gov-surface: #182029;
  --gov-bg-alt: #212a35;
  --gov-border: #2c3641;
  --gov-border-strong: #3d4956;

  --gov-text: #e6edf3;
  --gov-ink: #e6edf3;
  --gov-text-soft: #c2ccd8;
  --gov-muted: #8d99a8;

  /* O verde clareia: #249346 sobre #182029 dá 2,6:1 e some. O tom daqui tem
     contraste de sobra contra a superfície escura, e continua legível com
     texto escuro por cima quando serve de fundo de botão. */
  --gov-primary: #4cc276;
  --gov-primary-dark: #7ad89a;
  --gov-primary-soft: #14301f;
  --gov-primary-line: #2c6b43;
  --gov-petrol: #a8c0d4;

  --gov-success: #4ade80;
  --gov-success-soft: #12331f;
  --gov-warning: #e0c368;
  --gov-warning-soft: #332c12;
  --gov-danger: #f2837d;
  --gov-danger-soft: #3a1e1c;
  --gov-info-soft: #14283d;
  --gov-accent: #e8a33d;
  --chart-1: #3987e5;
  --chart-2: #d95926;

  /* menu: mesma lógica do claro — a moldura recua, o conteúdo salta */
  --gov-nav-bg: #182029;
  --gov-nav-bg-hover: #222c38;
  --gov-nav-bg-active: #222c38;
  --gov-nav-text: #e6edf3;
  --gov-nav-text-active: #ffffff;
  --gov-nav-section: #7f8b9a;
  --gov-nav-marker: var(--gov-primary);

  --gov-neutral-soft: #242e3a;
  --gov-neutral-ink: #c2ccd8;
  --gov-neutral-line: #38424f;
  --gov-success-ink: #6ee79b;
  --gov-success-line: #2a5c3c;
  --gov-warning-line: #5c5124;
  --gov-danger-line: #6b3330;

  /* sombra não existe no escuro: sem luz, o que separa é a borda */
  --sh-1: none;
  --sh-2: 0 0 0 1px var(--gov-border);
  --sh-3: 0 8px 24px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* Campos: o Bootstrap pinta `.form-control` e `.form-select` de branco por
   variável própria, e no escuro eles ficavam três caixas brancas no meio da
   tela. A seta do `<select>` é um SVG embutido na folha do Bootstrap, em cinza
   escuro — no escuro some, e por isso é redesenhada aqui em claro. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: var(--gov-bg-alt);
  color: var(--gov-text);
  border-color: var(--gov-border-strong);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--gov-muted); }
:root[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d99a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-check-input {
  background-color: var(--gov-bg-alt); border-color: var(--gov-border-strong);
}
:root[data-theme="dark"] .form-check-input:checked {
  background-color: var(--gov-primary); border-color: var(--gov-primary);
}
/* O menu suspenso das ações de linha também é branco por variável do Bootstrap. */
:root[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--gov-surface);
  --bs-dropdown-link-color: var(--gov-text);
  --bs-dropdown-link-hover-bg: var(--gov-bg-alt);
  --bs-dropdown-link-hover-color: var(--gov-text);
  --bs-dropdown-border-color: var(--gov-border);
  --bs-dropdown-divider-bg: var(--gov-border);
}

/* Botão primário no escuro: o verde clareado pede **texto escuro** por cima,
   não branco — branco sobre #4cc276 dá 2,2:1. */
:root[data-theme="dark"] .btn-primary {
  --bs-btn-color: #0f141b;
  --bs-btn-hover-color: #0f141b;
  --bs-btn-active-color: #0f141b;
  --bs-btn-disabled-color: #0f141b;
}
:root[data-theme="dark"] .navbar-gov { box-shadow: 0 1px 0 var(--gov-border); }
:root[data-theme="dark"] .sidebar { box-shadow: 1px 0 0 var(--gov-border); }

/* ------------------------------------------------------- seletor de tema */
.tema-botao {
  border: 1px solid var(--gov-border-strong); background: none; color: var(--gov-muted);
  border-radius: var(--r-md); padding: .25rem .4rem; display: inline-flex; align-items: center;
  line-height: 1;
}
.tema-botao:hover { color: var(--gov-text); border-color: var(--gov-muted); }
/* um ícone por tema; o JS não troca marcação, só o atributo na raiz */
.tema-botao__escuro { display: none; }
:root[data-theme="dark"] .tema-botao__claro { display: none; }
:root[data-theme="dark"] .tema-botao__escuro { display: inline-flex; }