/* css/docs.css */
/* Docs públicas (/docs). Usa as variáveis e o visual do app.css; só o que é das docs fica aqui.
   Texto em rem; px só em bordas, raios e alvos. Tabela e código largos rolam DENTRO da caixa (nunca a página). */
.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-top:1.5rem;padding-bottom:3rem}
@media (min-width:900px){.docs{grid-template-columns:14rem minmax(0,1fr);gap:2.5rem;align-items:start}}

.docs-nav{min-width:0}
.docs-nav-t{font:600 .875rem/1.3 var(--f-body);color:var(--ink-soft);margin-bottom:.25rem}
.docs-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.docs-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:.25rem .75rem;border-radius:12px;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--card)}
.docs-nav a[aria-current="page"]{border-color:var(--ink);font-weight:700}
@media (min-width:900px){
  .docs-nav{position:sticky;top:6rem}
  .docs-nav ul{flex-direction:column;flex-wrap:nowrap;gap:.25rem}
  .docs-nav a{display:flex;justify-content:flex-start;border-color:transparent;background:none}
  .docs-nav a[aria-current="page"]{border-color:var(--line);background:var(--card)}
}

.docs-body{min-width:0;max-width:48rem;display:flex;flex-direction:column;gap:1rem}
.docs-body .docs-h1{font-size:min(2rem,11vw);line-height:1.15;margin-bottom:.25rem}   /* 31/10: titulo de guia com marca (logo + 'WhatsApp' nao se separam) estourava 320 x 2,0 a 2rem (64 px): acompanha a tela; com fonte 1,0 e no computador segue 2rem */
.docs-body h2{font-size:clamp(1rem,12vw,1.5rem);line-height:1.2;margin-top:1.5rem;scroll-margin-top:6rem}
.docs-body h3{font-size:1.125rem;line-height:1.3;margin-top:.75rem;scroll-margin-top:6rem}
.docs-body p,.docs-body li{line-height:1.6}
.docs-body ul,.docs-body ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.docs-body a{color:var(--gold-txt);text-underline-offset:.15em}
.docs-body p code,.docs-body li code,.docs-body td code,.docs-body h2 code,.docs-body h3 code{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:.05em .3em}

.docs-note{margin:0;padding:1rem min(1.125rem,4vw);border-left:4px solid var(--gold);background:var(--card);border-radius:0 16px 16px 0}
.docs-code{margin:0}

.docs-tbl{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.docs-tbl table{border-collapse:collapse;width:100%;font-size:.9375rem}
.docs-tbl th,.docs-tbl td{text-align:left;vertical-align:top;padding:.625rem .75rem;border-bottom:1px solid var(--line)}
.docs-tbl th{font-weight:700;background:var(--paper-2)}
.docs-tbl tr:last-child td{border-bottom:0}
.docs-tbl td:first-child{min-width:9rem}

.docs-pn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem;margin-top:2rem}
.docs-pn a{display:flex;flex-direction:column;gap:.125rem;min-height:44px;padding:.75rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;color:var(--ink)}
.docs-pn a span{font-size:.875rem;color:var(--ink-soft)}
.docs-next{text-align:right}

/* código dentro de tabela: uma linha só (a tabela rola dentro da caixa, nunca a página) */
.docs-tbl code{white-space:nowrap;overflow-wrap:normal}

/* ícone do cliente MCP (Ligar o seu agente): plaquinha clara nos dois temas, sempre com o nome ao lado */
.docs-client{display:flex;align-items:center;gap:.625rem}
.docs-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}   /* icone neutro (currentColor): segue o tema; o logo de marca saiu (D1) */
.docs-ico .ic{width:1.5rem;height:1.5rem}
.docs-ico .b{height:1.5rem;width:auto;margin:0}   /* logo da marca (lote 1) dentro da caixa */
.docs-marks{margin-top:1rem}

/* Termos e Privacidade: uma coluna, mesma tipografia das docs; versão logo abaixo do título */
.docs-legal{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.docs-legal{grid-template-columns:minmax(0,1fr)}}
.docs-legal .docs-body{max-width:46rem;margin:0 auto;width:100%}
.docs-ver{color:var(--ink-soft);font-size:.9375rem;margin-top:-.5rem}
.docs-body ul ul{margin-top:.375rem}
.docs-body .nowrap{white-space:nowrap}   /* CEP (04571-011): com digito nao parte no hifen (regua: word-break-mid so isenta hifen entre letras) */
/* docs em 320 x 2,0 (antigos): a nota recua pela tela e o h2 desce do degrau so quando a palavra nao cabe (clamp como os titulos do painel; 'respondendo' partia) */