/* =====================================================================
   ds-publico.css — casca e vocabulário compartilhado da área PÚBLICA
   =====================================================================
   Migração ao design system v2 (área pública sem menu de acesso restrito).
   Substitui dpmg-publico-shell.css. Carregado depois de ds.css/ds-compat.css/
   ds-shell.css e antes da folha específica de cada página (ds-hub.css,
   ds-guias.css, ds-atualizador.css, ds-busca-juris.css, ds-planilha.css,
   ds-gerador.css).

   NÃO repete o que já vem pronto de outra folha da pilha:
     - navbar (.dpmg-navbar--public), rodapé (.dpmg-footer), menu móvel
       (.is-menu-open) → ds.css / ds-shell.css. A navbar/rodapé antigos
       (.navbar-custom, .site-footer, .nav-pills…) NÃO existem mais no
       markup público e não são portados aqui.
     - vocabulário Bootstrap legado (row/col-*/container/card/btn/
       form-control/table/badge/alert/utilitários) → ds-compat.css.
     - `.main-container`, `.page-title`, `.page-description`, breadcrumb
       de trilha do design system (`.dpmg-breadcrumb`) → ds-shell.css/ds.css.

   Convenção de cor translúcida usada abaixo: `rgba(var(--ds-*-rgb), alfa)`
   tinge uma cor de marca já tokenizada (o mesmo padrão de
   `rgba(var(--color-primary-rgb), 0.025)` em dpmg-paginas.css) — não é
   uma cor "solta", é a cor do token com transparência. A única exceção
   textual da regra (véus brancos `rgba(255, 255, 255, <alfa>)`) também
   é usada abaixo, sempre sobre fundo de marca.
   ===================================================================== */


/* =====================================================================
   1. PONTE DE TOKENS --dpmg-* → --ds-*
   =====================================================================
   dpmg-tokens.css saiu da pilha da área pública, mas algumas folhas de
   página que ainda não migraram (e um `style=""` inline em
   ia/template/prompt_injection.html) continuam lendo `var(--dpmg-*)`.
   Esta seção só existe para não quebrá-las: redefine os tokens antigos
   em cima dos novos, com equivalência exata de valor onde ela existe.
   REMOVER esta seção quando a última folha `dpmg-*.css` sair da pilha
   pública (ou quando o `style=""` inline for convertido para classe).
   ===================================================================== */
:root {
  --dpmg-green: var(--ds-green-700);             /* #1a5c3a — idêntico */
  --dpmg-green-dark: var(--ds-green-900);        /* #0f3d24 — idêntico */
  --dpmg-green-light: var(--ds-green-500);       /* #2d7a52 — idêntico */
  --dpmg-gold: var(--ds-gold-500);               /* #c9a227 — idêntico */
  --dpmg-gold-light: var(--ds-gold-400);         /* #e0b93a — idêntico */
  --dpmg-green-rgb: var(--ds-green-700-rgb);     /* 26, 92, 58 — idêntico */
  --dpmg-gold-rgb: var(--ds-gold-500-rgb);       /* 201, 162, 39 — idêntico */
  /* ds.css não tem um degrau -500 com canais RGB próprios — literal
     mantido (mesmo valor de sempre, só não vem de var()). */
  --dpmg-green-light-rgb: 45, 122, 82;
  --dpmg-gray: var(--ds-surface-alt);
  --dpmg-text: var(--ds-text);
  --dpmg-muted: var(--ds-text-muted);
  --dpmg-dark: var(--ds-text);
}


/* =====================================================================
   2. HERO E ÍCONE DE SEÇÃO
   =====================================================================
   Cópia byte a byte da versão DS de `.hero-section`/`.section-icon` de
   ds-planilha.css (comentário lá: "a folha pública, dpmg-publico-shell.css,
   está fora do escopo desta migração" — agora está dentro, então o
   componente precisa da própria cópia aqui; as duas folhas ficam
   idênticas de propósito, cada uma servindo só a sua área). Qualquer
   ajuste visual no hero deve ser replicado nas duas folhas.
   ===================================================================== */
.hero-section {
  background: linear-gradient(155deg, var(--ds-green-700), var(--ds-green-900));
  color: var(--ds-on-brand);
  padding: var(--ds-space-8) 0 var(--ds-space-7);
  box-shadow: var(--ds-shadow-navbar);
}
.hero-section h1 {
  margin: 0 0 var(--ds-space-2);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-on-brand);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
}
.hero-section p {
  margin: 0;
  max-width: 74ch;
  color: var(--ds-text-muted-on-brand);
  font-size: var(--ds-text-base);
}
/* O ícone do hero é o ÚNICO ponto em que esta folha diverge da cópia em
   ds-planilha.css, e é divergência necessária: `pub.hero()` aceita um
   ícone, e só a área pública o usa (os quatro guias de IA passam um; a
   planilha restrita, não). A base de `.section-icon` mais abaixo pinta
   verde sobre verde-claro, feita para o fundo branco do cartão de seção —
   dentro do hero isso vira verde sobre verde-900, ilegível. Aqui ele
   inverte para véu branco, como no shell público antigo. */
.hero-section .section-icon {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ds-on-brand);
  margin-right: 0;
}
@media (max-width: 480px) {
  .hero-section { padding: var(--ds-space-6) 0; }
  .hero-section h1 { font-size: var(--ds-text-xl); }
}

/* `.section-icon` FORA do hero (título de `.section-card` sobre fundo
   branco nos guias) não existe em nenhuma folha DS — só o override acima,
   escopado a `.hero-section`. Base portada de dpmg-publico-shell.css. */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-tile-size, 40px);
  height: var(--icon-tile-size, 40px);
  border-radius: var(--ds-radius-md);
  background: var(--icon-tile-bg, rgba(var(--ds-green-700-rgb), 0.14));
  color: var(--ds-green-700);
  font-size: var(--ds-text-lg);
  margin-right: var(--ds-space-2);
  vertical-align: middle;
}


/* =====================================================================
   3. NAVEGAÇÃO DE VOLTA E ÍNDICE LATERAL DOS GUIAS
   =====================================================================
   `.sidebar-index`/`.sidebar-group`/estado `.active` e o par
   `.mobile-nav-toggle`/`.mobile-nav-collapse` são escritos/lidos por
   static/js/guia.js (scroll spy, clique de item fecha o painel móvel).
   Sem a regra de `.active` aqui o índice perde a indicação de posição;
   sem estado visível de `.mobile-nav-collapse` o painel "Nesta página"
   não abre/fecha abaixo de 768px.
   ===================================================================== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-green-700);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  margin-bottom: var(--ds-space-4);
}
.back-link:hover {
  color: var(--ds-green-500);
  text-decoration: underline;
}
.back-link:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

.sidebar-index {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  min-width: 0;
}

.sidebar-index .nav-link {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-base);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  transition: var(--ds-t-color);
}

.sidebar-index .nav-link:hover {
  background: var(--ds-green-50);
  color: var(--ds-green-700);
}

.sidebar-index .nav-link:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

/* Estado escrito por initScrollSpy() em guia.js: marca o item cujo alvo
   está na viewport. Não é decoração opcional — sem esta regra o índice
   fica sempre "mudo" sobre a posição de rolagem. */
.sidebar-index .nav-link.active {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  font-weight: var(--ds-weight-medium);
}

.sidebar-group {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-green-700);
  margin-top: var(--ds-space-4);
  margin-bottom: var(--ds-space-2);
  padding: 0 var(--ds-space-3);
}

.sidebar-group:first-child { margin-top: 0; }

/* Botão "Nesta página" — só visível abaixo de 768px (regra no bloco de
   breakpoints ao final). initMobileNavToggle() (guia.js) alterna
   aria-expanded no botão e a classe .show no painel referenciado por
   aria-controls. */
.mobile-nav-toggle {
  display: none;
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
  margin-bottom: var(--ds-space-4);
  width: 100%;
  min-height: 44px;
}

.mobile-nav-toggle:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

.mobile-nav-collapse.show { display: block; }


/* =====================================================================
   4. CARTÃO DE CONTEÚDO DOS GUIAS
   ===================================================================== */
.section-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-7);
  margin-bottom: var(--ds-space-7);
  min-width: 0;
}

.section-card h2 {
  color: var(--ds-green-700);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-xl);
  margin-bottom: var(--ds-space-6);
  padding-bottom: var(--ds-space-3);
  border-bottom: 3px solid var(--ds-gold-500);
  display: inline-block;
}

.section-card h3 {
  color: var(--ds-green-500);
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-lg);
  margin-top: var(--ds-space-6);
  margin-bottom: var(--ds-space-4);
}

/* ---- Fluxo de texto corrido dentro do cartão de seção ----------------
   ds.css abre com `* { margin: 0 }` (linha 40) e depois só devolve margem
   aos componentes que a declaram. Na área restrita isso não aparece: lá o
   conteúdo é formulário e tabela, onde a margem vem do componente. Os
   quatro guias de IA, porém, são documentos de texto corrido — 26 a 70
   parágrafos cada — e sem esta seção eles renderizam TODOS os parágrafos
   colados, sem separação entre um e outro. No stack antigo quem dava esse
   respiro era o reboot do Bootstrap (`p { margin-bottom: 1rem }`), que
   saiu junto com o bootstrap.min.css.

   Escopado a `.section-card` (o bloco de conteúdo dos guias) de propósito:
   uma regra global de `p`/`ul` colidiria com os componentes que já zeram a
   própria margem, como `.dpmg-hub-tile-text` e `.hero-section p`.

   Sem tocar em `list-style` nem em `padding-left`: o reset de lista de
   ds.css é escopado por atributo (`ul[class], ol[class]`), então as listas
   SEM classe dos guias mantêm marcador e recuo do agente do usuário, que é
   exatamente o comportamento anterior. */
.section-card p,
.section-card ul,
.section-card ol,
.section-card dl,
.section-card blockquote,
.section-card figure {
  margin-bottom: var(--ds-space-4);
}
.section-card li + li { margin-top: var(--ds-space-2); }
/* Sem margem sobrando no fim do cartão, senão o padding inferior dobra. */
.section-card > :last-child { margin-bottom: 0; }

/* Contador numerado das etapas de um passo a passo (guias). O círculo
   (2rem = 32px) bate exato com --ds-space-7; o recuo do texto usa o
   degrau seguinte (--ds-space-9, 56px) para sobrar respiro depois do
   círculo — o valor antigo (3rem/48px) caía exatamente no meio dos dois
   degraus da escala. */
.step-list {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.step-list li {
  position: relative;
  padding-left: var(--ds-space-9);
  margin-bottom: var(--ds-space-5);
  min-height: var(--ds-space-7);
}

.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ds-space-7);
  height: var(--ds-space-7);
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-sm);
}


/* =====================================================================
   5. BOTÃO "VOLTAR AO TOPO"
   =====================================================================
   `#backToTop` / `.back-to-top` — mostrado/escondido por
   initBackToTop() em guia.js via toggle da classe `.visible` conforme o
   scroll (nunca por CSS puro: não há regra de scroll-driven aqui).
   ===================================================================== */
.back-to-top {
  position: fixed;
  bottom: var(--ds-space-7);
  right: var(--ds-space-7);
  width: 48px;
  height: 48px;
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-duration-slow) var(--ds-ease),
              visibility var(--ds-duration-slow) var(--ds-ease),
              transform var(--ds-duration-slow) var(--ds-ease),
              background-color var(--ds-duration-fast) var(--ds-ease);
  box-shadow: var(--ds-shadow-md);
  z-index: var(--ds-z-dropdown);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--ds-green-500);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top:hover { transform: none; }
}


/* =====================================================================
   6. TABELAS DOS GUIAS
   =====================================================================
   `.table-tutorial`/`.table-compare` só trocam o cabeçalho de `.table`
   (ds-compat.css) para o padrão institucional (fundo verde, texto
   branco) e ganham o empilhamento em cartão no mobile — sem isso a
   tabela ficaria só com `overflow-x: auto` de `.table-responsive`
   (ds-compat.css), que continua valendo como fallback em telas médias.
   ===================================================================== */
.table-tutorial,
.table-compare {
  background: var(--ds-surface-alt);
}

.table-tutorial thead,
.table-compare thead {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
}

.table-tutorial th,
.table-compare th {
  font-weight: var(--ds-weight-semibold);
}

@media (max-width: 576px) {
  .table-tutorial thead,
  .table-compare thead {
    display: none;
  }

  .table-tutorial,
  .table-tutorial tbody,
  .table-tutorial tr,
  .table-tutorial td,
  .table-compare,
  .table-compare tbody,
  .table-compare tr,
  .table-compare td {
    display: block;
    width: 100%;
  }

  .table-tutorial tr,
  .table-compare tr {
    margin-bottom: var(--ds-space-4);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
  }

  .table-tutorial td,
  .table-compare td {
    padding: var(--ds-space-3);
    border: none;
    border-bottom: 1px solid var(--ds-border);
  }

  .table-tutorial td:last-child,
  .table-compare td:last-child {
    border-bottom: none;
  }

  .table-tutorial td::before,
  .table-compare td::before {
    content: attr(data-label);
    display: block;
    font-weight: var(--ds-weight-bold);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    color: var(--ds-green-700);
    margin-bottom: var(--ds-space-1);
  }
}


/* =====================================================================
   7. ALERTAS CUSTOMIZADOS DOS GUIAS
   =====================================================================
   Além das cores de `.alert` genéricas de ds-compat.css: dois avisos de
   destaque próprios da área pública (aviso informativo institucional e
   aviso de atenção) mais o modificador de tamanho `.alert-sm`.
   ===================================================================== */
.alert-info-custom {
  background: var(--ds-success-bg);
  border: 1px solid var(--ds-success-border);
  color: var(--ds-success-text);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
}

.alert-warning-custom {
  background: var(--ds-warning-bg);
  border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning-text);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
}

.alert-perigo-custom {
  background: var(--ds-danger-bg);
  border: 1px solid var(--ds-danger-border);
  border-left: 5px solid var(--ds-danger-text);
  color: var(--ds-danger-text);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
}

.alert-sm { font-size: var(--ds-text-base); }


/* =====================================================================
   8. PÁGINA DE SCRIPTS E EXTENSÕES (/script)
   ===================================================================== */

/* ---- A primeira secao da pagina: so os dois arquivos do SOLAR ------------
   Uma usuaria relatou que a pagina "mistura as extensoes". Misturava mesmo:
   os dois arquivos que quase todo mundo vem buscar apareciam depois do video
   e com o mesmo peso visual das duas extensoes do Chrome e do script do PJe,
   que nao tem relacao nenhuma com eles. A hierarquia agora e visual, e nao so
   de ordem: o primeiro cartao ganha moldura verde, e os dois itens de
   download dentro dele ficam maiores que os `.script-item` do resto da
   pagina. O que nao e SOLAR vem depois, atras de `.secao-divisor`. */
.section-card--destaque {
  border: 2px solid var(--ds-green-700);
  box-shadow: var(--ds-shadow-md);
}

#downloads-solar .script-item {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-green-700);
  padding: var(--ds-space-6);
}

#downloads-solar .script-name { font-size: var(--ds-text-lg); }

/* Fecho do cartao de destaque, dizendo o que vem depois. Discreto de
   proposito: e sinalizacao, nao conteudo. */
.secao-proximos {
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

/* Divisor entre blocos da pagina. NAO e um `.section-card`: e uma faixa de
   respiro com titulo, para que a fronteira entre "isto e do SOLAR" e "isto
   nao e" seja lida antes de qualquer cartao de download. Como fica fora do
   cartao, o `* { margin: 0 }` de ds.css alcanca o h2 e o p daqui - dai as
   margens explicitas. */
.secao-divisor {
  margin: var(--ds-space-9) 0 var(--ds-space-6);
  padding-top: var(--ds-space-6);
  border-top: 3px solid var(--ds-border-strong);
}

.secao-divisor h2 {
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-green-700);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-xl);
}

.secao-divisor p {
  margin: 0;
  color: var(--ds-text-muted);
  max-width: 62ch;
}

.script-item {
  background: var(--ds-surface-alt);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5);
  margin-bottom: var(--ds-space-4);
  border-left: 4px solid var(--ds-gold-500);
  transition: var(--ds-t-shadow);
  min-width: 0;
}

/* Lista dos modulos que vem dentro de um arquivo instalavel. Sem ela o card
   viraria caixa-preta: o usuario nao descobriria que o script que ele usava
   continua ali dentro, agora como modulo. */
.script-modulos {
  margin: var(--ds-space-4) 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.script-modulos-titulo {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-base);
}

.script-modulos-lista {
  margin: 0;
  padding-left: var(--ds-space-5);
}

.script-modulos-lista > li {
  margin-bottom: var(--ds-space-3);
  line-height: 1.5;
}

.script-modulos-lista > li:last-child { margin-bottom: 0; }

.script-modulo-nome {
  font-weight: 600;
  color: var(--ds-text);
}

.script-modulo-texto { color: var(--ds-text-muted); }

/* Aviso que pertence a UM modulo, e nao ao arquivo inteiro: quem age sozinho
   carrega o proprio cuidado, ao lado do proprio nome. */
.script-modulo-avisos {
  margin: var(--ds-space-2) 0 0;
  padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-2) var(--ds-space-6);
  list-style: disc;
  background: var(--ds-warning-bg);
  border-left: 3px solid var(--ds-warning-border);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-warning-text);
  font-size: var(--ds-text-sm);
}

.script-modulo-avisos > li { margin: var(--ds-space-1) 0; }


.script-item:hover {
  transform: translateX(4px);
  box-shadow: var(--ds-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .script-item:hover { transform: none; }
}

.script-name {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
  font-size: var(--ds-text-md);
  margin-bottom: var(--ds-space-2);
}

/* Resumo em linguagem do dia a dia, acima do detalhamento. Fica na cor
   cheia do texto (e não na `--ds-text-muted` de `.script-desc`) porque é
   a linha que a maioria dos leitores vai ler. */
.script-resumo {
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  margin-bottom: var(--ds-space-3);
}

.script-resumo strong {
  font-weight: var(--ds-weight-semibold);
}

/* Item que traz so o resumo nao renderiza `.script-desc`, cuja margem
   inferior fazia o espaco ate o botao de download. Reponha-o aqui. */
.script-resumo + .btn-download {
  margin-top: var(--ds-space-1);
}

.script-desc {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-base);
  margin-bottom: var(--ds-space-4);
  line-height: var(--ds-leading-normal);
}

/* Print/moldura da captura de tela da extensão — abre no lightbox
   (seção 10) via initLightbox() de guia.js. */
.extension-screenshot {
  display: block;
  max-width: min(100%, 700px);
  height: auto;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-strong);
  box-shadow: var(--ds-shadow-sm);
  padding: 6px;
  background: var(--ds-surface);
  margin-left: auto;
  margin-right: auto;
  cursor: zoom-in;
  transition: var(--ds-t-shadow);
}

.extension-screenshot:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
}

.extension-screenshot:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .extension-screenshot:hover { transform: none; }
}

.btn-download {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  border: none;
  padding: var(--ds-space-2) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-text-base);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  transition: var(--ds-t-color);
}

.btn-download:hover {
  background: var(--ds-green-500);
  color: var(--ds-on-brand);
}

.btn-download svg {
  width: 16px;
  height: 16px;
}

.btn-download:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

/* Selo de versão da extensão (ex.: "v3.6") — neutro, sem semântica de
   status; por isso fica fora do par recomendado/beta abaixo. */
.version-badge {
  background: var(--ds-gold-500);
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-xs);
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  display: inline-block;
  margin-bottom: var(--ds-space-4);
}

/* Data da última atualização do script, ao lado dos selos. Não é badge: não
   tem fundo nem peso, porque é informação de apoio e não deve competir com a
   versão. O `margin-bottom` acompanha o de `.version-badge` para que os dois
   fiquem na mesma linha de base dentro da flex-row. */
.script-data {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  color: var(--ds-text-muted, #5a6570);
  font-size: var(--ds-text-xs);
  margin-bottom: var(--ds-space-4);
  white-space: nowrap;
}

.badge-recomendado {
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
}

.badge-beta {
  background: var(--ds-danger-solid);
  color: var(--ds-on-brand);
}


/* =====================================================================
   9. VÍDEO INSTITUCIONAL (fachada de YouTube, R12 do design antigo)
   =====================================================================
   Thumbnail + botão de play; o iframe do YouTube só é criado no clique,
   por initYouTubeFacade() em guia.js — sem isso não haveria carga
   nenhuma de terceiro na primeira renderização da página.
   ===================================================================== */
.video-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: var(--ds-green-900);
  background-size: cover;
  background-position: center;
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yt-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--ds-green-900-rgb), 0.32);
  transition: background-color var(--ds-duration-base) var(--ds-ease);
}

.yt-facade:hover::before,
.yt-facade:focus-visible::before {
  background: rgba(var(--ds-green-900-rgb), 0.14);
}

.yt-facade-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-10);
  height: var(--ds-space-10);
  border-radius: 50%;
  background: var(--ds-green-700);
  color: var(--ds-on-brand);
  padding-left: var(--ds-space-1);
  box-shadow: var(--ds-shadow-lg);
  transition: transform var(--ds-duration-base) var(--ds-ease),
              background-color var(--ds-duration-base) var(--ds-ease);
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
  background: var(--ds-green-500);
  transform: scale(1.08);
}

.yt-facade:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .yt-facade::before,
  .yt-facade-play {
    transition: none;
  }
  .yt-facade:hover .yt-facade-play,
  .yt-facade:focus-visible .yt-facade-play {
    transform: none;
  }
}


/* =====================================================================
   10. LIGHTBOX DA CAPTURA DE TELA
   =====================================================================
   Aberto/fechado por initLightbox() em guia.js a partir de um clique em
   `.extension-screenshot` (seção 8) — o overlay/imagem/botão de fechar
   são criados dinamicamente, então precisam da regra aqui, não só a
   classe do gatilho.
   ===================================================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-7);
  background: rgba(var(--ds-green-900-rgb), 0.82);
  opacity: 0;
  transition: opacity var(--ds-duration-base) var(--ds-ease);
}

.lightbox-overlay.visible { opacity: 1; }

.lightbox-img {
  max-width: min(96vw, 1100px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  background: var(--ds-surface);
}

.lightbox-close {
  position: absolute;
  top: var(--ds-space-4);
  right: var(--ds-space-5);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  /* Véu branco sobre a imagem/fundo escuro do overlay — exceção
     explicitamente permitida a "zero cor solta". */
  background: rgba(255, 255, 255, 0.92);
  color: var(--ds-green-900);
  font-size: var(--ds-text-2xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover { background: var(--ds-surface); }

.lightbox-close:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}


/* =====================================================================
   11. DATA DE ATUALIZAÇÃO E TRILHA DE BREADCRUMB PRÓPRIA DE CONTEÚDO
   =====================================================================
   `.update-date` é o rodapé de "Última atualização" das páginas de
   conteúdo. `.breadcrumb-bar`/`.breadcrumb`/`.breadcrumb-item` é uma
   trilha Bootstrap que alguns guias (ex. tutorial.html) montam dentro do
   PRÓPRIO bloco `content`, sobrescrevendo `{% block breadcrumb %}` da
   casca (que por padrão vem vazio) — não é a trilha `.dpmg-breadcrumb`
   do design system (essa já está pronta em ds.css/ds-shell.css); sem
   layout aqui, essa trilha específica renderizaria como lista crua.
   ===================================================================== */
.update-date {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.breadcrumb-bar {
  background: var(--ds-surface-alt);
  border-bottom: 1px solid rgba(var(--ds-green-700-rgb), 0.1);
  padding: var(--ds-space-3) 0;
}

.breadcrumb-bar .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ds-text-sm);
}

.breadcrumb-bar .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--ds-text-faint);
}

.breadcrumb-bar .breadcrumb-item a {
  color: var(--ds-green-700);
  text-decoration: none;
}

.breadcrumb-bar .breadcrumb-item a:hover { text-decoration: underline; }

.breadcrumb-bar .breadcrumb-item a:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

.breadcrumb-bar .breadcrumb-item.active { color: var(--ds-text); }


/* =====================================================================
   12. MARCA (ícone SVG do logo "Ferramentas e IA")
   =====================================================================
   `.brand-icon` é só o SVG em si (dimensionamento vem inline via
   width/height da macro `logo_ferramentas.html`) — aqui garante que o
   traço acompanhe a cor do texto ao redor tanto na navbar quanto no
   rodapé (ambos já definem `color` no elemento pai em ds.css/ds-shell.css).
   ===================================================================== */
.brand-icon { flex-shrink: 0; }


/* =====================================================================
   13. HERO DO HUB PÚBLICO (ia.html)
   =====================================================================
   Portado de dpmg-paginas.css (seção 8 daquele arquivo, "HUB — skins
   público e home"): lá o hero convivia com o resto do componente de hub
   (grade de tiles etc., já coberto por ds-hub.css). Só o hero em si
   ficou sem folha nova — é conteúdo de casca pública, não do hub em si.
   ===================================================================== */
.dpmg-hub-hero {
  background: linear-gradient(135deg, var(--ds-green-900) 0%, var(--ds-green-700) 100%);
  color: var(--ds-on-brand);
  padding: var(--ds-space-7) 0 var(--ds-space-8);
  margin-bottom: var(--ds-space-6);
}

.dpmg-hub-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-7);
  flex-wrap: wrap;
}

.dpmg-hub-hero-copy {
  flex: 1 1 460px;
  min-width: 0;
}

/* `color` é obrigatório aqui, não herdado: `ds.css` declara
   `h1 { color: var(--ds-green-900) }` no reset de tipografia, e declaração
   explícita vence herança por mais distante que seja o ancestral. Sem esta
   linha o título nasce verde-900 sobre o gradiente que COMEÇA em verde-900
   — medido em 1:1 de contraste, título invisível. */
.dpmg-hub-hero h1 {
  color: var(--ds-on-brand);
  font-weight: var(--ds-weight-bold);
  font-size: clamp(2rem, 5vw, var(--ds-text-3xl));
  line-height: var(--ds-leading-tight);
  margin: 0 0 var(--ds-space-4);
  padding-bottom: var(--ds-space-3);
  position: relative;
}

.dpmg-hub-hero h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--ds-gold-500);
}

.dpmg-hub-hero p {
  font-family: var(--ds-font-ui);
  font-size: clamp(0.98rem, 2vw, var(--ds-text-lg));
  color: var(--ds-text-muted-on-brand);
  max-width: 560px;
  margin: 0;
  line-height: var(--ds-leading-relaxed);
}

.dpmg-hub-hero-shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  flex: 0 0 auto;
}

.dpmg-hub-shortcut {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-width: 220px;
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-md);
  /* Véus brancos sobre o gradiente de marca do hero — exceção permitida. */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--ds-on-brand);
  text-decoration: none;
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-base);
  transition: var(--ds-t-color), transform var(--ds-duration-base) var(--ds-ease);
}

.dpmg-hub-shortcut i {
  font-size: var(--ds-text-lg);
  color: var(--ds-gold-500);
  flex-shrink: 0;
}

.dpmg-hub-shortcut:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--ds-gold-500);
  transform: translateX(3px);
}

.dpmg-hub-shortcut:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .dpmg-hub-shortcut:hover { transform: none; }
}

@media (max-width: 576px) {
  .dpmg-hub-hero {
    padding: var(--ds-space-8) 0 var(--ds-space-8);
  }

  .dpmg-hub-hero-shortcuts { width: 100%; }

  .dpmg-hub-shortcut {
    min-width: 0;
    flex: 1 1 auto;
  }
}


/* =====================================================================
   14. BREAKPOINTS MÓVEIS COMPARTILHADOS
   =====================================================================
   Ajustes de mobile dos componentes das seções 2 a 4 que dependem de
   viewport — mantidos juntos (e não dentro de cada seção) porque no
   arquivo antigo também formavam um bloco só, mais fácil de auditar em
   conjunto numa reanálise de responsividade.
   ===================================================================== */
@media (max-width: 768px) {
  .sidebar-index {
    position: static;
    max-height: none;
    margin-bottom: var(--ds-space-6);
  }

  .mobile-nav-toggle { display: block; }

  .mobile-nav-collapse { display: none; }

  .mobile-nav-collapse.show { display: block; }

  .hero-section h1 { font-size: var(--ds-text-xl); }

  .section-card { padding: var(--ds-space-5); }
}


/* =====================================================================
   15. HUB PÚBLICO — ajustes sobre ds-hub.css
   =====================================================================
   O hub público (`ia.html`) usa a MESMA macro `hub_tile_section` dos 7
   hubs da área restrita, e por isso já herda quase tudo de `ds-hub.css`.
   Estas três regras cobrem o que só o hub público exige, e vivem aqui
   (folha da área pública) e não em `ds-hub.css` para não mexer no visual
   já verificado das telas autenticadas. Escopo por `.dpmg-hub--publico`,
   a classe que `ia.html` põe no container do hub.
   ===================================================================== */

/* O título de seção do hub público é marcado por um filete dourado
   vertical — o mesmo acento gráfico do hero, e o que separa visualmente
   "Jurisprudência", "Ferramentas" e "Guias de IA" numa página sem
   breadcrumb. `ds-hub.css` desenha o título como flex (ícone + texto) sem
   marcador, porque nos hubs autenticados quem cumpre esse papel é o
   ícone da seção, que aqui não existe. */
.dpmg-hub--publico .dpmg-hub-section-title {
  position: relative;
  padding-left: var(--ds-space-4);
  font-size: clamp(1.15rem, 2.2vw, var(--ds-text-xl));
  line-height: var(--ds-leading-tight);
  margin: 0 0 var(--ds-space-5);
}
.dpmg-hub--publico .dpmg-hub-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-gold-500);
}

/* Colisão medida entre a etiqueta e o título do card: a macro empilha
   `<span class="badge">` e `<h3>` dentro de um <div> SEM classe, contando
   com o fluxo de bloco para separá-los. Só que `.badge` é `inline-flex`
   com altura mínima própria em `ds-compat.css`, e uma caixa inline-flex
   mais alta que a linha transborda o próprio line box: a etiqueta
   terminava 1px DEPOIS de o título começar (medido: etiqueta 628–654px,
   título a partir de 653px). Transformar o <div> em coluna com `gap`
   resolve pela geometria e não pelo acaso da altura de linha. */
.dpmg-hub--publico .dpmg-hub-tile-header > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-2);
  min-width: 0;
}
.dpmg-hub--publico .dpmg-hub-tile-title { padding-top: 0; }


/* =====================================================================
   16. SELETORES DE ELEMENTO HERDADOS DO SHELL PÚBLICO
   =====================================================================
   dpmg-publico-shell.css também estilizava ELEMENTOS, não só classes — e
   por isso essas regras escaparam do levantamento por nome de classe que
   guiou esta migração. Foram encontradas medindo a página no navegador:
   `<code>` sem estilo estourava 8px na largura de 360px em /script, com
   caminhos longos como `C:\extensoes\pje-etiquetas` e `chrome://extensions/`.

   `html { scroll-padding-top }` NÃO entra aqui: ds-shell.css já o declara
   em função de --ds-navbar-height, o que é melhor que o valor fixo antigo
   — é o que impede as âncoras do índice lateral dos guias de pararem
   embaixo da navbar.
   ===================================================================== */

/* Trecho de código em linha (caminho de pasta, URL de configuração do
   navegador, nome de arquivo). O par de cor antigo era o do Bootstrap
   (#e9ecef / #d63384, rosa) — fora da paleta institucional. Aqui vira
   fundo afundado com tinta dourada escurecida, o token que o DS define
   justamente para "soar diferente do texto" mantendo 9,3:1. */
code {
  background: var(--ds-surface-sunken);
  padding: 0.2em 0.4em;
  border-radius: var(--ds-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ds-gold-ink);
  /* Caminho e URL não têm espaço para quebrar: sem isto a caixa cresce
     além do container e leva a página inteira à rolagem horizontal. */
  overflow-wrap: anywhere;
}

/* Imagem nunca é mais larga que o container. `.img-fluid` de ds-compat.css
   cobre só quem tem a classe; os guias inserem <img> sem classe. */
img {
  max-width: 100%;
  height: auto;
}


/* =====================================================================
   17. PROPORÇÃO FIXA DE MÍDIA (.ratio) — lacuna do ds-compat.css
   =====================================================================
   Os dois vídeos do Guia Claude Cowork e o vídeo de instalação de /script
   usam o utilitário `.ratio.ratio-16x9` do Bootstrap para dar proporção
   16:9 ao <iframe> do YouTube. `ds-compat.css` cobre row/col, card, btn,
   form-control, table e os utilitários de espaçamento, mas não `.ratio` —
   sem ele o <iframe> volta ao tamanho intrínseco e estoura o container:
   medido em 56px de rolagem horizontal a 768px em /cowork.

   Mora aqui, e não em ds-compat.css, porque as TRÊS únicas ocorrências de
   `.ratio` no projeto são públicas (tutorial.html ×2, script.html ×1) —
   conferido por varredura. Se algum dia a área restrita passar a usá-lo,
   o lugar certo passa a ser ds-compat.css, que é a ponte do vocabulário
   Bootstrap.
   ===================================================================== */
.ratio {
  position: relative;
  width: 100%;
  min-width: 0;
}
.ratio::before {
  display: block;
  padding-top: var(--ds-ratio, 56.25%);
  content: "";
}
.ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ratio-16x9 { --ds-ratio: 56.25%; }
.ratio-4x3  { --ds-ratio: 75%; }
.ratio-1x1  { --ds-ratio: 100%; }


/* =====================================================================
   18. TÍTULO SOBRE FUNDO DE MARCA — o alçapão desta migração
   =====================================================================
   ds.css declara `h1…h6 { color: var(--ds-green-900) }` no reset de
   tipografia. Na pilha ANTIGA nada pintava o heading, então ele herdava o
   branco do hero em que estava; na pilha nova a declaração explícita vence
   a herança, e todo título dentro de um hero escuro nasce verde-900 sobre
   verde-900 — 1:1 de contraste, título literalmente invisível.

   O defeito apareceu em TRÊS heros diferentes desta área (hub público,
   Atualizador Monetário e as duas buscas de jurisprudência) antes de eu
   parar de corrigir um a um. Esta regra fecha a classe inteira do
   problema, listando as superfícies de marca da área pública. Ao criar um
   hero novo, acrescente-o aqui.

   Vale só para heading: `p`, `a` e `small` dentro dos heros continuam sob
   a regra de cada folha, porque lá o tom secundário (véu branco parcial) é
   escolha de desenho, não acidente de herança.
   ===================================================================== */
.hero-section :is(h1, h2, h3, h4, h5, h6),
.dpmg-hub-hero :is(h1, h2, h3, h4, h5, h6),
.am-hero :is(h1, h2, h3, h4, h5, h6),
.sum-hero :is(h1, h2, h3, h4, h5, h6),
.stj-hero :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ds-on-brand);
}

/* =========================================================================
   BLOCO DE MODULO (secao "O que cada modulo faz na sua tela")

   A secao dos scripts do SOLAR era um cartao unico com treze paragrafos
   corridos e tres fotos soltas no fim: 3202 px de altura e 958 palavras, sem
   ligacao entre o texto e a imagem. Quem instalava e nao achava nada na tela
   nao tinha por onde comecar.

   Aqui cada modulo e um bloco fechado, com a FOTO por primeiro. As duas linhas
   que vem depois respondem, nesta ordem, as duas perguntas de quem esta
   perdido: onde isso aparece, e o que mudou na minha tela.
   ====================================================================== */
.modulo-grupo {
  margin: var(--ds-space-7) 0 var(--ds-space-3);
  padding-bottom: var(--ds-space-2);
  border-bottom: 2px solid var(--ds-border-strong);
  font-size: var(--ds-text-lg);
  color: var(--ds-green-700);
}

.modulo-tela {
  margin-bottom: var(--ds-space-5);
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-green-700);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.modulo-tela__nome {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
}

/* A imagem manda no bloco: ela vem antes do texto e ganha o espaco.
   `margin-inline:auto` centraliza a estreita sem esticar nenhuma - o
   tamanho de exibicao e o do arquivo, limitado pelo max-width da
   .extension-screenshot. */
.modulo-tela .extension-screenshot {
  margin-bottom: var(--ds-space-3);
}

.modulo-tela__linha {
  margin: 0 0 var(--ds-space-2);
  line-height: 1.55;
}

.modulo-tela__linha:last-child {
  margin-bottom: 0;
}

.modulo-tela__linha strong {
  color: var(--ds-green-700);
}


/* =====================================================================
   9. PASSO A PASSO DE INSTALACAO DOS SCRIPTS (/script#instalar)
   Prefixo `inst-` e nunca "solar-": o proprio userscript do SOLAR, que roda
   nesta pagina para sinalizar a instalacao, poe uma regra de fonte em
   [class*="solar-"].
   ===================================================================== */

/* Quadro de situacao: diz, sozinho, se os scripts estao rodando aqui. */
.inst-status {
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-strong);
  border-left-width: 6px;
  padding: var(--ds-space-4) var(--ds-space-5);
  margin-bottom: var(--ds-space-6);
  background: var(--ds-info-bg);
  color: var(--ds-info-text);
}
.inst-status--ok { background: var(--ds-success-bg); border-color: var(--ds-success-border); border-left-color: var(--ds-success-solid); color: var(--ds-success-text); }
.inst-status--atencao { background: var(--ds-warning-bg); border-color: var(--ds-warning-border); border-left-color: var(--ds-warning-text); color: var(--ds-warning-text); }
.inst-status--erro { background: var(--ds-danger-bg); border-color: var(--ds-danger-border); border-left-color: var(--ds-danger-solid); color: var(--ds-danger-text); }
.inst-status__titulo { font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold); margin-bottom: var(--ds-space-2); }
.section-card .inst-status p:last-child,
.section-card .inst-status ul:last-child { margin-bottom: 0; }
.inst-status ul { padding-left: var(--ds-space-5); }
.inst-status .btn-download { margin-top: var(--ds-space-2); }

.inst-intro { font-size: var(--ds-text-md); }

/* Trilha dos 4 passos: tambem e navegacao (clicavel). */
.inst-trilha {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-6);
}
.section-card .inst-trilha li + li { margin-top: 0; }
.inst-trilha button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  text-align: left;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
}
.inst-trilha button:hover { border-color: var(--ds-green-700); }
.inst-trilha button:focus-visible { outline: var(--ds-focus-outline); outline-offset: var(--ds-focus-outline-offset); }
.inst-trilha button.is-atual { background: var(--ds-green-700); border-color: var(--ds-green-700); color: var(--ds-on-brand); }
.inst-trilha__n {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-green-100);
  color: var(--ds-green-700);
  font-weight: var(--ds-weight-bold);
}
.inst-trilha button.is-atual .inst-trilha__n { background: var(--ds-on-brand); }

@media (max-width: 640px) {
  .inst-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Um passo. Sem JS todos aparecem, um embaixo do outro. */
.inst-passo {
  border-top: 1px solid var(--ds-border);
  padding-top: var(--ds-space-5);
  margin-bottom: var(--ds-space-5);
}
.inst-js .inst-passo { border-top: 0; padding-top: 0; }
.section-card .inst-passo h3 { margin-top: 0; font-size: var(--ds-text-xl); color: var(--ds-green-700); }
.inst-passo__rotulo {
  display: block;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-1);
}
.inst-passo p, .inst-passo li { font-size: var(--ds-text-md); line-height: var(--ds-leading-relaxed); }

.inst-botao { font-size: var(--ds-text-md); padding: var(--ds-space-3) var(--ds-space-5); }
.inst-botao--grande { font-size: var(--ds-text-lg); padding: var(--ds-space-4) var(--ds-space-7); }

.inst-variante {
  background: var(--ds-surface-alt);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
  margin-bottom: var(--ds-space-4);
}

.inst-dica { color: var(--ds-text-muted); font-size: var(--ds-text-base); }

.inst-copiar {
  font: inherit;
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-700);
  background: var(--ds-green-50);
  border: 1px solid var(--ds-green-700);
  border-radius: var(--ds-radius-sm);
  padding: 2px var(--ds-space-3);
  cursor: pointer;
}
.inst-copiar:hover { background: var(--ds-green-100); }
.inst-copiar:focus-visible { outline: var(--ds-focus-outline); outline-offset: var(--ds-focus-outline-offset); }
.inst-copiado { color: var(--ds-success-text); font-weight: var(--ds-weight-semibold); margin-left: var(--ds-space-2); }

kbd {
  font-family: var(--ds-font-ui);
  font-size: 0.85em;
  padding: 1px 6px;
  border: 1px solid var(--ds-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--ds-surface-alt);
  color: var(--ds-text);
  white-space: nowrap;
}

.inst-opcional, .inst-problema {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-3);
  background: var(--ds-surface);
}
.inst-opcional summary, .inst-problema summary {
  cursor: pointer;
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-700);
}
.inst-opcional[open] summary, .inst-problema[open] summary { margin-bottom: var(--ds-space-3); }
.section-card .inst-problema > :last-child { margin-bottom: 0; }

.inst-navegacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
}
.inst-navegacao .btn-download { margin-left: auto; }
.inst-voltar {
  font: inherit;
  background: none;
  border: 0;
  padding: var(--ds-space-2) 0;
  color: var(--ds-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.inst-diagnostico-texto {
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  font-size: var(--ds-text-sm);
  white-space: pre-wrap;
}

button.btn-download { cursor: pointer; font-family: inherit; }

/* A barra de navegacao do topo e fixa: sem folga, o "Passo N de 4" para
   onde a pagina rola fica escondido atras dela. */
#instalar, #problemas, .inst-passo h3 { scroll-margin-top: 88px; }

/* Passo 3: os dois arquivos, cada um no seu bloco (A e B). */
.inst-arquivo {
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-green-700);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
  margin-bottom: var(--ds-space-4);
}
.section-card .inst-arquivo > :last-child { margin-bottom: 0; }
.section-card .inst-arquivo__titulo {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-green-700);
  margin-bottom: var(--ds-space-3);
}
.inst-arquivo__letra {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-gold-500);
  color: var(--ds-green-900);
  font-size: var(--ds-text-base);
}