/* =========================================================================
   Riga Concursos — folha de estilo base
   Mobile-first. Sem framework. Fontes do sistema (zero requisição externa).
   ========================================================================= */

/* ------------------------------------------------------------- tokens */
:root {
  /* institucional */
  --azul-900: #0a2540;
  --azul-800: #0f3559;
  --azul-700: #164b7e;
  --azul-600: #1d63a8;
  --azul-500: #2a7fd4;
  --azul-100: #e3eefb;

  /* semânticas de situação */
  --verde:     #0f7a45;
  --verde-bg:  #e4f5eb;
  --ambar:     #9a5b06;
  --ambar-bg:  #fdf1de;
  --vermelho:  #a72b1e;
  --vermelho-bg: #fbeae8;
  --roxo:      #5b3fa8;
  --roxo-bg:   #eee9fb;

  /* identidade de órgão (lista regional da home) — hues que NÃO aparecem
     nos selos de situação (verde/âmbar/vermelho/roxo/azul já têm significado
     próprio), pra um badge colorido nunca parecer um selo de status por
     engano. */
  --org-1:     #0d6e6e;  --org-1-bg: #e2f5f5;  /* verde-azulado */
  --org-2:     #3d3d99;  --org-2-bg: #ecebfc;  /* índigo */
  --org-3:     #a24a1f;  --org-3-bg: #fbe9de;  /* terracota */
  --org-4:     #99236b;  --org-4-bg: #fbe4f0;  /* magenta */

  /* Disciplinas na ficha do edital (20/08/2026) — estende a lista acima até 8
     hues, porque um cargo pode ter 8 disciplinas (o BB tem exatamente 8) e o
     gráfico precisa de uma cor distinguível para cada. Mesma regra de escolha:
     nenhum destes colide com os selos de situação. */
  --disc-5:    #6b7a1f;  --disc-5-bg: #f0f3df;  /* oliva */
  --disc-6:    #8a2f4a;  --disc-6-bg: #fbe6ec;  /* vinho */
  --disc-7:    #8a6d1f;  --disc-7-bg: #f7f1de;  /* mostarda */
  --disc-8:    #1f6d8a;  --disc-8-bg: #def0f7;  /* azul-petróleo */

  /* Gráfico de disciplinas (rosca + barras) — 21/08/2026, pedido: "cores mais
     vívidas". Paleta PRÓPRIA, separada da de cima: --org-1..4 também é cor de
     TEXTO em .linha-concurso__logo (contraste calibrado com --org-N-bg), mas
     aqui é preenchimento decorativo sem texto por cima — pode saturar mais
     sem risco. Mesma família de matiz de cada origem, só mais vívida. */
  --grafico-1: #2f5bd7;  /* de --org-2  (índigo → azul vívido) */
  --grafico-2: #0f96c2;  /* de --disc-8 (azul-petróleo vívido) */
  --grafico-3: #7a9420;  /* de --disc-5 (oliva vívido) */
  --grafico-4: #d9601a;  /* de --org-3  (terracota vívido) */
  --grafico-5: #c22463;  /* de --disc-6 (vinho vívido) */
  --grafico-6: #0f9494;  /* de --org-1  (teal vívido) */
  --grafico-7: #c99312;  /* de --disc-7 (mostarda vívido) */
  --grafico-8: #c21a86;  /* de --org-4  (magenta vívido) */

  /* Hero da ficha do edital (20/08/2026): painel claro cinza-azulado com
     borda azul. Só o painel troca com o tema — ver o bloco escuro adiante. */
  --hero-fundo:      #eaf1f8;
  --hero-borda:      #1d63a8;

  /* Cards de KPI: o mesmo azul de "Concursos" na marca (.marca__concursos).
     Valor FIXO nos dois temas, porque é cor de marca — a mesma razão pela
     qual .cabecalho e .marca__concursos também não trocam.
     Como é um azul CLARO, o texto por cima tem de ser escuro: branco dá
     2,2:1 sobre ele e reprovaria. Medido: valor 7,1:1, rótulo 5,3:1. */
  --hero-card:       #7ab4ea;
  --hero-card-borda: #5c9dd4;
  --hero-card-dado:  #0a2540;

  /* Chip do rótulo do KPI (21/08/2026) — pedido: rótulo "em outra cor de
     destaque, branco ou amarelo". Nenhum dos dois funciona como TEXTO direto
     sobre --hero-card: branco dá 2,2:1 e amarelo dourado dá 1,3:1 — o card é
     um azul de luminosidade média, hostil a qualquer texto de cor viva por
     cima. Testado: dourado só funciona dentro de um chip navy PRÓPRIO —
     chip×card 7,06:1 (o chip aparece), texto×chip 9,20:1 (de sobra). */
  --hero-card-destaque: #f0c14b;

  /* Laranja de destaque — não existia na paleta. Entrou em 20/08/2026 para o
     título da ficha do edital. Medido sobre --hero-fundo: 4,55:1, ou seja,
     passa até o limiar de texto normal, não só o de texto grande. */
  --laranja:         #c2410c;

  /* neutros */
  --tinta:      #14181d;
  --tinta-2:    #444d57;
  --tinta-3:    #6b7580;
  --linha:      #e2e6ea;
  --linha-forte:#c9d0d7;
  --fundo:      #ffffff;
  --fundo-2:    #f6f8fa;
  --fundo-3:    #eef1f4;
  /* Cartão tem token próprio: no escuro a sombra não se lê, então ele
     precisa se destacar da página pela cor, não pela elevação. */
  --fundo-cartao: #ffffff;

  --raio:    8px;
  --raio-sm: 5px;
  --sombra:  0 1px 2px rgba(10, 37, 64, .06), 0 2px 8px rgba(10, 37, 64, .05);

  --largura: 1180px;
  --gap:     1rem;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul-900: #05101c;
    --azul-800: #0a1c2e;
    --azul-700: #7ab4ea;
    --azul-600: #8cc0f0;
    --azul-500: #9ccbf5;
    --azul-100: #12283d;

    --verde:     #5fd699;   --verde-bg:  #0d2b1d;
    --ambar:     #f0b45f;   --ambar-bg:  #33240c;
    --vermelho:  #f28d80;   --vermelho-bg: #331512;
    --roxo:      #b9a3f0;   --roxo-bg:   #221a3b;

    --org-1: #6fd9d9;  --org-1-bg: #0f2b2b;
    --org-2: #b3aef2;  --org-2-bg: #24224a;
    --org-3: #f0a874;  --org-3-bg: #3a2110;
    --org-4: #f0a3d0;  --org-4-bg: #3a1830;

    --disc-5: #c3d46f;  --disc-5-bg: #2a3110;
    --disc-6: #f2a8c0;  --disc-6-bg: #35141f;
    --disc-7: #e0c56a;  --disc-7-bg: #332a0d;
    --disc-8: #7ecbe8;  --disc-8-bg: #0d2733;

    --grafico-1: #6f93f5;
    --grafico-2: #4dc6f0;
    --grafico-3: #b8d94a;
    --grafico-4: #f28a3d;
    --grafico-5: #f25fa0;
    --grafico-6: #4de0d9;
    --grafico-7: #f0c94a;
    --grafico-8: #f24dc2;

    /* No escuro o painel não pode ser claro (queimaria a vista no meio de uma
       página escura): fica azul-acinzentado escuro. Os tokens do card NÃO são
       redefinidos aqui de propósito — o azul da marca é fixo, então no escuro
       o card fica claro sobre painel escuro. Inverte a relação do tema claro,
       mas mantém a cor de marca, que é o que se pediu. */
    --hero-fundo:      #17242f;
    --hero-borda:      #2d5c86;

    /* Laranja mais claro para funcionar sobre o painel escuro: 7,0:1. */
    --laranja:         #fb923c;

    --tinta:      #e8ecf1;
    --tinta-2:    #b3bcc6;
    --tinta-3:    #8b95a0;
    --linha:      #22303f;
    --linha-forte:#33445a;
    --fundo:      #0d1620;
    --fundo-2:    #121d29;
    --fundo-3:    #18242f;
    --fundo-cartao: #16222e;
    --sombra:     0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  }
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.011em;
  color: var(--tinta);
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A regra .pular-para saiu em 20/08/2026 junto com o link no header.php.
   Ver o comentário lá para o que era e como reverter. */

/* ------------------------------------------------------------- estrutura */
.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 1rem;
}

.conteudo {
  padding-block: 1.5rem 3rem;
  min-height: 60vh;
}

/* ------------------------------------------------------------- cabeçalho */
.cabecalho {
  background: var(--azul-900);
  color: #fff;
  border-bottom: 3px solid var(--azul-700);
}

.cabecalho__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem 1rem;
  padding-block: .8rem;
}

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.marca:hover { text-decoration: none; opacity: .9; }
.marca__riga { color: #fff; }
.marca__concursos { color: #7ab4ea; font-weight: 600; }

/* No celular a busca ocupa uma linha própria. Sem isso o item flex não
   encolhe (min-width: auto é o padrão) e vaza a viewport. */
.busca-topo {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
  order: 3;
}
.busca-topo input {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid transparent;
  border-radius: var(--raio-sm) 0 0 var(--raio-sm);
}
.busca-topo button {
  padding: .5rem .85rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: var(--azul-600);
  border: 0;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  cursor: pointer;
}
.busca-topo button:hover { background: var(--azul-500); }

/* navegação — rola horizontalmente no celular, sem quebrar o layout */
.nav {
  background: var(--azul-800);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__lista {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.nav__lista a {
  display: inline-block;
  padding: .7rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: #cfe2f6;
  border-bottom: 3px solid transparent;
}
.nav__lista a:hover,
.nav__lista a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #7ab4ea;
  text-decoration: none;
}

/* --------------------------------------------------- grade de 3 colunas
 * Modelo PCI Concursos (19/08/2026): menu à esquerda, conteúdo no meio,
 * notícias à direita. header.php monta <main class="env pagina-grid"> com
 * três filhos, nesta ordem: nav (menu), div.pagina-grid__central (onde cada
 * página injeta seu próprio conteúdo, sem saber que a grade existe) e, vindo
 * do footer.php, aside.pagina-grid__lateral (notícias).
 *
 * No celular os três só empilham (grid de 1 coluna) — o <nav> continua
 * exatamente a mesma barra horizontal rolável de sempre. O `margin-inline`
 * negativo cancela o padding do `.env` só nele, pra ele seguir tocando as
 * duas bordas da tela como sempre tocou; sem isso ele ficaria "flutuando"
 * com uma faixa clara dos dois lados, porque agora mora dentro de um `.env`
 * (o `<main>`), que antes não existia por cima dele.
 */
.pagina-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.pagina-grid__nav {
  margin-inline: -1rem;
  display: flex;
  align-items: center;
}
.pagina-grid__nav .nav__lista {
  padding-inline: 1rem;
}

/* Divisor entre grupos do menu ("separe as seções com um tracinho").
   Barrinha vertical no celular (a barra é horizontal); vira horizontal no
   desktop, quando o CSS de 900px transforma o menu numa coluna. */
.nav__divisor {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin-block: .6rem;
  background: rgba(255, 255, 255, .16);
}

/* Link do curso — precisa parecer convite, não mais um item de lista. */
.nav__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-inline: .5rem;
  padding: .55rem .8rem;
  background: var(--azul-600);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  border-radius: var(--raio-sm);
  max-width: 11rem;
}
.nav__cta:hover { background: var(--azul-500); text-decoration: none; }

.pagina-grid__central { min-width: 0; }

/* A lateral direita é um item de grade, não um item de fluxo: sem isso ela
   nasce colada no topo do grid, quase encostando na barra de busca acima —
   "ÚLTIMAS NOTÍCIAS" apertado contra o cabeçalho. Espelha o respiro que
   `.conteudo` já dá pra coluna central. */
.pagina-grid__lateral {
  padding-top: 1.5rem;
}

.pagina-grid__lateral-titulo {
  margin: 0 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linha);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-3);
}
.lista-lateral-noticias {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.lista-lateral-noticias a {
  display: block;
  padding: .55rem .6rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--tinta);
  border-radius: var(--raio-sm);
}
.lista-lateral-noticias a:hover {
  background: var(--fundo-2);
  text-decoration: none;
}

@media (min-width: 900px) {
  .pagina-grid {
    grid-template-columns: 200px minmax(0, 1fr) 260px;
    gap: 1.75rem;
  }

  /* Vira sidebar de verdade: sai do full-bleed escuro, vira cartão claro,
     lista vertical, e gruda no topo ao rolar — igual à referência do PCI. */
  .pagina-grid__nav {
    display: block;
    margin-inline: 0;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: visible;
    position: sticky;
    top: 1rem;
    align-self: start;
  }
  .pagina-grid__nav .nav__lista {
    flex-direction: column;
    white-space: normal;
    gap: 0;
    padding: .5rem 0;
  }
  .pagina-grid__nav .nav__lista a {
    display: block;
    padding: .55rem 1rem;
    color: var(--tinta-2);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .pagina-grid__nav .nav__lista a:hover,
  .pagina-grid__nav .nav__lista a[aria-current="page"] {
    color: var(--azul-700);
    background: var(--azul-100);
    border-left-color: var(--azul-600);
  }

  /* Divisor e CTA viram horizontais — o menu deixou de rolar de lado. */
  .nav__divisor {
    width: auto;
    height: 1px;
    align-self: auto;
    margin: .4rem 1rem;
    background: var(--linha);
  }
  .nav__cta {
    margin: .4rem 1rem .6rem;
    max-width: none;
  }

  .pagina-grid__lateral {
    position: sticky;
    top: 1rem;
    padding-top: 2rem;
  }

  /* Ficha do edital: 2 colunas em vez de 3 (20/08/2026). O conteúdo dela é
     denso e tabelado — tabela de estrutura da prova, gráfico, lista de
     tópicos — e a coluna de notícias roubava justamente a largura de que
     essas tabelas precisam. footer.php suprime o <aside>; aqui a grade
     devolve o espaço à coluna central em vez de deixar um vão. */
  .pagina-grid--sem-lateral {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

/* =====================================================================
   FICHA DO EDITAL — /concurso/{slug}
   Reescrita em 20/08/2026 a partir do inventário do edital (SPEC §14).
   ===================================================================== */

/* Ícones (icone_svg() em helpers.php). Traço em currentColor: o ícone herda
   a cor do texto vizinho, então aba ativa e cartão selecionado mudam de cor
   sem nenhuma regra a mais. `flex: 0 0 auto` para nunca encolher ao lado de
   texto que quebra em duas linhas. */
.icone {
  /* `display: inline-block` é obrigatório: a regra global `img, svg` acima põe
     `display: block`, e num título como o da Redação (que não é flex) o ícone
     quebraria para a linha de cima. Dentro de contêiner flex o valor é
     irrelevante — o item vira flex item de qualquer jeito. */
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}
/* Em título de seção o ícone acompanha o corpo do texto, que é maior. */
.icone--titulo { width: 1.1em; height: 1.1em; }

/* ------------------------------------------------------------ hero
 * Painel claro (cinza azulado) com borda azul, e os cards de KPI escuros
 * dentro dele — pedido do Riga em 20/08/2026. Era um gradiente azul-marinho
 * inteiro; ficou pesado demais no topo da página.
 *
 * Como o painel virou claro, os selos voltaram a usar os tokens normais de
 * situação (.selo--aberto, --encerrado etc.), que já são calibrados para
 * fundo claro. Não existe mais .selo--sobre-escuro.
 */
.edital-hero {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.4rem 1.35rem;
  border-radius: var(--raio);
  background: var(--hero-fundo);
  border: 1px solid var(--hero-borda);
}

.edital-hero__selos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .7rem;
}
.edital-hero__selos a:hover { text-decoration: none; opacity: .85; }

/* Logo do órgão + identificação. Mobile-first: no celular empilha e
   centraliza os dois (logo em cima, dados embaixo, tudo centralizado —
   pedido do Riga em 21/08/2026); a partir de 620px volta a ficar lado a
   lado, logo alinhado pelo topo do texto (`align-items: flex-start`, pra
   não centralizar em relação a um bloco que pode ter 4 linhas). */
.edital-hero__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
}
.edital-hero__id { min-width: 0; }

@media (min-width: 620px) {
  .edital-hero__topo {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: .9rem;
  }
}

/* Só a métrica da caixa fica na classe base. O fundo NÃO entra aqui de
   propósito: as iniciais recebem cor de `classe_cor_orgao()`, cujas classes
   (.linha-concurso__logo--0..4) são declaradas antes neste arquivo — um
   `background` na base venceria por ordem de fonte e apagaria a cor do
   órgão. Por isso o fundo branco fica no seletor do <img>, que é o único
   caso que precisa dele. */
.edital-hero__logo {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--raio-sm);
}

/* Fundo branco + borda: o arquivo do órgão pode vir com fundo transparente,
   branco ou colorido. Sem uma base própria, um logo branco desaparece e um
   logo com fundo colorido briga com o painel. Mesma decisão já tomada em
   .linha-concurso__logo--img. */
img.edital-hero__logo {
  padding: .3rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--linha-forte);
}

/* Sem arquivo de logo: iniciais coloridas. A cor vem de
   .linha-concurso__logo--0..4, reaproveitadas aqui — o nome dessas classes
   ficou preso à listagem, mas elas só definem par de cores, e duplicar a
   paleta seria pior que reusar o nome torto. */
.edital-hero__logo--iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.15;
}

@media (min-width: 620px) {
  .edital-hero__logo { width: 4.5rem; height: 4.5rem; }
  img.edital-hero__logo { padding: .4rem; }
  .edital-hero__logo--iniciais { font-size: 1rem; }
}

.edital-hero__eyebrow {
  margin: 0 0 .2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--azul-700);
}
/* Laranja para o título saltar, e 15% menor que o h1 padrão do site
   (1,6 / 1,9 / 2,15rem nos três breakpoints → 1,36 / 1,62 / 1,83).
   O tamanho é declarado nos mesmos pontos de quebra do h1 global, para a
   redução ser os mesmos 15% em qualquer largura de tela — usar `em` ou `%`
   aqui não serviria, porque ambos partem do corpo do PAI (16px), não do
   tamanho que o h1 teria. */
.edital-hero h1 {
  margin: 0 0 .15rem;
  color: var(--laranja);
  font-size: 1.36rem;
}
@media (min-width: 600px) { .edital-hero h1 { font-size: 1.62rem; } }
@media (min-width: 900px) { .edital-hero h1 { font-size: 1.83rem; } }
.edital-hero__sub {
  margin: 0 0 .1rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinta-2);
}
/* --tinta-2, não --tinta-3: sobre o fundo claro do hero o cinza mais claro
   dá 4,0:1, abaixo do mínimo de 4,5 para texto deste tamanho. A hierarquia
   em relação ao subtítulo vem do peso e do corpo, não da cor. */
.edital-hero__linha {
  margin: 0;
  font-size: .88rem;
  color: var(--tinta-2);
}

.edital-hero__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin: 1.1rem 0 0;
}
.edital-hero__kpis > div {
  padding: .6rem .6rem .55rem;
  text-align: center;
  background: var(--hero-card);
  border: 1px solid var(--hero-card-borda);
  border-radius: var(--raio-sm);
}
/* Rótulo em cima, dado embaixo (pedido do Riga). O <dt> vem antes do <dd> no
   HTML, que também é a ordem correta da lista de definição — antes estava
   invertido por CSS. */
.edital-hero__kpis dt {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0 0 .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--hero-card-dado);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hero-card-destaque);
  line-height: 1.3;
}
.edital-hero__kpis dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--hero-card-dado);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.edital-hero__prazo {
  margin: .9rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--verde);
}
.edital-hero__prazo--urgente { color: var(--vermelho); }

@media (min-width: 620px) {
  .edital-hero { padding: 1.9rem 1.8rem 1.6rem; }
  .edital-hero__kpis { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------ abas
 * Escondidas sem JavaScript: sem o script, todos os painéis ficam visíveis
 * (é o que garante que o rastreador leia a página inteira), e nesse estado
 * uma barra de abas que não navega para nada só confundiria.
 */
.abas-edital { display: none; }

.js-abas .abas-edital {
  display: flex;
  gap: .15rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--linha);
}
.abas-edital::-webkit-scrollbar { display: none; }

.abas-edital button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .95rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  color: var(--tinta-3);
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}
.abas-edital button:hover { color: var(--tinta); }
.abas-edital button[aria-selected="true"] {
  color: var(--azul-600);
  border-bottom-color: var(--azul-600);
}

/* Sem JS os painéis se separam sozinhos; com JS o ativo não precisa de régua. */
.painel-edital + .painel-edital {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linha);
}
.js-abas .painel-edital + .painel-edital {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Exibição das abas e dos blocos de cargo.
 *
 * O HTML servido traz TUDO aberto — é o que o rastreador lê e o que um
 * navegador sem JS mostra. Quem esconde é este CSS, e ele só age quando a
 * classe `js-abas` existe no <html>, posta por um script no <head> (ver
 * header.php). Isso acontece antes da primeira pintura, então o visitante
 * nunca vê a versão expandida piscar.
 *
 * A alternância é por CLASSE, não pelo atributo `hidden`: o atributo só
 * poderia ser aplicado pelo JS de fim de página, que é tarde demais. O
 * elemento ativo nasce marcado pelo PHP.
 */
html.js-abas [data-painel]:not(.painel-ativo),
html.js-abas [data-cargo-bloco]:not(.cargo-ativo) {
  display: none;
}
.painel-edital__intro {
  max-width: 68ch;
  color: var(--tinta-2);
}

/* ------------------------------------------------- seletor de cargo */
.sel-cargo {
  margin-bottom: 1.5rem;
  padding: .85rem .9rem;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.sel-cargo__rotulo {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.sel-cargo__busca { display: block; margin-bottom: .6rem; }
.sel-cargo__busca input {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  font-size: .88rem;
  color: var(--tinta);
  background: var(--fundo-cartao);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
}

/* ------------------------- seletor em <select> (mais de 5 cargos, SPEC §14.2)
   Aparece quando a lista de cartões viraria parede — a Transpetro 2026 tem 61
   ênfases. O <select> nativo é mantido (teclado, leitor de tela e a roda de
   seleção do celular vêm de graça); o que se estiliza é a CAIXA em volta, e a
   seta é um SVG nosso porque a nativa não acompanha o tema escuro. */
.sel-cargo--select { padding-bottom: .9rem; }
.sel-cargo__campo { display: block; }
.sel-cargo__campo .sel-cargo__rotulo { display: block; }
.sel-cargo__caixa {
  position: relative;
  display: block;
  background: var(--fundo-cartao);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
}
.sel-cargo__caixa:focus-within {
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px var(--azul-100);
}
.sel-cargo__caixa select {
  /* appearance:none tira o desenho do sistema; o padding à direita reserva o
     espaço da nossa seta para o texto longo não passar por baixo dela. */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: .6rem 2.4rem .6rem .75rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: var(--raio-sm);
  cursor: pointer;
}
.sel-cargo__caixa select:focus { outline: none; }
.sel-cargo__seta {
  position: absolute;
  top: 50%;
  right: .7rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tinta-3);
}
.sel-cargo__lista {
  display: grid;
  gap: .45rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .sel-cargo__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sel-cargo__lista { grid-template-columns: repeat(3, 1fr); } }

/* Cartão, não botão de lista — é a opção C aprovada no protótipo. Cada cartão
   mostra o nome, o nível e, quando ativo, a marca de selecionado. */
.sel-cargo__item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .85rem;
  font: inherit;
  text-align: left;
  color: var(--tinta-2);
  background: var(--fundo-cartao);
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
}
.sel-cargo__item:hover { border-color: var(--linha-forte); }
.sel-cargo__item b {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta);
}
.sel-cargo__item span { font-size: .76rem; color: var(--tinta-3); }

/* A marca de selecionado ocupa lugar mesmo escondida (visibility, não
   display): sem isso o cartão ativo fica mais alto que os outros e a grade
   "pula" a cada troca de cargo. */
.sel-cargo__marca {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .1rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul-600);
  visibility: hidden;
}
.sel-cargo__item[aria-pressed="true"] {
  background: var(--azul-100);
  border-color: var(--azul-600);
}
.sel-cargo__item[aria-pressed="true"] b { color: var(--azul-700); }
.sel-cargo__item[aria-pressed="true"] .sel-cargo__marca { visibility: visible; }

.cargo-bloco__titulo {
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linha);
}

/* ------------------------------------------------- requisitos do cargo */
.req-card {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: var(--fundo-cartao);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.req-card__cabeca {
  margin: 0 0 .7rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--verde);
}
.req-card h3, .atrib-card h3 {
  margin: 0 0 .2rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.req-card p, .atrib-card p { margin: 0 0 .9rem; color: var(--tinta-2); }
.req-card > *:last-child, .atrib-card > *:last-child { margin-bottom: 0; }

.atrib-card {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

/* ------------------------------------------------- gráfico e legenda */
.donut-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1.2rem;
  background: var(--fundo-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.donut { position: relative; flex: 0 0 auto; }
.donut__svg { display: block; }
.donut__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut__centro b {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.donut__centro span {
  margin-top: .1rem;
  font-size: .62rem;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.legenda-disc {
  flex: 1 1 15rem;
  display: grid;
  gap: .4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legenda-disc li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
}
.legenda-disc__ponto {
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
}
.legenda-disc__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tinta-2);
}
.legenda-disc__valor {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.disc-tag {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .35rem;
  border-radius: 50%;
  vertical-align: baseline;
}

.celula-bloco {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-3);
  background: var(--fundo-2);
  vertical-align: top;
  white-space: normal;
  min-width: 7rem;
}
.linha-total-bloco td {
  font-weight: 700;
  color: var(--azul-700);
  background: var(--azul-100);
}
tfoot td {
  font-weight: 800;
  background: var(--fundo-2);
  border-top: 2px solid var(--linha-forte);
}

.selo--mini {
  margin-left: .35rem;
  padding: .05rem .35rem;
  font-size: .62rem;
}

/* =======================================================================
   FICHA DO MVP (26/08/2026) — paginas/concurso.php
   Uma coluna, leitura direta. A ficha em abas foi para paginas/old/ e as
   classes dela seguem neste arquivo, porque voltam com ela na próxima fase.
   ======================================================================= */
.ficha-mvp__topo {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: .8rem 0 1.1rem;
}
.ficha-mvp__logo {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  padding: .35rem;
  object-fit: contain;
  background: #fff;                 /* logo com fundo transparente sumiria no escuro */
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
}
.ficha-mvp__id { min-width: 0; }
.ficha-mvp__id h1 { margin: .2rem 0 0; font-size: 1.5rem; line-height: 1.25; }
.ficha-mvp__selos { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.ficha-mvp__linha { margin: .35rem 0 0; color: var(--tinta-3); font-size: .9rem; }

/* Os quatro números que decidem a inscrição. auto-fit porque nem todo
   concurso tem os quatro — 2 em telas estreitas, até 4 quando cabe. */
.ficha-mvp__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem;
  margin: 0 0 1rem;
}
.ficha-mvp__numeros > div {
  padding: .7rem .8rem;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
}
.ficha-mvp__numeros dt {
  margin: 0 0 .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha-mvp__numeros dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
}

.ficha-mvp__prazo {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  background: var(--azul-100);
  border-radius: var(--raio-sm);
  font-size: .92rem;
  color: var(--azul-700);
}
.ficha-mvp__prazo--urgente { background: var(--ambar-bg); color: var(--ambar); }
.ficha-mvp__prazo .icone { flex: none; }

.ficha-mvp__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }

/* Corpo do texto: medida de leitura mais curta que a coluna, que é onde o
   olho se perde menos em parágrafo corrido. */
.ficha-mvp__texto { max-width: 66ch; margin-bottom: 1.4rem; }
.ficha-mvp__texto h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.ficha-mvp__texto p { margin: 0 0 .85rem; line-height: 1.65; }

/* ----------------------------------- formato da prova / horário (25/08) */
/* Caixa de aviso do formato da objetiva. Âmbar, não vermelho: é alerta de
   "leia com atenção", não erro nem impedimento — o vermelho está reservado
   para critério de eliminação, e as duas coisas aparecem na mesma aba. */
.aviso-prova {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .75rem .9rem;
  background: var(--ambar-bg);
  border: 1px solid var(--ambar);
  border-radius: var(--raio);
  color: var(--ambar);
  font-size: .9rem;
  line-height: 1.5;
}
.aviso-prova .icone { flex: none; margin-top: .15rem; }
.aviso-prova b { font-weight: 700; }

.linha-horario {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: -.2rem 0 1rem;
  color: var(--tinta-3);
  font-size: .88rem;
}
.linha-horario .icone { flex: none; }

/* Tabela de vagas por localidade — montada a partir do campo tabular
   (`cargos.vagas_por_unidade`). Número de colunas é variável por edital, daí
   nada de largura fixa por coluna: a primeira encosta à esquerda e as
   numéricas se distribuem. */
.tabela-unidades th[scope="col"] {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.tabela-unidades th[scope="row"] { font-weight: 600; white-space: nowrap; }
.tabela-unidades td.num,
.tabela-unidades th[scope="col"].num { text-align: center; }

/* ------------------------------------------------- prova discursiva */
.discursiva {
  padding: 1.1rem 1.2rem;
  background: var(--fundo-cartao);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--roxo);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.discursiva > h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 0;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linha);
}
.discursiva h4 {
  margin: 1rem 0 .3rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
/* auto-fit, não `repeat(4, …)`: com a entrada de `linhas_max` (25/08) o bloco
   passou a poder ter de 2 a 5 estatísticas, e a grade fixa deixava o 5º item
   sozinho numa fileira de quatro. Assim a quantidade de colunas segue o que
   existe, em qualquer largura. */
.discursiva__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .6rem;
  margin: .9rem 0;
}
.discursiva__stats > div {
  padding: .65rem .5rem;
  text-align: center;
  background: var(--fundo-2);
  border-radius: var(--raio-sm);
}
.discursiva__stats b {
  display: block;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.3;
}
.discursiva__stats span {
  display: block;
  margin-top: .1rem;
  font-size: .62rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ------------------------------------------------- listas de regra */
.lista-marcada, .lista-zero, .lista-beneficios, .lista-desempate {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  color: var(--tinta-2);
  font-size: .9rem;
}
.lista-marcada li, .lista-zero li, .lista-beneficios li, .lista-desempate li {
  margin-bottom: .3rem;
}
.lista-zero { list-style: none; padding-left: 0; }
.lista-zero li::before {
  content: "✕";
  margin-right: .5rem;
  font-weight: 700;
  color: var(--vermelho);
}
.lista-beneficios { list-style: none; padding-left: 0; }
.lista-beneficios li::before {
  content: "✓";
  margin-right: .5rem;
  font-weight: 700;
  color: var(--verde);
}
.lista-desempate { padding-left: 1.4rem; }
.lista-desempate li { padding-left: .2rem; }

.lista-criterios { margin: .7rem 0 0; padding: 0; list-style: none; }
.lista-criterios__item {
  display: flex;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linha);
}
.lista-criterios__item:last-child { border-bottom: 0; }
.lista-criterios__ico {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  border-radius: 50%;
  color: var(--vermelho);
  background: var(--vermelho-bg);
}
.lista-criterios__item--medio .lista-criterios__ico {
  color: var(--ambar);
  background: var(--ambar-bg);
}
.lista-criterios__texto { margin: 0; font-weight: 600; font-size: .92rem; }
.lista-criterios__detalhe { margin: .15rem 0 0; font-size: .82rem; color: var(--tinta-3); }

/* ------------------------------------------------- etapas do certame */
.etapas__intro { max-width: 68ch; }
.etapas { margin: .7rem 0 0; padding: 0; list-style: none; }
.etapas__item {
  display: flex;
  gap: .8rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linha);
}
.etapas__item:last-child { border-bottom: 0; }
.etapas__num {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  border-radius: 50%;
  color: var(--azul-700);
  background: var(--azul-100);
  font-variant-numeric: tabular-nums;
}
.etapas__corpo { min-width: 0; }
.etapas__nome { margin: 0; font-weight: 600; font-size: .94rem; }
.etapas__meta { margin: .1rem 0 0; font-size: .8rem; color: var(--tinta-3); }
.etapas__desc { margin: .3rem 0 0; font-size: .86rem; color: var(--tinta-2); }

/* ------------------------------------------------- conteúdo programático */
.prog-disc {
  padding: .8rem 0;
  border-top: 1px solid var(--linha);
}
.prog-disc:first-of-type { border-top: 0; }
.prog-disc__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .8rem;
}
.prog-disc__nome { font-weight: 600; font-size: .94rem; }
.prog-disc__num {
  font-size: .8rem;
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.prog-disc__barra {
  height: 6px;
  margin-top: .45rem;
  overflow: hidden;
  background: var(--fundo-3);
  border-radius: 999px;
}
.prog-disc__barra > span { display: block; height: 100%; border-radius: 999px; }

.prog-disc__topicos { margin-top: .5rem; }
.prog-disc__topicos > summary {
  font-size: .8rem;
  font-weight: 600;
  color: var(--azul-600);
  cursor: pointer;
  list-style: none;
}
.prog-disc__topicos > summary::-webkit-details-marker { display: none; }
.prog-disc__topicos > summary::before { content: "+ ver "; }
.prog-disc__topicos[open] > summary::before { content: "− ocultar "; }
.prog-disc__topicos ol {
  margin: .6rem 0 0;
  padding-left: 1.35rem;
  font-size: .875rem;
  color: var(--tinta-2);
}
.prog-disc__topicos li { margin-bottom: .35rem; }
.prog-disc__pendente,
.pendente {
  margin: .4rem 0 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--tinta-3);
}
.pendente {
  padding: .9rem 1rem;
  background: var(--fundo-2);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  font-size: .88rem;
}

/* ------------------------------------------------- cronograma */
.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.3rem;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: .68rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--linha);
}
.timeline__item { position: relative; padding-bottom: 1.2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__ponto {
  position: absolute;
  left: -2.3rem;
  top: 0;
  width: 1.45rem;
  height: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  border-radius: 50%;
  background: var(--fundo-cartao);
  border: 2px solid var(--linha-forte);
  color: var(--tinta-3);
}
.timeline__item--concluido .timeline__ponto { border-color: var(--verde); color: var(--verde); }
.timeline__item--atual .timeline__ponto {
  border-color: var(--azul-600);
  background: var(--azul-600);
  color: #fff;
}
.timeline__item--previsto .timeline__ponto {
  border-style: dashed;
  border-color: var(--ambar);
  color: var(--ambar);
}
.timeline__evento { margin: 0; font-weight: 600; font-size: .93rem; }
.timeline__item--atual .timeline__evento { color: var(--azul-700); font-weight: 700; }
.timeline__data {
  margin: 0;
  font-size: .82rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.timeline__obs { margin: .2rem 0 0; font-size: .82rem; color: var(--tinta-3); }

/* ------------------------------------------------- documentos */
.lista-docs--edital li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .8rem 0;
}
.doc-icone {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 800;
  border-radius: var(--raio-sm);
}
.doc-icone--pdf  { color: var(--vermelho); background: var(--vermelho-bg); }
.doc-icone--link { color: var(--azul-700);  background: var(--azul-100); font-size: 1rem; }
.doc-nota { margin: .2rem 0 0; font-size: .84rem; }

/* ------------------------------------------------------------- selos */
.selo {
  display: inline-block;
  padding: .12rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  white-space: nowrap;
}
.selo--aberto    { color: var(--verde);    background: var(--verde-bg); }
.selo--novo      { color: var(--azul-700); background: var(--azul-100); }
.selo--previsto  { color: var(--roxo);     background: var(--roxo-bg); }
.selo--alerta    { color: var(--ambar);    background: var(--ambar-bg); }
.selo--encerrado { color: var(--vermelho); background: var(--vermelho-bg); }
.selo--neutro    { color: var(--tinta-2);  background: var(--fundo-3); }

/* ------------------------------------------------------------- cartões */
.grade {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

.cartao {
  padding: 1rem;
  background: var(--fundo-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.cartao__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  font-size: .78rem;
  color: var(--tinta-3);
}

.cartao__titulo {
  margin: 0 0 .5rem;
  font-size: 1.02rem;
  line-height: 1.35;
}

.cartao__dados {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: 0;
  font-size: .85rem;
  color: var(--tinta-2);
}
.cartao__dados dt {
  display: inline;
  font-weight: 600;
  color: var(--tinta-3);
}
.cartao__dados dt::after { content: " "; }
.cartao__dados dd { display: inline; margin: 0; }
.cartao__dados .num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- lista regional
 * Home distribuída por região (18/08/2026), no modelo do PCI Concursos:
 * lista densa, uma linha por concurso, em vez do grid de cartões largos.
 * Reaproveita as cores e a tipografia do site — só a densidade mudou.
 */
.regiao {
  margin-bottom: 2rem;
}
/* Precisa se distinguir do cabeçalho de UF logo abaixo (barra sólida
   --azul-800), não competir com ele. A primeira versão (19/08/2026) também
   virou uma barra sólida, só que maior — duas faixas escuras coladas uma na
   outra leem como um bloco só, pesado, sem hierarquia nenhuma (era
   especialmente ruim em "Nacional", onde as duas diziam a mesma palavra).
   Trocado por um título de texto com régua embaixo — presença sem peso. */
.regiao__titulo {
  margin: 0 0 1.25rem;
  padding: 0 0 .6rem;
  border: 0;
  border-bottom: 3px solid var(--azul-600);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--azul-800);
  background: none;
}

.grupo-uf {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: 1rem;
}
.grupo-uf__cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .9rem;
  background: var(--azul-800);
  color: #fff;
}
.grupo-uf__cabeca strong {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.grupo-uf__cabeca span {
  font-size: .72rem;
  opacity: .85;
}

.linha-concurso {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .65rem .9rem;
  border-top: 1px solid var(--linha);
  background: var(--fundo-cartao);
}
.linha-concurso:nth-child(even) { background: var(--fundo-2); }

.linha-concurso__logo {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
}
/* Cor por órgão, quando não há logo de verdade: a variação de cor é o que
   dá ao olho algo pra escanear numa lista longa — é a diferença entre
   "lista de texto" e "lista visual". */
.linha-concurso__logo--0 { background: var(--azul-100);  color: var(--azul-700); }
.linha-concurso__logo--1 { background: var(--org-1-bg);  color: var(--org-1); }
.linha-concurso__logo--2 { background: var(--org-2-bg);  color: var(--org-2); }
.linha-concurso__logo--3 { background: var(--org-3-bg);  color: var(--org-3); }
.linha-concurso__logo--4 { background: var(--org-4-bg);  color: var(--org-4); }

/* Logo de verdade (site/assets/img/orgaos/{slug}.*, ver logo_orgao_url() em
   helpers.php) — fundo neutro + borda porque o arquivo pode vir com fundo
   transparente, branco ou colorido; sem uma base própria, um logo branco
   some no cartão claro e um logo com fundo colorido bate com a cor do
   badge de iniciais que ele está substituindo. */
.linha-concurso__logo--img {
  object-fit: contain;
  background: var(--fundo);
  border: 1px solid var(--linha);
  padding: .3rem;
}

.linha-concurso__corpo { flex: 1 1 auto; min-width: 0; }
.linha-concurso__titulo {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
/* Empilhado, não numa linha só — separar vaga/salário de banca/nível é o
   que faz cada informação ser lida de relance, no modelo do PCI (eles
   também separam "N vagas até R$ X", cargo e nível em linhas próprias). */
.linha-concurso__meta {
  margin: .3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
/* O que decide se vale clicar é vaga + salário — por isso essa linha fica
   mais escura e maior que o resto. */
.linha-concurso__destaque {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.linha-concurso__linha {
  font-size: .78rem;
  color: var(--tinta-3);
}

.linha-concurso__data {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  text-align: right;
  font-size: .78rem;
  color: var(--tinta-2);
  white-space: nowrap;
}
/* Selo de urgência embaixo da data (19/08/2026) — mesma regra que já existia
   só no /admin (fila de revisão): ≤7 dias vira alerta, prazo já passado vira
   encerrado. Reaproveita .selo--alerta/.selo--encerrado, sem CSS novo. */
.linha-concurso__data .selo { white-space: nowrap; }

@media (max-width: 480px) {
  /* Sem espaço pra data alinhada à direita no celular: desce pra baixo do texto. */
  .linha-concurso { flex-wrap: wrap; }
  .linha-concurso__data { width: 100%; align-items: flex-start; text-align: left; padding-left: 3.1rem; }
}

/* -------------------------------------------------------- banner de anúncio */
/* Virou <a><img></a> em 19/08/2026 (era um <svg> inline decorativo, sem
   link — agora é a peça de verdade da Nova Concursos, clicável). */
.banner-propaganda {
  display: block;
  margin-bottom: 1.5rem;
  border-radius: var(--raio);
  overflow: hidden;
  line-height: 0;
}
.banner-propaganda img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 110px;
}
.banner-propaganda:hover img { opacity: .94; }

/* ------------------------------------------------------------- avisos */
.aviso {
  padding: 1rem 1.1rem;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul-600);
  border-radius: var(--raio-sm);
}
.aviso h2 { margin-top: 0; font-size: 1.05rem; }
.aviso p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- rodapé */
.rodape {
  margin-top: 2rem;
  padding-block: 2rem 1.5rem;
  font-size: .875rem;
  color: var(--tinta-2);
  background: var(--fundo-2);
  border-top: 1px solid var(--linha);
}

.rodape__cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem;
}
.rodape h3 {
  margin-bottom: .5rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-3);
}
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li { margin-bottom: .3rem; }

.rodape__base {
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  font-size: .8rem;
  color: var(--tinta-3);
}

/* código operacional — discreto, para referência em conversa (SPEC §8.2) */
.codigo-ref {
  font-family: var(--fonte-num);
  font-size: .75rem;
  color: var(--tinta-3);
  user-select: all;
}

/* ------------------------------------------------------------- tabelas */
.tabela-rolavel {
  overflow-x: auto;
  margin-bottom: 1.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
th, td {
  padding: .6rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--linha);
}
th {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-3);
  background: var(--fundo-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- botões */
.botao {
  display: inline-block;
  padding: .6rem 1.1rem;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: var(--azul-600);
  border: 0;
  border-radius: var(--raio-sm);
  cursor: pointer;
}
.botao:hover { background: var(--azul-700); text-decoration: none; }
.botao--secundario {
  color: var(--azul-600);
  background: transparent;
  border: 1px solid var(--linha-forte);
}
.botao--secundario:hover { background: var(--fundo-2); }

/* ------------------------------------------------------------- trilha */
.trilha {
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--tinta-3);
}
.trilha a { color: var(--tinta-2); }

/* ------------------------------------------------------------- ficha */
.ficha__topo { margin-bottom: 1.25rem; }

.ficha__selos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}
.ficha__selos a:hover { text-decoration: none; opacity: .85; }

.prazo {
  margin: .5rem 0 0;
  font-size: .95rem;
  color: var(--verde);
}
.prazo--urgente { color: var(--vermelho); font-weight: 600; }

/* Ficha rápida — o que a pessoa veio saber, antes de qualquer rolagem */
.resumo-dados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.resumo-dados dt {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-3);
}
.resumo-dados dd {
  margin: .1rem 0 0;
  font-size: .98rem;
  font-weight: 600;
}
.resumo-dados .num { font-variant-numeric: tabular-nums; }

.acoes { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------- blocos */
.bloco { margin-bottom: 2rem; }
.bloco > h2 {
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linha);
}
.bloco__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--linha);
}
.bloco__cabeca h2 { margin: 0; padding: 0; border: 0; }
.bloco__cabeca a { font-size: .875rem; font-weight: 600; }

.ficha__rodape {
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: .85rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--linha);
}
.ficha__rodape p { margin-bottom: .4rem; }

/* ------------------------------------------------------------- listagens */
.lista__topo { margin-bottom: 1.25rem; }
.lista__intro {
  max-width: 68ch;
  color: var(--tinta-2);
}

/* Grade de siglas por estado, topo da home (19/08/2026) — modelo PCI (caixas
   pequenas, só a sigla), com a paleta e os raios do nosso site em vez dos
   deles. Fica junto de `.facetas` porque é a mesma ideia (link de filtro),
   só mais compacta — cabe as 27 UFs numa faixa curta, ao contrário do
   `.facetas` de baixo, que tem nome por extenso e leva mais espaço. */
.grade-uf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem;
  margin-bottom: 1.5rem;
}
.grade-uf a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.7rem;
  padding: .4rem .3rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--azul-700);
  background: var(--fundo-cartao);
  border: 1px solid var(--azul-100);
  border-radius: var(--raio-sm);
}
.grade-uf a:hover {
  background: var(--azul-100);
  text-decoration: none;
}

.facetas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.facetas a {
  display: inline-block;
  padding: .35rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
}
.facetas a:hover { background: var(--fundo-3); text-decoration: none; }
.facetas a[aria-current="true"] {
  color: #fff;
  background: var(--azul-600);
  border-color: var(--azul-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .facetas a[aria-current="true"] { color: var(--azul-900); }
}

.lista-simples, .lista-docs { margin: 0; padding: 0; list-style: none; }
.lista-simples li, .lista-docs li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--linha);
}
.lista-simples li:last-child, .lista-docs li:last-child { border-bottom: 0; }
.lista-simples li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ------------------------------------------------------------- faq */
.faq {
  padding: .7rem 0;
  border-bottom: 1px solid var(--linha);
}
.faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+ ";
  color: var(--azul-600);
  font-weight: 700;
}
.faq[open] summary::before { content: "− "; }
.faq > div {
  padding-top: .5rem;
  color: var(--tinta-2);
}

/* ------------------------------------------------------------- artigo */
.artigo { max-width: 72ch; }
.artigo h2 {
  margin-top: 1.8rem;
  padding-bottom: .3rem;
  font-size: 1.15rem;
  border-bottom: 2px solid var(--linha);
}
.artigo ul { padding-left: 1.2rem; }
.artigo li { margin-bottom: .35rem; }
.artigo table {
  display: block;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
}

/* ------------------------------------------------------------- utilidades */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.centro { text-align: center; }
.silencioso { color: var(--tinta-3); }

/* ------------------------------------------------------------- breakpoints */
@media (min-width: 600px) {
  h1 { font-size: 1.9rem; }
  .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .rodape__cols { grid-template-columns: repeat(2, 1fr); }

  /* A partir daqui a busca cabe ao lado da marca. */
  .busca-topo { flex: 0 1 340px; order: 0; }
}

@media (min-width: 600px) {
  .resumo-dados { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .conteudo { padding-block: 2rem 4rem; }
  h1 { font-size: 2.15rem; }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .rodape__cols { grid-template-columns: repeat(4, 1fr); }
  .resumo-dados { grid-template-columns: repeat(4, 1fr); }
  /* A ficha é texto longo: limitar a medida melhora a leitura. */
  .ficha .bloco > p, .ficha .bloco > br + * { max-width: 72ch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}