/* ==========================================================================
   Documentação da API · identidade KeroPay (01/11/2026)
   ==========================================================================

   A página é pública e autônoma: não puxa dashboard.css nem custom_css.php, para
   um ajuste de tema do painel não mexer aqui sem querer. Os tokens abaixo seguem a
   identidade do site, e é aqui que se muda.

   A gramática:
   - escuro por padrão, claro só pelo botão do topo (chave "vp_theme", a mesma do
     painel). Sem @media prefers-color-scheme: o sistema não escolhe o tema;
   - fundo #080808, superfície #0F0F0F, superfície 2 #161616, filetes #232323/#333333;
   - verde #00FF80 em botão principal, item ativo, link, rótulo de seção e ícone
     solto. Texto sobre verde é preto. No tema claro o verde não dá contraste como
     texto, e --accent troca por um verde escuro de leitura;
   - verde de sucesso, âmbar e vermelho só como semântica (ponto de status, código
     de erro, ícone de aviso). Verbo HTTP não é semântica: fica neutro;
   - sidebar fixa de 256 px com tile de ícone de 32 px, ativo com tile na cor da
     marca e filete na borda; topo sticky de 56 px com a busca em forma de campo e o
     tema; conteúdo em card rounded-xl com borda de 1 px.

   Ícones: sprite Phosphor embutido (docs/_icones.php), classe .ic.
   Velocidade: um arquivo, sem @import, sem fonte externa (Metropolis local),
   sem backdrop-filter no caminho do scroll.
   SEM content-visibility nas seções: com a altura estimada das seções ainda não
   pintadas, o clique no índice parava até 1.800 px longe da seção (medido em
   28/09/2026). Âncora certa vale mais que o ganho da primeira pintura.
   ========================================================================== */

/* ---- Tokens: escuro (padrão) ---------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --paper:      #080808;
  --surface:    #0F0F0F;
  --surface-2:  #161616;
  --ink:        #FFFFFF;
  --ink-2:      #9CA3AF;
  --ink-3:      #9CA3AF;
  --rule:       #232323;
  --rule-2:     #333333;
  --brand:      #00FF80;
  --brand-hover:#00DB6E;
  --brand-ink:  #000000;
  --accent:     #00FF80;
  --btn-bg:     var(--brand);
  --btn-ink:    var(--brand-ink);
  --ok:         #10B981;
  --warn:       #F59E0B;
  --danger:     #EF4444;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .40);
  --shadow:     0 16px 40px rgba(0, 0, 0, .55);
  --overlay:    rgba(0, 0, 0, .62);
}

/* ---- Tokens: claro (escolha da pessoa) ------------------------------------ */
:root[data-theme="light"] {
  --paper:      #FAFAFA;
  --surface:    #FFFFFF;
  --surface-2:  #F5F5F5;
  --ink:        #171717;
  --ink-2:      #525252;
  --ink-3:      #5C5C5C;
  --rule:       #E5E5E5;
  --rule-2:     #D4D4D4;
  /* Verde de TEXTO (link, ícone, foco): #00FF80 sobre branco dá 1,3:1. */
  --accent:     #006B36;
  --ok:         #047857;
  --warn:       #92400E;
  --danger:     #B91C1C;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .05);
  --shadow:     0 16px 40px rgba(0, 0, 0, .14);
  --overlay:    rgba(10, 10, 10, .45);
}

/* ---- Medidas e código (iguais nos dois temas) ----------------------------- */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --topbar-h: 56px;
  --sb-w: 256px;
  --toc-w: 224px;
  --pagina: 1536px;
  --pad: 32px;
  /* Bloco de código escuro nos dois temas: é o que o leitor cola no editor. */
  --code-bg:   #0F0F0F;
  --code-bg-2: #161616;
  --code-rule: #232323;
  --code-ink:  #E5E7EB;
  --code-dim:  #9CA3AF;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body.page {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.page::before { display: none !important; }
body.drawer-open, body.palette-open { overflow: hidden; }
.main-content.docs { margin: 0; padding: 0; background: transparent; }

.ic { display: block; width: 1em; height: 1em; flex: none; }

.docs a { color: var(--accent); text-decoration: none; }
.docs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.docs :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:not(:disabled), summary, [role="button"], [role="tab"] { cursor: pointer; }

.docs p, .docs li { overflow-wrap: break-word; }
.docs ul, .docs ol { margin: 10px 0; padding-left: 22px; }
.docs li { margin: 5px 0; font-size: 14px; color: var(--ink-2); }
.docs li strong { color: var(--ink); }

/* `code` corrido no texto (não é bloco de código). */
.docs p code, .docs li code, .docs td code, .docs th code,
.docs .callout code, .docs dd code, .docs summary code, .docs h3 code, .docs h4 code {
  font-family: var(--mono);
  font-size: .86em;
  padding: .12em .4em;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
  /* Quebra quando não cabe: há JSON inteiro em linha no texto, e com nowrap ele
     alargava a página no celular (747 px de largura numa tela de 375). */
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.docs kbd {
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 8px 12px; border-radius: 8px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* ==========================================================================
   Sidebar (índice)
   ========================================================================== */
.doc-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--surface);
}
.sb-top {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}
.doc-brand { display: flex; align-items: center; min-width: 0; }
.doc-brand:hover { text-decoration: none !important; }
.doc-brand img { display: block; height: 20px; width: auto; }
.doc-brand .doc-logo-claro { display: none; }
:root[data-theme="light"] .doc-brand .doc-logo-claro { display: block; }
:root[data-theme="light"] .doc-brand .doc-logo-escuro { display: none; }
.doc-drawer-close {
  display: none;
  margin-left: auto;
  width: 36px; height: 36px;
  place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 20px;
}
.doc-drawer-close:hover { background: var(--surface-2); color: var(--ink); }

.doc-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.sb-grp + .sb-grp { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.doc-nav-cap {
  margin: 0 0 6px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transition: background .15s, color .15s;
}
.doc-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.doc-nav .tile {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 17px;
  transition: background .15s, color .15s;
}
.doc-nav a:hover .tile { background: var(--surface); color: var(--ink); }
.doc-nav .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-nav a.active {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.doc-nav a.active .tile { background: var(--brand); color: var(--brand-ink); }
/* Filete do ativo, na borda esquerda da coluna. */
.doc-nav a.active::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  width: 4px; height: 24px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--brand);
}
/* Subitem (Matrícula, dentro de Webhooks): sem tile, alinhado ao rótulo do pai. */
.doc-nav a.sub { margin-left: 42px; padding: 5px 8px; font-size: 12.5px; }
.doc-nav a.sub.active::before { left: -54px; height: 18px; }
.nav-verb {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.sb-foot {
  flex: none;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rule);
}
.sb-foot p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.sb-foot code { font-family: var(--mono); font-size: .92em; color: var(--ink); }

/* Botão principal: o ÚNICO da página. Verde sólido, texto preto, sem sombra. */
.doc-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-ink) !important;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s;
}
.doc-panel-btn .ic { font-size: 17px; }
.doc-panel-btn:hover { text-decoration: none !important; background: var(--brand-hover); }

/* ==========================================================================
   Shell: topo + conteúdo à direita da sidebar
   ========================================================================== */
.doc-shell { margin-left: var(--sb-w); min-width: 0; }

.doc-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.doc-top-title { display: none; min-width: 0; flex: 1; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Busca com cara de campo: é o que se espera clicar. */
.doc-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  height: 36px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 13.5px;
  transition: border-color .15s, color .15s;
}
.doc-search-btn .ic { font-size: 16px; }
.doc-search-btn:hover { border-color: var(--rule-2); color: var(--ink); }
.doc-search-btn .lbl { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.doc-topbar-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.doc-iconbtn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 20px;
  transition: background .15s, color .15s;
}
.doc-iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.doc-theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .doc-theme-toggle .ico-moon { display: block; }
:root[data-theme="light"] .doc-theme-toggle .ico-sun { display: none; }
.doc-menu-btn { display: none; }
.doc-menu-btn .ico-close { display: none; }
body.drawer-open .doc-menu-btn .ico-close { display: block; }
body.drawer-open .doc-menu-btn .ico-open { display: none; }

/* Progresso de leitura: 2px na base do topo, por transform (não força layout). */
.doc-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* Conteúdo + "Nesta página", na largura de página do painel. */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: 40px;
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 28px var(--pad) 96px;
  align-items: start;
}
.doc-content { min-width: 0; }

/* ---- Nesta página --------------------------------------------------------- */
.doc-toc {
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  max-height: calc(100vh - var(--topbar-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.doc-toc-cap {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.doc-toc li { margin: 0; font-size: inherit; }
.doc-toc li[hidden] { display: none; }
.doc-toc.is-empty { visibility: hidden; }
.doc-toc a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
  transition: color .15s, border-color .15s;
}
.doc-toc a:hover { color: var(--ink); text-decoration: none; }
.doc-toc a.active { color: var(--ink); border-left-color: var(--brand); font-weight: 600; }
.doc-toc a.lvl-3 { padding-left: 24px; font-size: 12px; }

/* ==========================================================================
   Abertura (topo da coluna de conteúdo)
   ========================================================================== */
.doc-intro { padding: 4px 0 28px; }
.doc-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.doc-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
}
.doc-subtitle { margin: 8px 0 0; max-width: 76ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Atalhos de partida: três cards; quem decide as colunas é a largura da coluna de
   conteúdo (container query em .doc-content), não a da janela. */
.doc-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0 0;
}
@container (min-width: 44rem) { .doc-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc-quick a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s;
}
.doc-quick a:hover { text-decoration: none; border-color: var(--rule-2); }
.doc-quick .n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 18px;
}
.doc-quick b { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; }
.doc-quick span:not(.n) { display: block; grid-column: 2; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.doc-quick .go { grid-column: 3; grid-row: 1; margin-top: 3px; font-size: 16px; color: var(--ink-3); transition: color .15s, transform .15s; }
.doc-quick a:hover .go { color: var(--ink); transform: translateX(2px); }

/* Guia de integração: card com texto à esquerda e ações à direita. */
.ai-box {
  margin: 12px 0 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.ai-box-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ai-box-head p  { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.ai-box-desc    { margin: 10px 0 16px; font-size: 13.5px; color: var(--ink-2); max-width: 80ch; }
.ai-box-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ai-note        { margin: 0 0 0 4px; font-size: 12.5px; color: var(--ink-2); }

.ai-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
.ai-copy-btn .ic { font-size: 16px; color: var(--accent); }
.ai-copy-btn:hover { background: var(--surface-2); }
.ai-copy-btn .ico-done { display: none; }
.ai-copy-btn.copied .ico-done { display: block; }
.ai-copy-btn.copied .ico-copy { display: none; }

/* Filtro segmentado do painel: trilho neutro, ativo é uma "tecla" elevada. */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-2);
}
.lang-switch button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule), var(--shadow-sm); }
:root:not([data-theme="light"]) .lang-switch button.active { background: #333333; box-shadow: none; }

/* ==========================================================================
   Seções
   ========================================================================== */
.doc-section {
  scroll-margin-top: calc(var(--topbar-h) + 20px);
  padding-top: 32px;
  margin-bottom: 36px;
}
.doc-section + .doc-section, .doc-intro + .doc-section { border-top: 1px solid var(--rule); }
.doc-section:last-child { margin-bottom: 0; }
.doc-section > h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
}
.doc-lead { margin: 0 0 20px; max-width: 76ch; color: var(--ink-2); font-size: 14.5px; }
.doc-content > .doc-section > p { max-width: 80ch; }
.doc-content h3, .doc-content h4 { letter-spacing: -.01em; color: var(--ink); }
.doc-content h3 { font-size: 15.5px; font-weight: 600; }
.doc-content h4 { margin: 20px 0 8px; font-size: 14px; font-weight: 600; }
.doc-content p { color: var(--ink-2); }
.doc-content p strong, .doc-content p b { color: var(--ink); }

.h-anchor { margin-left: 8px; font-size: .78em; font-weight: 400; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
h2:hover .h-anchor, h3:hover .h-anchor, .h-anchor:focus { opacity: 1; text-decoration: none; }

/* Tudo mora num card: rounded-xl, borda de 1px, fundo do card. */
.doc-card {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
}
.doc-card h3 { margin: 0 0 12px; }
.doc-card p { margin: 10px 0; font-size: 14px; color: var(--ink-2); }
.doc-card p:first-of-type { margin-top: 0; }
.doc-card p:last-child { margin-bottom: 0; }
.doc-card strong { color: var(--ink); }
.doc-card > .doc-card { background: var(--surface-2); }

.doc-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.doc-content { container-type: inline-size; }
@container (min-width: 52rem) { .doc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-grid-2 > * { min-width: 0; }

/* ==========================================================================
   Endpoint: a linha de assinatura da rota
   ========================================================================== */
.endpoint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--mono);
}
.method {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.endpoint .path { font-size: 13.5px; color: var(--ink); word-break: break-all; }
.endpoint .path b { color: var(--ink-3); font-weight: 400; }
.endpoint .badge-perm {
  margin-left: auto;
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-2);
}
.endpoint .badge-perm b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Blocos de código (escuros nos dois temas)
   ========================================================================== */
.code-block {
  margin: 14px 0;
  border: 1px solid var(--code-rule);
  border-radius: 12px;
  background: var(--code-bg);
  overflow: hidden;
}
:root[data-theme="light"] .code-block { border-color: #262626; }
.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--code-rule);
  background: var(--code-bg-2);
}
.code-title { font-size: 12px; font-weight: 600; color: var(--code-ink); white-space: nowrap; }
.code-lang { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--code-dim); }
.code-tabs { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.code-tabs::-webkit-scrollbar { display: none; }
.code-tabs button {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--code-dim);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.code-tabs button:hover { color: var(--code-ink); }
.code-tabs button.active { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.code-tabs + .btn-copy { margin-left: 6px; }
.btn-copy {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--code-dim);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 12px;
  transition: color .15s, background .15s, border-color .15s;
}
.code-tabs ~ .btn-copy { margin-left: 0; }
.btn-copy:hover { color: #FFFFFF; background: #232323; }
.btn-copy.copied { color: #10B981; border-color: #232323; }
.btn-copy .ico-done { display: none; }
.btn-copy.copied .ico-done { display: block; }
.btn-copy.copied .ico-copy { display: none; }
.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.75px;
  line-height: 1.72;
  color: var(--code-ink);
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--code-rule) transparent;
}
/* Zera o estilo de `code` corrido: dentro de <li> (passos) ele pintava fundo no bloco. */
.code-block pre code { padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; white-space: pre; }
.code-block pre[hidden] { display: none; }
/* /assets/metropolis.css põe Metropolis em todo span: sem isto o realce saía proporcional. */
.code-block pre span, .endpoint .path, .endpoint .path b { font-family: var(--mono); }
/* Realce: paleta única, legível sobre o fundo escuro dos dois temas. String e URL
   na cor da marca, chave e função em branco. */
.tok-key { color: #FFFFFF; } .tok-str { color: #00FF80; } .tok-num { color: #A7C7F2; }
.tok-bool { color: #C4AEEA; } .tok-null { color: #EFA3A3; } .tok-punc { color: #9CA3AF; }
.tok-cmd { color: #FFFFFF; } .tok-flag { color: #C4AEEA; } .tok-url { color: #00FF80; }
.tok-var { color: #A7C7F2; } .tok-fn { color: #FFFFFF; } .tok-kw { color: #C4AEEA; }
.tok-comment { color: #9CA3AF; font-style: italic; }

/* ==========================================================================
   Tabelas: tudo à esquerda, cabeçalho em caixa alta, card com borda
   ========================================================================== */
.param-table-wrap {
  margin: 12px 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.param-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 540px; }
.param-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.param-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; text-align: left; }
.param-table tr:last-child td { border-bottom: 0; }
.param-table td:first-child { color: var(--ink); white-space: nowrap; }
.param-table td strong { color: var(--ink); }
.param-table .type { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.param-table .wrap, .param-table td.wrap:first-child { white-space: normal; }
.req-yes { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.req-no  { font-size: 12.5px; color: var(--ink-2); }
.req-dep { font-size: 12.5px; font-weight: 600; color: var(--warn); }
.err-code {
  display: inline-block;
  min-width: 40px;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.err-code.is-4xx { color: var(--warn); }
.err-code.is-5xx { color: var(--danger); }

/* ==========================================================================
   Avisos: card neutro, a semântica mora no ÍCONE e no rótulo, não no fundo
   ========================================================================== */
.callout {
  position: relative;
  display: block;
  margin: 14px 0;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13.75px;
  line-height: 1.62;
  color: var(--ink-2);
}
.callout > i { display: none; }
.callout::before {
  content: "";
  position: absolute;
  left: 16px; top: 15px;
  width: 18px; height: 18px;
  background: var(--ink-2);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm16-40a8%2C8%2C0%2C0%2C1-8%2C8%2C16%2C16%2C0%2C0%2C1-16-16V128a8%2C8%2C0%2C0%2C1%2C0-16%2C16%2C16%2C0%2C0%2C1%2C16%2C16v40A8%2C8%2C0%2C0%2C1%2C144%2C176ZM112%2C84a12%2C12%2C0%2C1%2C1%2C12%2C12A12%2C12%2C0%2C0%2C1%2C112%2C84Z'/%3E%3C/svg%3E");
}
.callout::after {
  content: "Nota";
  position: absolute;
  top: 14px; left: 46px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.callout > div, .callout > p { margin-top: 20px; }
.callout strong { color: var(--ink); }
.callout.tip::before    { background: var(--accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M176%2C232a8%2C8%2C0%2C0%2C1-8%2C8H88a8%2C8%2C0%2C0%2C1%2C0-16h80A8%2C8%2C0%2C0%2C1%2C176%2C232Zm40-128a87.55%2C87.55%2C0%2C0%2C1-33.64%2C69.21A16.24%2C16.24%2C0%2C0%2C0%2C176%2C186v6a16%2C16%2C0%2C0%2C1-16%2C16H96a16%2C16%2C0%2C0%2C1-16-16v-6a16%2C16%2C0%2C0%2C0-6.23-12.66A87.59%2C87.59%2C0%2C0%2C1%2C40%2C104.49C39.74%2C56.83%2C78.26%2C17.14%2C125.88%2C16A88%2C88%2C0%2C0%2C1%2C216%2C104Zm-16%2C0a72%2C72%2C0%2C0%2C0-73.74-72c-39%2C.92-70.47%2C33.39-70.26%2C72.39a71.65%2C71.65%2C0%2C0%2C0%2C27.64%2C56.3A32%2C32%2C0%2C0%2C1%2C96%2C186v6h64v-6a32.15%2C32.15%2C0%2C0%2C1%2C12.47-25.35A71.65%2C71.65%2C0%2C0%2C0%2C200%2C104Zm-16.11-9.34a57.6%2C57.6%2C0%2C0%2C0-46.56-46.55%2C8%2C8%2C0%2C0%2C0-2.66%2C15.78c16.57%2C2.79%2C30.63%2C16.85%2C33.44%2C33.45A8%2C8%2C0%2C0%2C0%2C176%2C104a9%2C9%2C0%2C0%2C0%2C1.35-.11A8%2C8%2C0%2C0%2C0%2C183.89%2C94.66Z'/%3E%3C/svg%3E"); }
.callout.tip::after     { content: "Dica"; color: var(--accent); }
.callout.warn::before   { background: var(--warn); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M236.8%2C188.09%2C149.35%2C36.22h0a24.76%2C24.76%2C0%2C0%2C0-42.7%2C0L19.2%2C188.09a23.51%2C23.51%2C0%2C0%2C0%2C0%2C23.72A24.35%2C24.35%2C0%2C0%2C0%2C40.55%2C224h174.9a24.35%2C24.35%2C0%2C0%2C0%2C21.33-12.19A23.51%2C23.51%2C0%2C0%2C0%2C236.8%2C188.09ZM222.93%2C203.8a8.5%2C8.5%2C0%2C0%2C1-7.48%2C4.2H40.55a8.5%2C8.5%2C0%2C0%2C1-7.48-4.2%2C7.59%2C7.59%2C0%2C0%2C1%2C0-7.72L120.52%2C44.21a8.75%2C8.75%2C0%2C0%2C1%2C15%2C0l87.45%2C151.87A7.59%2C7.59%2C0%2C0%2C1%2C222.93%2C203.8ZM120%2C144V104a8%2C8%2C0%2C0%2C1%2C16%2C0v40a8%2C8%2C0%2C0%2C1-16%2C0Zm20%2C36a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C140%2C180Z'/%3E%3C/svg%3E"); }
.callout.warn::after    { content: "Atenção"; color: var(--warn); }
.callout.danger::before { background: var(--danger); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M120%2C136V80a8%2C8%2C0%2C0%2C1%2C16%2C0v56a8%2C8%2C0%2C0%2C1-16%2C0ZM232%2C91.55v72.9a15.86%2C15.86%2C0%2C0%2C1-4.69%2C11.31l-51.55%2C51.55A15.86%2C15.86%2C0%2C0%2C1%2C164.45%2C232H91.55a15.86%2C15.86%2C0%2C0%2C1-11.31-4.69L28.69%2C175.76A15.86%2C15.86%2C0%2C0%2C1%2C24%2C164.45V91.55a15.86%2C15.86%2C0%2C0%2C1%2C4.69-11.31L80.24%2C28.69A15.86%2C15.86%2C0%2C0%2C1%2C91.55%2C24h72.9a15.86%2C15.86%2C0%2C0%2C1%2C11.31%2C4.69l51.55%2C51.55A15.86%2C15.86%2C0%2C0%2C1%2C232%2C91.55Zm-16%2C0L164.45%2C40H91.55L40%2C91.55v72.9L91.55%2C216h72.9L216%2C164.45ZM128%2C160a12%2C12%2C0%2C1%2C0%2C12%2C12A12%2C12%2C0%2C0%2C0%2C128%2C160Z'/%3E%3C/svg%3E"); }
.callout.danger::after  { content: "Cuidado"; color: var(--danger); }

/* ==========================================================================
   Peças menores
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
}
.chip.off { color: var(--ink-2); text-decoration: line-through; }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.status-dot.pending   { background: var(--warn); }
.status-dot.confirmed, .status-dot.completed { background: var(--ok); }
.status-dot.expired   { background: var(--ink-3); }
.status-dot.canceled  { background: var(--danger); }

.doc-details {
  margin: 14px 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.doc-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.doc-details > summary::-webkit-details-marker { display: none; }
.doc-details > summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.doc-details[open] > summary::before { transform: rotate(45deg); }
.doc-details[open] > summary { border-bottom: 1px solid var(--rule); }
.doc-details > summary:hover { background: var(--surface-2); }
.doc-details-body { padding: 4px 16px 16px; }
.doc-details-body > .code-block:first-child { margin-top: 12px; }

/* Passos da integração: número no círculo, linha vertical ligando. */
.doc-steps { counter-reset: step; margin: 16px 0; padding: 0; list-style: none; }
.doc-steps > li {
  counter-increment: step;
  position: relative;
  margin: 0 0 0 13px;
  padding: 0 0 22px 30px;
  border-left: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
}
.doc-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.doc-steps > li::before {
  content: counter(step);
  position: absolute;
  left: -14px; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.doc-steps b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.doc-steps .code-block { margin-top: 10px; }

.doc-footer {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 24px var(--pad) 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.doc-footer .sep { margin-left: auto; }

/* ==========================================================================
   Busca (Ctrl K)
   ========================================================================== */
.palette-scrim { position: fixed; inset: 0; z-index: 60; background: var(--overlay); display: none; }
.palette-scrim.open { display: block; }
.palette {
  position: fixed;
  z-index: 61;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: none;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.palette.open { display: flex; }
.palette-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.palette-head svg { flex: none; color: var(--ink-2); }
.palette-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: 'Metropolis', system-ui, sans-serif;
  font-size: 15px;
  outline: none;
}
.palette-input::placeholder { color: var(--ink-3); }
.palette-results { overflow-y: auto; padding: 6px; }
.palette-results a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); }
.palette-results a:hover, .palette-results a.sel { background: var(--surface-2); text-decoration: none; }
.palette-results a.sel { box-shadow: inset 0 0 0 1px var(--rule-2); }
.palette-results .t { display: block; font-size: 13.5px; font-weight: 600; }
.palette-results .c { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-empty { margin: 0; padding: 18px 12px; font-size: 13px; color: var(--ink-2); }
.palette-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--ink-2); }
.palette-foot kbd { margin-right: 3px; }

/* ==========================================================================
   Pontos de quebra
   ========================================================================== */
/* "Nesta página" só ao lado quando o conteúdo ainda tem folga (de 1440 px para
   cima): em 1280 ele apertava a coluna para 696 px e os atalhos empilhavam. */
@media (max-width: 1439px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}

/* Abaixo do lg a sidebar vira gaveta de tela cheia, e o topo ganha o menu. */
@media (max-width: 1023px) {
  :root { --pad: 20px; }
  .doc-shell { margin-left: 0; }
  .doc-sidebar {
    width: 100%;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    border-right: 0;
  }
  .doc-sidebar.open { transform: none; }
  .doc-drawer-close { display: grid; }
  .doc-menu-btn { display: grid; margin-left: -8px; }
  .doc-top-title { display: block; }
  .doc-search-btn { width: 36px; max-width: 36px; padding: 0; justify-content: center; border: 0; background: transparent; font-size: 20px; }
  .doc-search-btn .ic { font-size: 20px; }
  .doc-search-btn .lbl, .doc-search-btn kbd { display: none; }
  .doc-search-btn:hover { background: var(--surface-2); }
  .doc-drawer-overlay { display: none; }
  .doc-nav a { padding: 8px; }
}
@media (min-width: 1024px) { .doc-drawer-overlay { display: none; } }

@media (max-width: 640px) {
  :root { --pad: 16px; }
  body.page { font-size: 14px; }
  .doc-title { font-size: 24px; }
  .doc-section > h2 { font-size: 20px; }
  .doc-card, .ai-box { padding: 16px; }
  .code-block pre { font-size: 12px; padding: 12px 13px; }
  .code-head { flex-wrap: wrap; padding: 6px 6px 6px 12px; }
  .code-tabs { width: 100%; order: 3; margin-left: 0; }
  .btn-copy { margin-left: auto; }
  .endpoint { padding: 11px 12px; }
  .endpoint .badge-perm { margin-left: 0; }
  .palette { top: 0; left: 0; transform: none; width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .doc-footer .sep { margin-left: 0; }
}

/* ==========================================================================
   Impressão: a doc inteira em papel, sem a navegação
   ========================================================================== */
@media print {
  .doc-topbar, .doc-sidebar, .doc-toc, .doc-drawer-overlay,
  .palette, .palette-scrim, .ai-box, .doc-quick, .btn-copy, .h-anchor { display: none !important; }
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F5F5; --ink: #000000; --ink-2: #333333;
    --ink-3: #444444; --rule: #CCCCCC; --rule-2: #BBBBBB; --accent: #006B36;
  }
  body.page { background: #FFF; color: #000; font-size: 10.5pt; }
  .doc-shell { margin-left: 0; }
  .doc-layout { display: block; padding: 0; max-width: none; }
  .doc-section { page-break-inside: auto; }
  .code-block { border-color: #999; }
}