/* site.css - design system de tela do site do Manual (Marco M2, Entrega 1).
   Depende de tokens.css (variaveis :root) e fonts.css (@font-face locais das
   fichas) estarem carregados antes deste arquivo. static/infograficos.css
   cobre os componentes portados do deck (Entrega 3), nao repetidos aqui. */

/* --------------------------------------------------------------------- */
/* Reset minimo e base                                                    */
/* --------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

/* Acessibilidade vestibular: rolagem suave desativada para quem pediu menos
   movimento no sistema operacional (Defeito menor, auditoria M2 rodada 1). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: hidden; /* garante que a pagina nunca role lateralmente: so as
                          tabelas largas rolam dentro do proprio wrapper */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }

a { color: var(--action); }
a:hover { text-decoration-thickness: 2px; }

/* Foco visivel (diretriz 21.18), consistente em toda a pagina */
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Link "pular para o conteudo" (D3, correcao na 4a rodada de auditoria do
   M2): a tecnica antiga (position:absolute; left:-999px) era o MESMO bug do
   B2, deslocar o elemento a milhares de pixels de distancia faz o navegador
   rolar a PAGINA INTEIRA de volta ao topo quando o link recebe foco no meio
   do documento. A correcao muda a marcacao no template para <a class="sr-
   only pular-conteudo">: escondido por padrao pela tecnica clip/1px de
   .sr-only (bloco logo abaixo), que NAO desloca o elemento, so o recorta a
   um pixel, entao nao ha nada "longe" para o navegador tentar alcancar. Ao
   ganhar foco, o bloco abaixo sobrescreve para position:fixed (relativo a
   viewport, ja "visivel" tecnicamente, sem precisar rolar nada) e reverte
   clip/tamanho/overflow para aparecer no canto superior esquerdo da tela,
   com o mesmo visual de antes. O href="#conteudo-principal" continua igual,
   so a tecnica de ocultacao/exibicao mudou. */
.pular-conteudo:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: .75rem 1.25rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

/* --------------------------------------------------------------------- */
/* Utilitario "somente leitor de tela" (visualmente oculto, mas presente  */
/* na arvore de acessibilidade e alcancavel por ancora ou por Tab).       */
/*                                                                        */
/* .sr-only e a classe generica. Usada pelo link .pular-conteudo (D3, 4a  */
/* rodada de auditoria do M2): por padrao clipado a 1px sem nenhum        */
/* deslocamento de posicao, e o proprio bloco ".pular-conteudo:focus"     */
/* (acima) substitui posicao/tamanho para aparecer na tela quando alguem  */
/* tabula ate ele.                                                       */
/*                                                                        */
/* .titulo-oculto-em-details repete a MESMA receita de proposito, sem     */
/* depender de .sr-only: injetada pelo M1 no <hN> que abre um <details>,  */
/* precisa continuar valendo mesmo se .sr-only ganhar outro uso no futuro */
/* (ex.: :focus de um link novo), entao fica como classe propria em vez   */
/* de herdar de .sr-only. O titulo permanece no DOM (a ancora #id         */
/* continua funcionando e o <details> nativo abre sozinho quando o        */
/* navegador foca um alvo dentro dele), mas nao duplica visualmente o     */
/* texto que ja aparece no <summary>. display:none foi descartado de      */
/* proposito (relatorio do M2): esconderia o titulo tambem de quem usa    */
/* leitor de tela chegando pela ancora, nao so visualmente.               */
/* --------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.titulo-oculto-em-details {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- */
/* Tipografia do conteudo                                                 */
/* --------------------------------------------------------------------- */

.conteudo h1, .conteudo h2, .conteudo h3, .conteudo h4 {
  color: var(--blue-2);
  letter-spacing: -.01em;
  line-height: 1.18;
  scroll-margin-top: 84px; /* nao esconder o titulo atras do cabecalho fixo ao navegar por ancora */
}
/* Corrigido na rodada 2 da auditoria do M3 (nota 88%, item 3): o
   <span id="alias" class="ancora-alias"> injetado por injetar_aliases_
   ancora (build_site_manual.py) fica imediatamente antes do <hN> real, mas
   nao herda a scroll-margin-top acima (o alvo da rolagem, quando se navega
   por alias, e o proprio span, nao o <hN>). Mesmo valor dos titulos reais,
   para o titulo nao ficar escondido atras do cabecalho fixo ao navegar por
   um alias (ex. #parte-ii--execute-as-etapas). */
.ancora-alias {
  scroll-margin-top: 84px;
}
.conteudo h1 {
  margin: 2.6rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  font-weight: 800;
  color: var(--navy);
}
.conteudo > h1:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.conteudo h2 {
  margin: 2.1rem 0 .9rem;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  font-weight: 800;
}
.conteudo h3 {
  margin: 1.5rem 0 .6rem;
  font-size: 1.12rem;
  font-weight: 750;
  color: var(--blue);
}
.conteudo h4 {
  margin: 1.2rem 0 .5rem;
  font-size: 1rem;
  font-weight: 750;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Botao "copiar link" (Marco M3, Entrega 1): injetado pelo JS ao lado de
   cada titulo com id dentro de .conteudo. Oculto por padrao, aparece no
   hover do titulo OU no foco do proprio botao (:focus-visible cobre
   navegacao por teclado, que nao aciona :hover do titulo). */
.conteudo h1, .conteudo h2, .conteudo h3 { position: relative; }
.botao-copiar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  margin-left: .35em;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--action);
  font-size: .62em;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  vertical-align: middle;
}
.conteudo h1:hover .botao-copiar-link,
.conteudo h2:hover .botao-copiar-link,
.conteudo h3:hover .botao-copiar-link,
.botao-copiar-link:focus-visible {
  opacity: 1;
}
.botao-copiar-link:hover { background: var(--blue-bg); }
.botao-copiar-link.copiado { opacity: 1; color: var(--ok); }

/* Numeros circulados da coluna "Etapa" da Tabela 2 (Marco M3, pedido do
   usuario): o build (destacar_numeros_etapa_tabela) troca o glifo Unicode
   circulado (①-⑨) pelo digito simples dentro deste span, em vez de manter
   o glifo original dentro do circulo CSS nomeado abaixo. Decisao registrada
   no relatorio do M3: o glifo Unicode ja desenha seu proprio contorno fino
   de circulo, e sobrepor um preenchimento solido (var(--navy)) atras dele
   deixava dois tracos de circulo visiveis (o fino do glifo por cima do
   preenchido do CSS). Substituir pelo digito puro evita esse artefato,
   funciona identico no navegador e no PDF gerado pelo Edge headless. */
.numero-etapa-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: .95em;
  line-height: 1;
}
/* Corrigido na rodada 2 da auditoria do M3 (nota 88%, item 2): um &nbsp;
   sozinho entre o badge e a primeira palavra NAO impede a quebra de linha
   entre os dois, porque .numero-etapa-circulo acima e um "atomic inline
   box" (display:inline-flex) e o navegador pode inserir um ponto de quebra
   antes/depois dele por conta propria, independente do nbsp no texto
   vizinho. A correcao real (destacar_numeros_etapa_tabela, build_site_
   manual.py) envolve o badge JUNTO com a primeira palavra da celula (ex.
   "① Compreender") neste span, formando uma unidade que nao quebra entre
   os dois. O resto do texto da celula, se houver mais palavras depois da
   primeira, fica fora deste span e continua quebrando normalmente. */
.etapa-badge-nowrap {
  white-space: nowrap;
}

.conteudo p { margin: 0 0 1rem; }
.conteudo ul, .conteudo ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.conteudo li { margin-bottom: .3rem; }
.conteudo li::marker { color: var(--action); font-weight: 700; }

/* D4 (4a rodada de auditoria do M2): texto corrido sem espaco para quebrar
   (URLs longas, ex. a referencia do Scrum Guide na Bibliografia, que e
   texto simples dentro de <li>, o build nao gera <a> para links crus no MD)
   nao quebrava linha em telas estreitas. Como o body tem overflow-x:hidden
   (para a pagina nunca rolar lateralmente), o texto ficava literalmente
   cortado e inacessivel, nao so sem barra de rolagem. Escopo em p/li/
   blockquote/a (prosa e listas), sem tocar tabelas (ja tem rolagem propria)
   nem code (pode precisar preservar espacos/quebras diferentes). */
.conteudo p,
.conteudo li,
.conteudo blockquote,
.conteudo a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.conteudo strong { color: var(--blue-2); }
.conteudo code {
  padding: .1em .35em;
  border-radius: 5px;
  background: #eaf0fa;
  color: var(--navy);
  font-size: .92em;
}

/* Bloco "Voce esta aqui" no topo de cada capitulo de etapa (blockquote gerado
   direto do MD, unico uso de blockquote de topo de capitulo no documento) */
.conteudo blockquote {
  margin: 0 0 1.3rem;
  padding: .95rem 1.3rem;
  border-left: 4px solid var(--action);
  border-radius: 0 12px 12px 0;
  background: var(--blue-bg);
  color: var(--blue-2);
  font-size: .98rem;
}
.conteudo blockquote p { margin: 0; }
.conteudo blockquote p + p { margin-top: .4rem; }

/* --------------------------------------------------------------------- */
/* Tabelas: rolagem horizontal PROPRIA, a pagina nunca rola lateralmente. */
/* Sem markup novo: display:block no <table> cria a caixa que recebe o    */
/* overflow, mantendo tbody/tr/td com o layout de tabela normal por       */
/* dentro (tecnica CSS padrao, nao exige alterar a transformacao          */
/* figure/figcaption ja auditada do M1).                                  */
/* --------------------------------------------------------------------- */

.conteudo table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  -webkit-overflow-scrolling: touch;
}
.conteudo thead { display: table-header-group; }
.conteudo tbody { display: table-row-group; }
.conteudo tr { display: table-row; }
.conteudo th, .conteudo td {
  display: table-cell;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.conteudo th {
  background: #eef3fb;
  color: var(--blue-2);
  font-weight: 750;
  white-space: nowrap;
}
.conteudo tbody tr:nth-child(even) { background: rgba(219, 229, 240, .28); }

/* --------------------------------------------------------------------- */
/* Figure / figcaption (Tabelas e Figuras numeradas do M1)                */
/* --------------------------------------------------------------------- */

.conteudo figure {
  margin: 0 0 1.3rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--raio-card);
  background: var(--white);
}
.conteudo figure table { margin: 0; border: 0; }
.conteudo figcaption {
  margin-bottom: .7rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-size: .88rem;
}
.conteudo figcaption strong { color: var(--action); }
.conteudo figure img,
.conteudo figure svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------- */
/* Caixa normativa ("Norma, oficina e quando aplicavel")                  */
/* --------------------------------------------------------------------- */

.caixa-normativa {
  margin: 0 0 1.3rem;
  padding: .2rem .2rem .2rem .95rem;
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: var(--gold-bg);
}
.caixa-normativa figure {
  border: 0;
  background: transparent;
  padding: .8rem 0;
  margin: 0;
}
.caixa-normativa figcaption {
  color: var(--gold-ink);
  border-bottom-color: var(--gold-line);
}
.caixa-normativa figcaption strong { color: var(--gold-ink); }
.caixa-normativa th { background: rgba(212, 167, 76, .18); color: var(--gold-ink); }

/* --------------------------------------------------------------------- */
/* <details> / <summary>: acordeoes de conteudo (diretriz 21.5)           */
/* --------------------------------------------------------------------- */

.conteudo details {
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--raio-card);
  background: var(--white);
  overflow: hidden;
}
.conteudo details[open] { padding-bottom: .3rem; }
.conteudo summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  cursor: pointer;
  color: var(--blue-2);
  font-weight: 750;
  list-style: none;
  background: #eef3fb;
}
.conteudo summary::-webkit-details-marker { display: none; }
.conteudo summary::before {
  content: "▸";
  display: inline-block;
  color: var(--action);
  transition: transform .15s ease;
  flex: none;
}
.conteudo details[open] > summary::before { transform: rotate(90deg); }
.conteudo details > summary:focus-visible { outline-offset: -3px; }
.conteudo details > *:not(summary) { padding-left: 1rem; padding-right: 1rem; }
.conteudo details > summary + * { margin-top: .8rem; }
.conteudo details figure { margin-left: 0; margin-right: 0; }

/* B8 (bug de CSS achado apos o M2, visivel em "C. Valores parametrizados"):
   ".conteudo ul, .conteudo ol" (acima, "Tipografia do conteudo") e
   ".conteudo details > *:not(summary)" logo acima tem a MESMA
   especificidade (0,1,1 as duas) e miram o mesmo padding-left do <ul>/<ol>.
   Como a segunda vem DEPOIS no arquivo, ela vence e reduz o padding-left do
   <ul> dentro de <details> de 1.4rem para 1rem. Combinado com "overflow:
   hidden" do cartao (".conteudo details" acima, que arredonda e RECORTA
   qualquer coisa que passe da borda), o marcador redondo do <ul> (que
   desenha na area de padding, a esquerda do texto) fica parcialmente
   escondido pela borda arredondada do cartao. A regra abaixo tem MAIS
   seletores (0,1,2), entao vence independente da ordem no arquivo, e
   restaura espaco suficiente para o marcador aparecer inteiro: 1rem do
   recuo padrao do cartao + 1.4rem do recuo normal de lista. */
.conteudo details > ul, .conteudo details > ol { padding-left: 2.4rem; }

/* Acordeoes aninhados (ex.: "Campos so na planilha" dentro de uma secao
   "N.5 Exemplo" recolhida) recuam visualmente um nivel */
.conteudo details details { margin: 0 1rem 1rem; }

/* --------------------------------------------------------------------- */
/* Cabecalho fixo                                                         */
/* --------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  box-shadow: 0 2px 10px rgba(16, 43, 75, .18);
}
.cabecalho-faixa {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: .6rem 1.1rem;
}
.cabecalho-logo {
  /* Marco M3, pedido do usuario: logo negativa (branca, ver
     {{LOGO_NEGATIVO_SRC}} no template, combina melhor com o fundo navy do
     cabecalho do que a positiva colorida usada ate o M2) e um pouco maior
     (era 40px). Correcao pos-auditoria do M3 (nota 90%, item 5): a altura
     vem de --tamanho-logo-cabecalho (tokens.css), mesma variavel reusada no
     calc() de .painel-busca-miolo mais abaixo, em vez de um valor fixo
     repetido nos dois lugares. */
  height: var(--tamanho-logo-cabecalho);
  width: auto;
  flex: none;
  object-fit: contain;
}
.cabecalho-titulos { min-width: 0; flex: 1; }
.cabecalho-eyebrow {
  margin: 0;
  color: #8fb4e6;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cabecalho-titulo {
  margin: .1rem 0 0;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botao/label de abrir o menu (drawer). Sempre visivel em qualquer largura
   de tela (B1, bug novo achado apos o M2: o usuario testou em tela cheia e
   pediu que a sidebar fosse SEMPRE gaveta, nunca coluna fixa ao lado do
   conteudo, entao o botao de abrir tambem passa a ser sempre visivel,
   independente da largura da tela). */
.botao-menu {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.botao-menu-linhas {
  display: inline-block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
}
.botao-menu-linhas::before, .botao-menu-linhas::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: currentColor;
}
.botao-menu-linhas::before { top: -6px; }
.botao-menu-linhas::after { top: 6px; }

/* Link para o site irmao (fichas do PLS), mesmo estilo de pilula do
   botao-menu ao lado, pedido do usuario para os dois sites se linkarem de
   volta um pro outro. */
.link-pls {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: .5rem .8rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.link-pls:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------- */
/* Busca client-side (Marco M3, Entrega 1). Melhoria progressiva pura: a  */
/* busca inteira depende de JavaScript (o indice so serve pra filtragem   */
/* no navegador), entao .busca-wrap fica oculto por padrao e so aparece   */
/* quando o script no <head> confirma JS ativo (classe .js-ativo no       */
/* <html>, tecnica classica para nao piscar um botao morto sem JS). O     */
/* conteudo essencial do Manual nunca depende deste bloco (diretriz       */
/* 21.20): sem JS, o campo de busca simplesmente nao aparece.             */
/* --------------------------------------------------------------------- */

.busca-wrap { display: none; }
.js-ativo .busca-wrap { display: flex; flex: none; }

.botao-busca {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--raio-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.botao-busca:hover { background: rgba(255, 255, 255, .08); }

/* O painel fica posicionado sobre o conteudo (nao empurra .layout para
   baixo): .cabecalho e position:sticky, que tambem funciona como
   containing block para um filho position:absolute, entao o painel se
   ancora no fim do cabecalho sem alterar a altura dele no fluxo normal do
   documento (evita um salto de layout visivel toda vez que o usuario
   digita e a lista de resultados muda de tamanho). */
.painel-busca {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--navy);
  box-shadow: 0 10px 24px rgba(16, 43, 75, .3);
}

/* Alinhamento do MIOLO do painel (campo + resultados) com o titulo do
   cabecalho (pedido do usuario: a busca colada na borda esquerda da tela
   ficava atras da sidebar aberta e comecava antes do proprio cabecalho).
   Replica a MESMA centralizacao de .cabecalho-faixa (max-width:1400px;
   margin:0 auto) para acompanhar o alinhamento em qualquer largura de
   tela, nao so em telas estreitas, e soma o deslocamento ate onde o
   titulo comeca de fato: o padding-left da faixa (1.1rem) + a largura
   renderizada da logo + o gap entre logo e titulo (1rem, mesmo gap de
   .cabecalho-faixa).

   Correcao pos-auditoria do M3 (nota 90%, item 5): a largura renderizada
   da logo nao e mais um "40px" fixo e desacoplado. --tamanho-logo-cabecalho
   (tokens.css) e a MESMA variavel que .cabecalho-logo usa para a altura;
   a largura e derivada dela multiplicando pela proporcao largura/altura
   do arquivo real (1122x1402, JF5_Logo 02_Negativo_Sem fundo.png). Se
   --tamanho-logo-cabecalho mudar, a largura aqui acompanha sozinha, sem
   editar este calc(); so revisar a proporcao 1122/1402 se o ARQUIVO da
   logo negativa for trocado por um com proporcao diferente. */
.painel-busca-miolo {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.1rem .9rem calc(1.1rem + (var(--tamanho-logo-cabecalho) * 1122 / 1402) + 1rem);
}
.busca-form { margin: 0; }
.campo-busca {
  width: 100%;
  padding: .65rem .9rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
}
.campo-busca:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.busca-status {
  margin: .5rem 0 0;
  color: #cfe0f7;
  font-size: .8rem;
}

.resultados-busca {
  margin-top: .6rem;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  border-radius: 10px;
}
.resultados-busca:not(:empty) { background: var(--white); padding: .3rem; }

.busca-grupo-titulo {
  margin: .6rem .6rem .2rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.busca-grupo-titulo:first-child { margin-top: .3rem; }

.busca-resultado {
  display: block;
  margin: 0 .3rem .3rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.busca-resultado:hover, .busca-resultado:focus-visible {
  background: var(--blue-bg);
}
.busca-resultado-titulo {
  display: block;
  color: var(--blue-2);
  font-weight: 750;
  font-size: .92rem;
}
.busca-resultado-trecho {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
.busca-resultado mark {
  background: var(--gold-bg);
  color: var(--gold-ink);
  border-radius: 3px;
  padding: 0 .1em;
}

/* Checkbox do drawer: mantido no fluxo de foco/teclado (nao usar
   display:none, que removeria do Tab), mas visualmente fora da tela.

   B2 (bug real, nao intencional, achado apos o M2): a tecnica antiga usava
   position:absolute; left:-9999px; top:0. Quando o <label for="drawer-
   toggle"> era clicado, o navegador movia o foco de teclado para este
   checkbox, e como ele estava a -9999px de distancia da posicao atual da
   viewport, o navegador rolava a PAGINA INTEIRA para tentar aproximar o
   elemento focado da area visivel, arrastando a rolagem de volta ao topo
   (top:0) mesmo com o usuario no meio do capitulo 8. A correcao troca para
   position:fixed (relativo a VIEWPORT, nao ao documento: o elemento fica
   tecnicamente "na area visivel" mesmo escondido, entao o navegador nao
   precisa rolar nada para alcanca-lo) combinada com a tecnica de ocultacao
   visual sem deslocamento de milhares de pixels (mesma receita de .sr-only
   acima, mais opacity:0 por seguranca extra em navegadores que ainda
   pintassem 1px visivel). */
.drawer-toggle-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.drawer-toggle-input:focus-visible ~ .cabecalho .botao-menu {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* Layout: conteudo principal em largura total + sidebar sempre em gaveta */
/*                                                                         */
/* B1 (mudanca de design pedida pelo usuario apos testar o site em tela   */
/* cheia): a versao anterior mostrava a sidebar como coluna fixa ao lado  */
/* do conteudo acima de 1024px e so virava gaveta abaixo disso. O         */
/* usuario nao gostou do modo coluna fixa e pediu gaveta                  */
/* SEMPRE, em qualquer largura de tela. .layout deixa de ser grid de 2    */
/* colunas (o conteudo usa a largura toda) e .sidebar vira sempre um      */
/* painel fixo sobreposto (position:fixed, fora da tela por padrao,       */
/* abrindo por cima do conteudo via o mesmo checkbox-hack de antes, sem   */
/* JS). As regras que antes só valiam dentro de @media (max-width:1024px) */
/* agora sao a base, incondicional.                                      */
/* --------------------------------------------------------------------- */

.layout {
  max-width: 1400px;
  margin: 0 auto;
}

/* D1 (4a rodada de auditoria do M2, regressao de acessibilidade): a sidebar
   virou SEMPRE gaveta fora da tela (B1), mas ficava no fluxo normal de foco
   mesmo fechada, entao Tab caia em 20 de 26 links invisiveis dentro dela.
   visibility:hidden tira os elementos internos do Tab/leitor de tela por
   padrao do navegador (diferente de display:none, nao quebra a transicao de
   transform). A transicao de visibility fica DEFASADA (delay .22s) so no
   estado fechado, para so virar hidden DEPOIS que a animacao de saida
   termina (senao ficaria focavel durante a saida). No estado aberto a
   transicao de visibility NAO tem atraso, para virar visible imediatamente
   (senao o conteudo sumiria/nao focaria durante a animacao de entrada). */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 86vw);
  height: 100vh;
  max-height: 100vh;
  z-index: 60;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--white);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s .22s;
  box-shadow: 4px 0 24px rgba(16, 43, 75, .25);
}
.drawer-toggle-input:checked ~ .layout .sidebar {
  transform: translateX(0);
  visibility: visible;
  transition: transform .22s ease, visibility 0s;
}

/* D6 (mesma rodada): sob prefers-reduced-motion, a transicao de abrir/
   fechar a gaveta (transform + visibility, D1 acima) precisa ficar
   instantanea tambem, nao so o scroll suave (regra no topo deste arquivo).
   Bloco de media query proprio aqui embaixo, e nao junto do bloco do topo,
   porque a regra precisa vir DEPOIS da definicao de .sidebar na cascata:
   especificidade igual entre as duas, quem vem por ultimo no arquivo vence.
   transition:none remove a transicao inteira (dos dois estados), entao
   transform e visibility mudam juntos e na hora, sem etapa intermediaria. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .drawer-toggle-input:checked ~ .layout .sidebar {
    transition: none;
  }
}

.sidebar-conteudo { padding: 1.6rem .9rem 2rem; }

.sidebar-topo {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--blue);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.sidebar-topo:hover { text-decoration: underline; }

.sidebar-secao-titulo {
  margin: 1.3rem 0 .5rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sidebar-secao-titulo:first-of-type { margin-top: 0; }

.sidebar-etapas, .sidebar-parte-iii {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-etapas li, .sidebar-parte-iii li { margin: 0 0 .2rem; }

.sidebar-etapas a, .sidebar-parte-iii a {
  display: block;
  padding: .5rem .6rem;
  border-radius: 9px;
  color: var(--ink);
  font-size: .88rem;
  text-decoration: none;
  line-height: 1.32;
}
.sidebar-etapas a:hover, .sidebar-parte-iii a:hover {
  background: var(--blue-bg);
  color: var(--blue-2);
}
/* Marco M3, pedido extra do usuario: o mesmo rotulo destacado ("Etapa N"
   na Parte II) e reaproveitado para o prefixo de letra ("A.", "B.", "C.",
   "D.") da Parte III (montar_sidebar_parte_iii injeta o MESMO span class=
   etapa-numero, nao uma classe nova), entao o seletor cobre as duas listas
   em vez de duplicar a regra de cor/peso numa classe paralela. */
.sidebar-etapas .etapa-numero, .sidebar-parte-iii .etapa-numero {
  display: inline-block;
  min-width: 1.6em;
  margin-right: .4em;
  color: var(--action);
  font-weight: 800;
  font-size: .78rem;
}
/* Scrollspy (Marco M3): aplicada pelo JS (site.js) no link da secao atual
   conforme o usuario rola a pagina. Destaque discreto pedido pelo usuario:
   so a BORDA muda (pilula em cinza escuro, mesmo border-radius var(--raio-
   pill) usado no botao "Ferramentas e materiais de apoio" abaixo, para o
   formato combinar visualmente com aquele botao), fundo e cor do texto
   continuam IGUAIS aos itens vizinhos nao ativos (nada de preenchimento
   solido nem inversao de cor). padding reduzido em 2px de cada lado para
   compensar a espessura da borda nova e nao deslocar o alinhamento em
   relacao aos itens sem borda. */
.sidebar-etapas a.ativo, .sidebar-parte-iii a.ativo {
  border: 2px solid var(--muted);
  border-radius: var(--raio-pill);
  padding: calc(.5rem - 2px) calc(.6rem - 2px);
}

/* Botao "Ferramentas e materiais de apoio" (Marco M3, pedido do usuario):
   fica ao final da sidebar, fora das listas de navegacao por capitulo, com
   destaque de pilula no mesmo espirito visual do botao-menu do cabecalho,
   mas na cor de acao (--action) para se diferenciar de um link comum. */
.sidebar-ferramentas {
  display: block;
  margin: 1.3rem 0 0;
  padding: .65rem .9rem;
  border-radius: var(--raio-pill);
  background: var(--action);
  color: #fff;
  font-size: .85rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}
.sidebar-ferramentas:hover { background: var(--blue-2); }

.conteudo {
  min-width: 0;
  padding: 1.6rem clamp(1rem, 4vw, 3rem) 4rem;
}

.rodape {
  border-top: 1px solid var(--line);
  padding: 1.2rem 1.1rem 2rem;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

/* --------------------------------------------------------------------- */
/* Sumario manual (dentro do proprio conteudo, escrito no Markdown-fonte) */
/* Fica visualmente mais discreto que a navegacao automatica da sidebar,  */
/* que e a navegacao principal da pagina: aqui e so leitura de apoio, ja  */
/* que o conteudo redundante com a sidebar. Decisao registrada no         */
/* relatorio do M2. Alvo: o bloco <div class="bloco-sumario-manual">,     */
/* gerado pelo build (envolver_bloco_sumario) em torno do <h2>Sumario</h2>*/
/* do MD-fonte e do que vem logo depois dele, ate o primeiro <h1> de      */
/* capitulo. Escopo por CLASSE, gerada pelo proprio build (Defeito 2,     */
/* alto, auditoria M2 rodada 1): antes, um seletor "~" (irmao geral) sem  */
/* "parada" reduzia a fonte do documento INTEIRO (do capitulo 1 ao Anexo  */
/* D), nao so do bloco do sumario, porque "~" casa TODO irmao posterior   */
/* dentro de .conteudo. Escopar por classe tambem elimina a dependencia   */
/* do slug de titulo "sumário" hardcoded aqui fora do manifesto.json.     */
/* --------------------------------------------------------------------- */

.bloco-sumario-manual {
  font-size: .92rem;
}
.bloco-sumario-manual > h2:first-child {
  padding: .8rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 1rem;
}

/* --------------------------------------------------------------------- */
/* Recortes REC-* (Entrega 2): indicador visual de coordenadas nao        */
/* conferidas. Classe facil de remover quando alguem confirmar            */
/* visualmente as 9 regioes (ver relatorio do M2 e _prova_recortes.html). */
/* --------------------------------------------------------------------- */

.recorte-wrap {
  margin: 1rem 0 1.4rem;
}
.recorte-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
.recorte-nao-conferido svg {
  border: 2px dashed var(--rose);
  border-radius: 10px;
  background: #fffafb;
}
.recorte-legenda {
  margin: .4rem 0 0;
  padding: .3rem .6rem;
  display: inline-block;
  border-radius: 999px;
  background: var(--rose-bg);
  color: var(--rose);
  font-size: .74rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------- */
/* Fichas SVG inline (Entrega 2). O SVG fica direto dentro do <p> que ja   */
/* vinha do M1 (svg e conteudo de fraseado valido dentro de p, ao         */
/* contrario de div): o espacamento inferior vem da propria regra         */
/* ".conteudo p" acima, sem precisar de wrapper novo.                     */
/* --------------------------------------------------------------------- */

.ficha-inline {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------- */
/* Responsivo: a sidebar ja e sempre gaveta em qualquer largura (B1, ver  */
/* o bloco "Layout" acima), entao so falta o ajuste fino de telas         */
/* pequenas no cabecalho e no espacamento do conteudo.                    */
/* --------------------------------------------------------------------- */

@media (max-width: 640px) {
  .cabecalho-eyebrow { display: none; }
  .cabecalho-titulo { font-size: .92rem; }
  .conteudo { padding-left: 1rem; padding-right: 1rem; }
  .botao-busca-texto { display: none; }
  /* Em telas estreitas o recuo ate a altura do titulo (calc acima) sobra
     pouco espaco para o campo de busca: mantem so o padding base da
     faixa, sem a soma da largura da logo. */
  .painel-busca-miolo { padding-left: 1.1rem; }
}

/* --------------------------------------------------------------------- */
/* Navegacao anterior/proxima entre capitulos de etapa (Marco M3,         */
/* Entrega 1, item 4). Gerada pelo BUILD (Python), HTML estatico puro,    */
/* funciona sem JavaScript.                                               */
/* --------------------------------------------------------------------- */

.navegacao-capitulo {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 2.2rem 0 .6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.navegacao-capitulo a {
  flex: 1 1 auto;
  min-width: 9rem;
  padding: .7rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--raio-card);
  background: var(--white);
  color: var(--blue-2);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.32;
  text-decoration: none;
}
.navegacao-capitulo a:hover { background: var(--blue-bg); }
.navegacao-anterior { text-align: left; }
.navegacao-processo { text-align: center; color: var(--muted); font-weight: 750; }
.navegacao-proxima { text-align: right; }

@media (max-width: 640px) {
  .navegacao-capitulo { flex-direction: column; }
  .navegacao-anterior, .navegacao-processo, .navegacao-proxima { text-align: left; }
}

/* --------------------------------------------------------------------- */
/* Botao flutuante "voltar ao topo" (Marco M3, pedido do usuario). Link   */
/* real (href="#topo"), funciona sem JS (a rolagem suave ja vem do        */
/* html{scroll-behavior:smooth} no topo deste arquivo). O JS so alterna a */
/* classe .visivel conforme a rolagem, pura conveniencia visual: sem JS o */
/* botao fica sempre oculto (opacity 0 abaixo), o que e aceitavel porque  */
/* nao e conteudo essencial, a navegacao por ancora comum continua        */
/* funcionando pelo link "Voltar ao topo" da sidebar.                     */
/* --------------------------------------------------------------------- */

.botao-topo {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16, 43, 75, .28);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.botao-topo.visivel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.botao-topo:hover { background: var(--blue-2); }

@media (prefers-reduced-motion: reduce) {
  .botao-topo { transition: none; }
}

/* --------------------------------------------------------------------- */
/* Blocos de exemplo + trilha condutora (T3.9). As secoes "N.5 Exemplos"  */
/* dos capitulos 6 a 12 (ja recolhidas em <details> pelo build) trazem     */
/* dois fios condutores lado a lado: Exemplo 1 (ficticio) e Exemplo 2      */
/* (preenchimento real). envolver_blocos_exemplo_e_injetar_trilha         */
/* (build_site_manual.py) envolve cada fio numa <section class=           */
/* "bloco-exemplo bloco-exemplo-N">, com uma trilha (rail de 7 paradas +   */
/* dica de uso) logo apos o titulo do bloco.                              */
/*                                                                         */
/* A moldura do bloco e so um acento de borda + fundo bem sutil (nao um    */
/* cartao solido como .conteudo details, nem a faixa colorida forte de     */
/* .conteudo blockquote): os dois componentes ja aparecem DENTRO do bloco  */
/* de exemplo (o "Voce esta aqui" nunca, mas as citacoes do proprio        */
/* exemplo sim), entao o bloco precisa de uma moldura mais discreta para   */
/* nao competir visualmente com o que ja existe dentro dele.               */
/* --------------------------------------------------------------------- */

.bloco-exemplo {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem 1.2rem;
  border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0;
  background: rgba(32, 122, 125, .05);
}
/* Exemplo 2 (preenchimento real) usa --gold em vez do --teal do Exemplo 1
   (ficticio): cor ja presente no design system (caixa normativa), so
   reaproveitada aqui para dar aos dois fios um acento distinto sem
   introduzir um token de cor novo. */
.bloco-exemplo-2 {
  border-left-color: var(--gold);
  background: rgba(212, 167, 76, .07);
}
.bloco-exemplo > *:last-child { margin-bottom: 0; }

.titulo-bloco-exemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.05rem;
  font-weight: 800;
}
/* Correcao pos-auditoria (nota 87%, item 6): --muted (#62728a) sobre o
   fundo REAL do bloco (nao branco, ver .bloco-exemplo/.bloco-exemplo-2
   acima) dava so 4,42:1 no Exemplo 1 e 4,49:1 no Exemplo 2, abaixo do
   minimo AA de 4,5:1 para este texto (.8rem = 12,8px, peso 600, nao e
   "large text" pela definicao da WCAG). --blue (#334b6a) mantem o mesmo
   espirito discreto (mais escuro que o texto principal, sem ser --ink)
   com 8,06:1 e 8,18:1, sem precisar de um token de cor novo. */
.subtitulo-bloco-exemplo {
  color: var(--blue);
  font-size: .8rem;
  font-weight: 600;
  font-style: italic;
}

/* Dica da trilha: texto curto explicando o que a trilha faz. Mesmo
   espirito discreto de .subtitulo-bloco-exemplo (fonte pequena, --blue,
   peso medio, mesma correcao de contraste acima), mas sem italico: aqui e
   instrucao de uso, nao a legenda de um fio. Fica DENTRO do <nav> (ver
   _montar_trilha_exemplo, build_site_manual.py), antes do rail de
   paradas, com um respiro pequeno ate ele. */
.trilha-exemplo-dica {
  margin: 0 0 .5rem;
  color: var(--blue);
  font-size: .8rem;
  font-weight: 600;
}

/* Trilha do TOPO: rail com as 7 paradas (capitulos 6 a 12), a parada do
   capitulo atual marcada aria-current (sem link, ja estamos nela).

   Correcao pos-auditoria (nota 87%, item 3): a versao anterior usava
   white-space:nowrap + overflow-x:auto (rolagem horizontal) para caber em
   telas estreitas, mas em 1024px a 7a parada ("⑧ Comunicacao") ficava
   escondida atras da borda direita, sem nenhuma affordance visual de que
   havia mais conteudo pra rolar — o oposto do que a propria dica acima
   pede ("clique numa das etapas"). Agora a fileira QUEBRA em duas linhas
   (flex-wrap:wrap no <ol> + row-gap para respiro entre elas) em vez de
   rolar: as 7 paradas ficam sempre visiveis, em qualquer largura.
   overflow-x:auto permanece so como rede de seguranca (um rotulo unico
   futuro mais largo que o proprio container nao seria cortado), nao mais
   o mecanismo principal de caber na tela. */
.trilha-exemplo {
  margin: 0 0 1rem;
  padding-bottom: .25rem;
  overflow-x: auto;
}
.trilha-exemplo ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  row-gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trilha-exemplo li {
  display: flex;
  align-items: center;
  margin: 0;
}
/* Separador entre paradas: chevron desenhado com bordas, nao um caractere
   de texto (ex. "›") em pseudo-elemento: alguns leitores de tela ANUNCIAM
   o conteudo de ::after quando ele nao e puramente decorativo aos olhos
   deles, e aqui seriam 6 separadores x 14 trilhas = 84 anuncios de ruido
   por leitura da pagina inteira. content:"" continua vazio de proposito,
   so as bordas desenham a seta. Um chevron pendurado no fim de uma linha
   quebrada (a ultima parada antes da quebra) e aceitavel: sugere
   continuacao, sem criar espaco extra porque fica dentro do proprio <li>.

   Correcao pos-auditoria (nota 87%, item 2): var(--line) (usado nas
   bordas das pilulas .trilha-exemplo a, fora de escopo desta correcao)
   sobre o fundo do bloco dava so 1,15:1, praticamente invisivel a 100% de
   zoom. var(--muted) da 4,42:1, decorativo mas perceptivel. */
.trilha-exemplo li:not(:last-child)::after {
  content: "";
  flex: none;
  width: .3rem;
  height: .3rem;
  margin: 0 .28rem;
  border-top: 1.5px solid var(--muted);
  border-right: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.trilha-exemplo a,
.trilha-exemplo span[aria-current] {
  display: inline-block;
  padding: .3rem .6rem;
  border-radius: var(--raio-pill);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.trilha-exemplo a {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--blue-2);
}
.trilha-exemplo a:hover { background: var(--blue-bg); }
.trilha-exemplo span[aria-current] {
  border: 1px solid transparent;
  background: var(--navy);
  color: #fff;
}

/* Ponto de ENTRADA da trilha (secao 3.1): mesmo espirito visual de
   .navegacao-capitulo (cartoes retangulares em fileira, ja auditado para
   contraste AA), reaproveitado aqui em vez de inventar um componente
   visual novo so para a trilha de exemplos. */
.trilha-exemplo-entrada {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1.3rem;
}
.trilha-exemplo-entrada a {
  flex: 1 1 auto;
  min-width: 12rem;
  padding: .75rem 1rem;
  border-radius: var(--raio-pill);
  background: var(--action);
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}
.trilha-exemplo-entrada a:hover { background: var(--blue-2); }