/* ==========================================================================
   /docs — a documentação no design system

   ⚠️ **A fonte de verdade é `docs/design-system/README.md`.**

   Esta folha REDEFINE o cromo `.nb-*` da página, em vez de reescrever as ~900
   linhas de HTML dela. É deliberado, e vale registrar por quê: na doc as classes
   `.nb-callout`, `.nb-code`, `.nb-eyebrow` e companhia são de APRESENTAÇÃO — não
   há JavaScript nem teste preso a elas (o único gancho é `.docs-subnav .nb-chip`,
   que o scroll-spy usa, e ele continua com o nome). Reescrever o HTML para trocar
   nome de classe seria mover 900 linhas de conteúdo denso — código de
   configuração de cinco clientes MCP, tabela de 16 tools, exemplos de `curl` —
   para ganhar nada além do nome.

   ⚠️ **Tudo escopado em `body.is-docs`.** As mesmas classes desenham a LANDING,
   que segue no neobrutalismo e não migrou. Uma regra `.nb-callout` sem o escopo
   apagaria os blocos coloridos de lá.

   O que a doc perde ao migrar, e por que está certo: os callouts eram seis
   retângulos chapados de verde, amarelo, vermelho e roxo numa mesma rolagem. O
   design system dá ao amarelo UM emprego, e ao vermelho só o destrutivo — aqui
   eles viram fio à esquerda sobre pergaminho, e a cor volta a significar.
   ========================================================================== */

/* --- estrutura ------------------------------------------------------------ */

body.is-docs .gab-painel { min-width: 0; }

/* As `<section>` da doc vinham com `padding: 3.5rem 0` inline e fundo alternado.
   Aqui elas viram faixas de conteúdo separadas por um fio, no ritmo do resto do
   produto. O `!important` é contra o `style=` inline do template. */
body.is-docs .nb-section {
    padding: 2.4rem 0 !important;
    background: transparent;
    border-bottom: 1px solid var(--g-linha);
}
body.is-docs .nb-section--alt { background: transparent; }
/* ⚠️ O `.nb-hero` do `custom.css` é uma tela de abertura: `text-align: center`,
   `min-height: clamp(560px, 82vh, 880px)` e `justify-content: center` — ele foi
   feito para a landing, onde ocupa a primeira dobra inteira com a cena 3D atrás.
   Numa documentação isso empurra o índice para baixo da dobra e centraliza um
   parágrafo de 62ch, que é o pior comprimento de linha para ler centralizado. */
body.is-docs .nb-hero {
    padding: 1.6rem 0 2rem !important;
    border-bottom: 0;
    text-align: left;
    display: block;
    min-height: 0;
}
/* Os `<hr>` entre as seções somam com a borda de cada uma. */
body.is-docs .gab-painel hr { display: none; }

body.is-docs .nb-section > .container {
    max-width: 62rem !important;
    padding-left: 0;
    padding-right: 0;
}

/* --- tipografia ----------------------------------------------------------- */

body.is-docs .nb-display,
body.is-docs .nb-section h1 {
    font-family: var(--gf-ui) !important;
    font-size: 1.7rem !important;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--g-tinta);
}
body.is-docs .nb-mark { background: none; padding: 0; box-shadow: none; border-bottom: 3px solid var(--g-marca); }

/* O cabeçalho de seção do design system: `NN · NOME` em mono sobre régua de
   tinta. Aqui o número não existe (as seções são navegáveis por âncora, não
   ordenadas), então fica só o nome. */
/* ⚠️ `display: block` explícito: com o `.nb-eyebrow` acima virando
   `inline-block`, o `<h2>` (que o `custom.css` deixa como inline-block para
   caber o realce da landing) subia para a MESMA linha — e a régua de tinta da
   seção passava por baixo dos dois, como se sublinhasse a sobrancelha. */
body.is-docs .section-title {
    display: block;
    font-family: var(--gf-mono) !important;
    font-size: .72rem !important;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-tinta);
    background: none !important;
    box-shadow: none !important;
    margin: .35rem 0 1.2rem !important;
    padding: 0 0 .55rem !important;
    border-bottom: 1px solid var(--g-tinta);
}
/* A sobrancelha colorida (verde, roxa, azul chapados) vira rótulo mono. */
body.is-docs .nb-eyebrow {
    display: inline-block;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: var(--gf-mono) !important;
    font-size: .62rem !important;
    letter-spacing: .12em;
    color: var(--g-tenue) !important;
    text-transform: uppercase;
}
body.is-docs .nb-eyebrow i { display: none; }

body.is-docs .docs-subhead {
    font-family: var(--gf-ui);
    font-size: .95rem;
    font-weight: 700;
    margin: 1.8rem 0 .5rem;
}
body.is-docs .nb-section h6 {
    font-family: var(--gf-ui);
    font-size: .86rem;
    font-weight: 600;
    margin: 1.2rem 0 .4rem;
}
body.is-docs .nb-section p,
body.is-docs .nb-section li,
body.is-docs .lead {
    font-family: var(--gf-prosa);
    font-size: .95rem !important;
    line-height: 1.6;
    color: var(--g-tinta-70);
    max-width: 74ch;
}
body.is-docs .nb-note,
body.is-docs .nb-section .text-muted { color: var(--g-tenue) !important; }
body.is-docs .nb-section a { color: var(--g-ok); text-decoration: underline; text-underline-offset: 2px; }
body.is-docs .nb-section a:hover { color: var(--g-tinta); background: none; }

body.is-docs .nb-section code,
body.is-docs .gab-painel code {
    background: var(--g-pergaminho);
    border: 1px solid var(--g-linha);
    border-radius: 0;
    color: var(--g-tinta-70);
    font-family: var(--gf-mono);
    font-size: .82em;
    font-weight: 500;
    padding: 0 4px;
}

/* --- avisos --------------------------------------------------------------- */

/* Eram retângulos chapados de verde/amarelo/vermelho/roxo. Viram nota com fio à
   esquerda; a cor do fio é o que resta da semântica, e só o `--warn` mantém o
   amarelo cheio — é o "aviso" do design system, a regra que o usuário só
   descobriria errando. */
body.is-docs .nb-callout {
    background: var(--g-pergaminho) !important;
    border: 0 !important;
    border-left: 2px solid var(--g-linha) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: .9rem 1.1rem !important;
    margin: 1rem 0;
    color: var(--g-tinta-70) !important;
    max-width: 74ch;
}
body.is-docs .nb-callout h6 {
    font-family: var(--gf-ui);
    font-size: .88rem;
    font-weight: 700;
    color: var(--g-tinta);
    margin: 0 0 .4rem;
}
body.is-docs .nb-callout h6 i,
body.is-docs .nb-callout > p > i:first-child { display: none; }
body.is-docs .nb-callout--ok { border-left-color: var(--g-ok) !important; }
body.is-docs .nb-callout--warn { background: var(--g-aviso) !important; border-left-color: var(--g-atencao) !important; }
body.is-docs .nb-callout--danger { border-left-color: var(--g-erro) !important; }
/* ⚠️ `custom.css` força `color: var(--nb-bg-alt) !important` em TODO descendente
   de `.nb-callout--danger` — texto claro, para o fundo vermelho chapado que
   deixou de existir. Sem desfazer, o bloco de "WSDL online não significa que
   funciona" sai branco sobre pergaminho. */
body.is-docs .nb-callout--danger,
body.is-docs .nb-callout--danger * { color: var(--g-tinta-70) !important; }
body.is-docs .nb-callout--danger strong { color: var(--g-erro) !important; }
body.is-docs .nb-callout--danger code { background: var(--g-pergaminho) !important; border-color: var(--g-linha) !important; }
body.is-docs .nb-callout--cream { border-left-color: var(--g-linha) !important; }

body.is-docs .tribunal-highlight {
    background: var(--g-aviso);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: .9rem 1.1rem;
    font-family: var(--gf-prosa);
    font-size: .95rem;
    color: var(--g-tinta-70);
    max-width: 74ch;
}
body.is-docs .tribunal-highlight i { display: none; }

/* --- código --------------------------------------------------------------- */

/* ⚠️ O bloco de código continua ESCURO. Ele é o único elemento da doc que se
   copia e cola, e o `atom-one-dark` do highlight.js (`base.html`) é calibrado
   para fundo preto — clarear o fundo sem trocar o tema apagaria o realce da
   sintaxe, que é o que torna um JSON de configuração legível. É o mesmo
   raciocínio já registrado para o `pre` da resposta do chat. */
body.is-docs .nb-code {
    border: 1px solid var(--g-tinta);
    border-radius: 0;
    box-shadow: none;
    margin: .6rem 0 1rem;
    max-width: 74ch;
}
body.is-docs .nb-code pre { border-radius: 0; }
body.is-docs .nb-code .copy-btn {
    border-radius: 0;
    border: 1px solid var(--g-linha);
    box-shadow: none;
    font-family: var(--gf-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* --- índice fixo ---------------------------------------------------------- */

body.is-docs .docs-subnav {
    background: var(--g-papel);
    border-bottom: 1px solid var(--g-tinta);
    border-top: 0;
    box-shadow: none;
    padding: .6rem 0;
}
body.is-docs .docs-subnav .container { max-width: 62rem !important; padding-left: 0; padding-right: 0; }
body.is-docs .docs-subnav .nb-chip,
body.is-docs .tribunal-chips .nb-tag,
body.is-docs .nb-section .nb-tag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--g-linha);
    border-radius: 0;
    box-shadow: none;
    padding: .3rem .7rem;
    font-family: var(--gf-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-tenue);
    text-decoration: none;
}
body.is-docs .docs-subnav .nb-chip:hover { border-color: var(--g-tinta); color: var(--g-tinta); background: transparent; }
/* O scroll-spy marca a seção visível — é o "onde estou" desta página. */
body.is-docs .docs-subnav .nb-chip.is-active {
    background: var(--g-tinta);
    border-color: var(--g-tinta);
    color: var(--g-papel);
}

/* --- cartões (mapa de produtos e o fecho) --------------------------------- */

body.is-docs .product-map { gap: 1px; background: var(--g-linha); border: 1px solid var(--g-linha); }
body.is-docs .product-map-card {
    background: var(--g-papel) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: .95rem 1.1rem;
    color: var(--g-tinta) !important;
    text-decoration: none;
}
body.is-docs .product-map-card:hover { background: var(--g-pergaminho) !important; }
/* ⚠️ O sublinhado tem de sair do PRÓPRIO `<a>`, e com especificidade acima de
   `body.is-docs .nb-section a` (0,2,2) — daí o seletor com a tag. `text-
   decoration` não é herdada: ela é PROPAGADA aos descendentes inline, e o filho
   não consegue removê-la. Enquanto a regra vivia no `.pm-name`, o nome e a
   legenda dos quatro cartões saíam os dois riscados. */
body.is-docs .nb-section a.product-map-card,
body.is-docs .nb-section a.product-map-card:hover { text-decoration: none; }
body.is-docs .pm-name { font-family: var(--gf-ui); font-weight: 600; font-size: .92rem; }
body.is-docs .pm-meta { font-family: var(--gf-mono); font-size: .68rem; color: var(--g-tenue); }

body.is-docs .docs-cta-grid { gap: 1px; background: var(--g-linha); border: 1px solid var(--g-linha); }
body.is-docs .docs-cta-card {
    background: var(--g-papel) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--g-tinta) !important;
    padding: 1.4rem 1.5rem;
}
body.is-docs .docs-cta-card h3 {
    font-family: var(--gf-ui) !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    text-transform: none;
    color: var(--g-tinta) !important;
}
body.is-docs .docs-cta-card h3 i { display: none; }
body.is-docs .docs-cta-card .on-color-muted { color: var(--g-tinta-70) !important; }

/* --- botões e tabela ------------------------------------------------------ */

/* `.btn` do Bootstrap + neobrutalismo tem dezenas de `!important` a desfazer —
   por isso a regra 3 do `gabinete.css` proíbe usá-lo lá. Aqui a doc já está
   cheia deles, e desfazer é mais barato que reescrever o HTML. */
body.is-docs .gab-painel .btn {
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid var(--g-tinta) !important;
    font-family: var(--gf-ui) !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: .5rem 1rem !important;
}
body.is-docs .gab-painel .btn i { display: none; }
body.is-docs .gab-painel .btn-primary {
    background: var(--g-marca) !important;
    color: var(--g-tinta) !important;
}
body.is-docs .gab-painel .btn-primary:hover { background: var(--g-tinta) !important; color: var(--g-marca) !important; }
body.is-docs .gab-painel .btn-ghost {
    background: transparent !important;
    color: var(--g-tinta) !important;
}
body.is-docs .gab-painel .btn-ghost:hover { background: var(--g-tinta) !important; color: var(--g-papel) !important; }

/* ⚠️ O `.table` do `custom.css` leva borda de 3px e sombra dura de 5px — numa
   tabela de 21 linhas isso vira um bloco preto no meio da leitura. */
body.is-docs .api-docs-table {
    border: 1px solid var(--g-linha) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* ⚠️ O `overflow-x: auto` do wrapper FICA. Uma primeira versão pôs
   `overflow: visible` aqui para tirar o recorte da sombra — e a tabela, que a
   375px mede 472px, passou a empurrar a PÁGINA inteira para o lado: rolagem
   horizontal no documento, medida no navegador. A tabela rola dentro da
   própria caixa. */
body.is-docs .table-responsive {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
    max-width: 100%;
}
body.is-docs .api-docs-table th,
body.is-docs .api-docs-table td {
    border-color: var(--g-linha) !important;
    padding: .5rem .7rem !important;
    font-family: var(--gf-ui);
    font-size: .84rem;
    color: var(--g-tinta) !important;
    vertical-align: top;
}
body.is-docs .api-docs-table thead th {
    background: var(--g-pergaminho) !important;
    font-family: var(--gf-mono) !important;
    font-size: .64rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-tenue) !important;
}
/* A linha de grupo ("Consulta", "Documentos") é rótulo, não dado. */
body.is-docs .api-docs-table .tool-group-row td {
    background: var(--g-pergaminho) !important;
    font-family: var(--gf-mono) !important;
    font-size: .62rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-tenue) !important;
    font-weight: 500;
}
body.is-docs .api-docs-table .badge {
    background: transparent !important;
    border: 1px solid var(--g-ok);
    border-radius: 0;
    color: var(--g-ok) !important;
    font-family: var(--gf-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .1rem .35rem;
}

@media (max-width: 860px) {
    body.is-docs .nb-section > .container,
    body.is-docs .docs-subnav .container { max-width: 100% !important; }
}