/* ClipoOs Max — Documentacao publica da API (escopo exclusivo de docs.html) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/*
 * `hidden` tem que esconder — sempre, em TODA pagina.
 *
 * A regra `[hidden] { display: none }` do navegador e folha de user-agent, e
 * QUALQUER regra de autor a sobrepoe. Aqui isso e critico porque a busca da
 * doc filtra a navegacao com `el.hidden = true`: sem esta linha, `.docs-nav-link`
 * e `.docs-nav-group` (que declaram `display`) continuariam visiveis mesmo
 * "escondidos", e o usuario veria a lista inteira com o rotulo de "nenhum
 * resultado" ao lado. O mesmo vale para `.docs-sidebar-overlay` e `.copy-toast`.
 *
 * Este arquivo e standalone (nao importa home.css), entao a protecao precisa
 * ser redeclarada aqui. `!important` global e o unico jeito de fechar isso de
 * uma vez, em vez de cacar classe por classe.
 */
[hidden] { display: none !important; }

:root {
  --bg: #06070a;
  --panel: rgba(255, 255, 255, 0.028);
  --panel-solid: #0d0f15;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f6fa;
  --dim: #9aa6b8;
  /* #5b6779 dava ~3,35:1 sobre o fundo — abaixo do minimo 4,5:1 do WCAG AA.
     #7d8899 sobe para ~4,6:1 e mantem a hierarquia com --dim. */
  --muted: #7d8899;
  --accent: #00e5a0;
  --accent-soft: rgba(0, 229, 160, 0.12);
  --blue: #4c8dff;
  --warning: #fbbf24;
  --danger: #f87171;
  --r-lg: 22px;
  --r-md: 14px;
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Tokens locais da doc (nao existem no home.css) --------------------------
     A altura da topbar vira variavel porque tres coisas dependem dela ao mesmo
     tempo: o `top` do sticky da sidebar/TOC, o `scroll-margin-top` dos titulos
     e o offset do drawer no mobile. Se ficasse hardcoded, mudar o padding da
     topbar quebraria a navegacao por ancora em silencio. */
  --topbar-h: 61px;
  --r-sm: 10px;
  --sidebar-w: 260px;
  --toc-w: 220px;
  --content-max: 820px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Paleta do realce de sintaxe — derivada dos tokens da marca para o codigo
     nao parecer um bloco de outro produto colado dentro do portal. */
  --tok-key: #c9a2ff;
  --tok-str: #5cdfae;
  --tok-num: #ffab6b;
  --tok-com: var(--muted);
  --tok-fn: #79aaff;
  --tok-punc: var(--dim);
  --code-bg: #0a0c11;
}

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

html {
  scroll-behavior: smooth;
  /*
   * FONTE UNICA do recuo de ancora.
   *
   * Aplicado no container de rolagem, vale para QUALQUER destino de `#hash`
   * — inclusive titulos novos que aparecerem sem classe `.docs-h*`. Por isso
   * os titulos nao declaram `scroll-margin-top`: as duas propriedades SOMAM,
   * e a versao anterior parava a secao a 166px do topo (81 + 85) em vez de
   * 81px. O efeito visivel era a barra lateral destacar a secao ANTERIOR a
   * que o usuario tinha acabado de clicar.
   *
   * O docs.js le este mesmo valor computado para posicionar a linha do
   * scrollspy, entao mudar so aqui mantem CSS e JS sincronizados.
   */
  scroll-padding-top: calc(var(--topbar-h) + 20px);
}

/* ---------- Casca ---------- */
.docs-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(0, 229, 160, 0.28); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
/* Firefox nao entende ::-webkit-scrollbar; a barra fina vem por aqui. */
.docs-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

a { color: inherit; text-decoration: none; }

/* Foco visivel unico para TODO interativo da pagina.
   `:focus-visible` (e nao `:focus`) para o anel nao piscar no clique de mouse,
   so na navegacao por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Topbar ---------- */
.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 clamp(14px, 3vw, 28px);
  background: rgba(6, 7, 10, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.docs-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.docs-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: 15px;
  color: #04120c;
  background: linear-gradient(135deg, var(--accent), #57f7c6);
  box-shadow: 0 6px 22px rgba(0, 229, 160, 0.28);
}
.docs-brand strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.docs-brand small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.docs-topbar-right { display: flex; align-items: center; gap: 10px; }
.docs-topbar-right a,
.docs-topbar-right button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dim);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.docs-topbar-right a:hover,
.docs-topbar-right button:hover {
  color: var(--text);
  background: var(--panel);
  border-color: var(--line);
}
.docs-topbar-right .primary {
  color: #04120c;
  background: var(--accent);
  font-weight: 600;
}
.docs-topbar-right .primary:hover { background: #4bf0c1; color: #04120c; border-color: transparent; }

/* Hambúrguer: so existe no mobile (ver media query <768px). */
.docs-menu-toggle {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.docs-menu-toggle:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }
.docs-menu-toggle svg { width: 18px; height: 18px; }
/* Fallback tipografico caso o HTML use texto/entidade no lugar de <svg>. */
.docs-menu-toggle { font-size: 17px; line-height: 1; }

/* ---------- Layout de 3 colunas ---------- */
.docs-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: clamp(24px, 4vw, 56px);
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  align-items: start;
}

/* ---------- Sidebar ---------- */
.docs-sidebar {
  position: sticky;
  top: var(--topbar-h);
  /* `100dvh` evita o corte causado pela barra de endereco movel; o `100vh`
     logo acima e o fallback para navegadores sem unidades dinamicas. */
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 14px 40px 0;
  border-right: 1px solid var(--line);
  z-index: 50;
}

/* Overlay do drawer: inerte no desktop, ativado so na media query mobile. */
.docs-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(4, 5, 8, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}

/* ---------- Navegacao lateral ---------- */
.docs-nav { display: flex; flex-direction: column; gap: 22px; }
.docs-nav-group { display: flex; flex-direction: column; gap: 2px; }
.docs-nav-title {
  margin: 0 0 6px;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-nav-link {
  position: relative;
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--dim);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.docs-nav-link:hover { color: var(--text); background: var(--panel); }
/* A barra lateral esquerda e um pseudo-elemento (e nao `border-left`) para o
   item ativo nao "pular" 3px em relacao aos inativos. */
.docs-nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .15s var(--ease);
}
.docs-nav-link.active {
  color: var(--accent);
  font-weight: 500;
  background: var(--accent-soft);
}
.docs-nav-link.active::before { background: var(--accent); }

/* ---------- Busca ---------- */
.docs-search { position: relative; margin-bottom: 22px; }
.docs-search-input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 9px 12px 9px 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-solid);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.docs-search-input::placeholder { color: var(--muted); }
.docs-search-input:hover { border-color: var(--line-strong); }
.docs-search-input:focus {
  outline: none;
  border-color: rgba(0, 229, 160, 0.5);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Teclado tambem precisa do anel padrao da pagina; o box-shadow acima sozinho
   nao passa em modo de alto contraste. */
.docs-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Lupa desenhada em CSS para nao depender de asset externo. */
.docs-search::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
}
.docs-search::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 50%;
  width: 5px;
  height: 1.5px;
  margin-top: 4px;
  background: var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}
.docs-search-empty {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px dashed var(--line);
}

/* ---------- Coluna de conteudo ---------- */
.docs-main {
  min-width: 0;
  max-width: var(--content-max);
  padding: clamp(24px, 4vw, 44px) 0 96px;
}

.docs-section { margin-bottom: 56px; }
.docs-section:last-child { margin-bottom: 0; }

/*
 * O recuo de ancora vive SO no `scroll-padding-top` do <html> (topo deste
 * arquivo). Declarar `scroll-margin-top` aqui tambem somaria com aquele valor
 * e empurraria o titulo 85px a mais para baixo — bug ja medido nesta pagina.
 */

.docs-h1 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.docs-lead {
  margin: 0 0 32px;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--dim);
  font-weight: 300;
}
.docs-h2 {
  position: relative;
  margin: 48px 0 14px;
  padding-bottom: 10px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--line);
}
.docs-h3 {
  position: relative;
  margin: 32px 0 10px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.docs-h1:first-child, .docs-h2:first-child, .docs-h3:first-child { margin-top: 0; }

.docs-p {
  margin: 0 0 16px;
  max-width: 68ch;
  color: var(--dim);
}
.docs-p strong { color: var(--text); font-weight: 600; }
.docs-p code, .docs-li code, .params-table code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid rgba(0, 229, 160, 0.16);
  white-space: nowrap;
}
/* Link solto dentro do texto corrido — sublinhado discreto que firma no hover. */
.docs-p a, .docs-li a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 229, 160, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease);
}
.docs-p a:hover, .docs-li a:hover { text-decoration-color: var(--accent); }

.docs-ul, .docs-ol { margin: 0 0 18px; padding-left: 22px; max-width: 68ch; color: var(--dim); }
.docs-ul { list-style: none; padding-left: 4px; }
.docs-ol { list-style: decimal; }
.docs-li { margin-bottom: 8px; }
.docs-li::marker { color: var(--muted); font-family: var(--mono); font-size: 0.85em; }
/* Marcador proprio so na lista nao-ordenada (a ordenada mantem o numero). */
.docs-ul > .docs-li { position: relative; padding-left: 18px; }
.docs-ul > .docs-li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
}

.docs-hr {
  height: 1px;
  margin: 44px 0;
  border: 0;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* Ancora "#" ao lado do titulo: invisivel ate o hover, mas SEMPRE visivel no
   foco de teclado — senao vira um link inalcancavel sem mouse. */
.docs-anchor {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 0.75em;
  font-weight: 400;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease);
}
.docs-h1:hover .docs-anchor,
.docs-h2:hover .docs-anchor,
.docs-h3:hover .docs-anchor,
.docs-anchor:focus-visible { opacity: 1; }
.docs-anchor:hover { color: var(--accent); }

/* ---------- "Nesta pagina" (TOC) ---------- */
.docs-toc {
  position: sticky;
  top: calc(var(--topbar-h) + 28px);
  max-height: calc(100vh - var(--topbar-h) - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 24px 18px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
}
.docs-toc > strong,
.docs-toc .docs-toc-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.docs-toc a,
.docs-toc-link {
  display: block;
  padding: 5px 0 5px 10px;
  color: var(--muted);
  border-left: 2px solid var(--line);
  line-height: 1.45;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.docs-toc a:hover,
.docs-toc-link:hover { color: var(--text); border-left-color: var(--line-strong); }
.docs-toc a.active,
.docs-toc-link.active { color: var(--accent); border-left-color: var(--accent); }
/* Sub-item (h3) recuado dentro do indice. */
.docs-toc a.sub, .docs-toc-link.sub, .docs-toc li li a { padding-left: 22px; font-size: 12px; }

/* ---------- Blocos de codigo ---------- */
.code-block {
  margin: 0 0 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--code-bg);
  /* `overflow: hidden` mantem os cantos arredondados sobre o `<pre>` rolavel. */
  overflow: hidden;
  box-shadow: 0 20px 50px -34px rgba(0, 0, 0, 0.95);
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--line);
}
.code-lang {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.code-copy {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dim);
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.code-copy:hover { color: var(--accent); background: var(--accent-soft); border-color: rgba(0, 229, 160, 0.32); }
.code-copy:active { transform: translateY(1px); }
/* Estado pos-copia (o JS marca o botao); confirma sem trocar o layout. */
.code-copy.copied { color: var(--accent); border-color: rgba(0, 229, 160, 0.45); background: var(--accent-soft); }

.code-body {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.7;
  color: #d7deea;
  tab-size: 2;
  /* `white-space: pre` (e nao pre-wrap): quebrar linha de cURL no meio do
     comando faz o dev copiar um comando invalido. Rola na horizontal. */
  white-space: pre;
}
.code-body code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  border: 0;
}

.code-tabs {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.code-tabs::-webkit-scrollbar { display: none; }
.code-tab {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 9px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.code-tab:hover { color: var(--text); }
.code-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.code-tab:focus-visible { outline-offset: -2px; }

/* Realce de sintaxe */
.tok-key { color: var(--tok-key); font-weight: 500; }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-fn { color: var(--tok-fn); }
.tok-punc { color: var(--tok-punc); }

/* ---------- Callouts ---------- */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--line-strong);
  background: var(--panel);
  color: var(--dim);
  font-size: 14px;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout p, .callout .docs-p { margin: 0 0 6px; max-width: none; }
.callout p:last-child, .callout .docs-p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); font-weight: 600; }

/* Icone via pseudo-elemento para o HTML nao precisar carregar SVG por variante. */
.callout::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--bg);
  background: var(--dim);
}
/* Se o HTML trouxer o proprio icone, o pseudo sai de cena para nao duplicar. */
.callout:has(> svg)::before,
.callout:has(> img)::before,
.callout:has(> .callout-icon)::before { content: none; }
.callout > svg, .callout > img, .callout > .callout-icon {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: 0 0 auto;
}

.callout.info {
  border-left-color: var(--blue);
  background: rgba(76, 141, 255, 0.08);
}
.callout.info::before { content: 'i'; background: var(--blue); }
.callout.info > svg, .callout.info > .callout-icon { color: var(--blue); }

.callout.warn {
  border-left-color: var(--warning);
  background: rgba(251, 191, 36, 0.08);
}
.callout.warn::before { content: '!'; background: var(--warning); }
.callout.warn > svg, .callout.warn > .callout-icon { color: var(--warning); }

.callout.danger {
  border-left-color: var(--danger);
  background: rgba(248, 113, 113, 0.08);
}
.callout.danger::before { content: '\00d7'; background: var(--danger); font-size: 14px; }
.callout.danger > svg, .callout.danger > .callout-icon { color: var(--danger); }

.callout.success {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.callout.success::before { content: '\2713'; background: var(--accent); font-size: 11px; }
.callout.success > svg, .callout.success > .callout-icon { color: var(--accent); }

/* ---------- Endpoint ---------- */
.endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
  transition: border-color .18s var(--ease);
}
.endpoint:hover { border-color: rgba(255, 255, 255, 0.2); }

.method {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  /* Largura minima igual para todos: os paths de endpoints empilhados ficam
     alinhados na vertical mesmo com GET/POST/DELETE de tamanhos diferentes. */
  min-width: 62px;
  text-align: center;
}
.method.get { color: var(--blue); background: rgba(76, 141, 255, 0.12); border-color: rgba(76, 141, 255, 0.3); }
.method.post { color: var(--accent); background: var(--accent-soft); border-color: rgba(0, 229, 160, 0.32); }
.method.delete { color: var(--danger); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); }
/* Bonus harmonico: metodos que a doc pode ganhar depois sem novo CSS. */
.method.put { color: var(--warning); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); }
.method.patch { color: var(--tok-key); background: rgba(201, 162, 255, 0.12); border-color: rgba(201, 162, 255, 0.3); }

.endpoint-path {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  min-width: 0;
}
/* Segmento variavel do path ({id}) em accent, se o HTML marcar com <span>. */
.endpoint-path span { color: var(--accent); }

/* ---------- Tabela de parametros ---------- */
.params-table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.params-table thead th {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.params-table tbody td {
  padding: 12px;
  vertical-align: top;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.params-table tbody tr:last-child td { border-bottom: 0; }
.params-table tbody tr { transition: background .15s var(--ease); }
.params-table tbody tr:hover { background: rgba(255, 255, 255, 0.018); }
/* 1a coluna = nome do parametro; 2a = tipo. Ambas em mono, o tipo em --muted. */
.params-table tbody td:first-child {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}
.params-table tbody td:nth-child(2) {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.param-req, .param-opt {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  vertical-align: middle;
}
.param-req { color: var(--danger); background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.28); }
.param-opt { color: var(--muted); background: var(--panel); border: 1px solid var(--line); }

/* ---------- Lista de status ---------- */
.status-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.status-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font-size: 13.5px;
  transition: border-color .15s var(--ease);
}
.status-item:hover { border-color: var(--line-strong); }
.status-code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 6px;
  min-width: 52px;
  text-align: center;
  color: var(--dim);
  background: var(--panel-solid);
  border: 1px solid var(--line);
}
/*
 * A cor do status vem da FAIXA do codigo (2xx/4xx/5xx). Como nao da para
 * derivar isso do texto em CSS puro, aceito tres formas de marcacao — assim o
 * HTML pode usar `class="status-code s2xx"`, `class="status-code success"` ou
 * so `data-code="200"` sem que a cor se perca.
 */
.status-code.s2xx, .status-code.success, .status-code.ok,
.status-code[data-code^="2"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(0, 229, 160, 0.32);
}
.status-code.s4xx, .status-code.warn, .status-code.warning,
.status-code[data-code^="4"] {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}
.status-code.s5xx, .status-code.danger, .status-code.error,
.status-code[data-code^="5"] {
  color: var(--danger);
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
}
.status-code.s3xx, .status-code.info, .status-code[data-code^="3"] {
  color: var(--blue);
  background: rgba(76, 141, 255, 0.12);
  border-color: rgba(76, 141, 255, 0.3);
}

/* ---------- Grade de cartoes ---------- */
.card-grid {
  display: grid;
  /* `auto-fit` + `minmax` resolve 1/2/3 colunas sem media query dedicada. */
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.doc-card {
  display: block;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), var(--panel-solid);
  color: var(--dim);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.doc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 160, 0.34);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.95);
}
.doc-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.doc-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.doc-card:hover strong { color: var(--accent); }

/* ---------- Pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}
.pill.accent { color: var(--accent); background: var(--accent-soft); border-color: rgba(0, 229, 160, 0.28); }

/* ---------- Toast de copia ---------- */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  padding: 9px 18px;
  border-radius: 99px;
  border: 1px solid rgba(0, 229, 160, 0.32);
  background: rgba(9, 22, 18, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  /* Escondido por transform/opacity (e nao `display`) para o fade funcionar;
     `pointer-events: none` impede que ele roube clique da pagina. */
  transform: translate(-50%, 14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}
.copy-toast.show, .copy-toast.visible, .copy-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* =========================================================================
   ACESSO RAPIDO, LINKS DA TOPBAR, TABELA ROLAVEL, FAQ E RODAPE
   ========================================================================= */

/*
 * Conteudo so para leitor de tela.
 *
 * O `<label>` do campo de busca existe para o leitor de tela anunciar "Buscar
 * na documentacao", mas visualmente o placeholder ja cumpre o papel e um label
 * solto quebraria o desenho da sidebar. O padrao `clip-path` + 1px e usado em
 * vez de `display:none` de proposito: `display:none` REMOVE o elemento da
 * arvore de acessibilidade, ou seja, o leitor de tela tambem deixaria de ver —
 * exatamente o oposto do que queremos aqui.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/*
 * "Pular para o conteudo": fica fora da tela ate receber foco pelo teclado.
 *
 * Sem isso, quem navega por Tab teria que percorrer os ~20 links da sidebar
 * antes de chegar ao texto — em toda visita, em toda secao. Ele nao usa
 * `.sr-only` porque precisa ficar VISIVEL ao focar.
 */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--panel-solid);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  /* Fora da tela sem sair da arvore de foco. */
  transform: translateY(-200%);
  transition: transform .18s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Links de acao da topbar ----------
   O HTML usa <a>, nao <button>: sao navegacoes reais (o usuario espera abrir
   em nova aba com Ctrl+clique). O visual repete o das regras de `button` logo
   acima para as duas formas ficarem indistinguiveis na tela. */
.auth-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.auth-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}
.auth-link.primary {
  color: #04120c;
  background: var(--accent);
  border-color: transparent;
  font-weight: 600;
}
.auth-link.primary:hover { background: #4bf0c1; color: #04120c; border-color: transparent; }

/* ---------- Tabela de parametros com rolagem propria ----------
   O wrapper e quem rola, nao a `<table>`. Trocar o `display` da tabela por
   `block` (como a media query mobile faz) quebra o alinhamento de colunas
   entre thead e tbody; isolando o scroll no container a tabela continua sendo
   tabela e o `overflow` para de vazar para o layout inteiro. */
.table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.table-wrap .params-table { margin-bottom: 0; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ---------- Icone dos cartoes de atalho ---------- */
.doc-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 9px;
  border: 1px solid rgba(0, 229, 160, 0.24);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.doc-card:hover .doc-card-icon {
  background: rgba(0, 229, 160, 0.2);
  border-color: rgba(0, 229, 160, 0.45);
}

/* ---------- FAQ (<details>/<summary>) ----------
   Sem JS de proposito: `<details>` ja abre e fecha sozinho, continua acessivel
   por teclado e — o ponto que importa — o conteudo fechado permanece no DOM,
   entao o Ctrl+F do navegador ainda encontra a resposta. */
.faq-item {
  margin-bottom: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.faq-item:hover { border-color: var(--line-strong); }
.faq-item[open] { background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); }

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  /* Remove o triangulo nativo (inclusive o do WebKit) — o "+" abaixo o
     substitui e acompanha a paleta da marca. */
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.faq-item > summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  transition: transform .18s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.faq-item[open] > summary::after {
  content: '\2212';
  transform: rotate(180deg);
  color: var(--accent);
  border-color: rgba(0, 229, 160, 0.4);
}

.faq-item > .docs-p,
.faq-item > p {
  margin: 0;
  padding: 0 18px 16px;
  max-width: none;
  font-size: 14px;
}
.faq-item > .docs-ul, .faq-item > .docs-ol { padding-left: 36px; padding-bottom: 16px; margin-bottom: 0; }
.faq-item > .code-block, .faq-item > .callout { margin: 0 18px 16px; }

/* ---------- Rodape ---------- */
.docs-footer {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.docs-footer p { margin: 0 0 6px; }
.docs-footer p:last-child { margin-bottom: 0; }
.docs-footer a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.docs-footer a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

/* Tablet (768px–1200px): some o indice lateral, viram 2 colunas.
   O TOC e o primeiro a cair porque duplica informacao ja presente na sidebar. */
@media (max-width: 1200px) {
  .docs-layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .docs-toc { display: none; }
  .docs-main { max-width: none; }
}

@media (max-width: 1000px) {
  :root { --sidebar-w: 224px; }
}

/* Mobile (<768px): coluna unica + sidebar como drawer deslizante. */
@media (max-width: 767px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 16px;
  }

  .docs-menu-toggle { display: grid; }

  .docs-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: min(300px, 86vw);
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding: 20px 16px 40px;
    background: var(--panel-solid);
    border-right: 1px solid var(--line-strong);
    box-shadow: 24px 0 60px -30px rgba(0, 0, 0, 1);
    transform: translateX(-100%);
    /* Fora da tela o drawer nao pode receber Tab: `visibility` tira do foco. */
    visibility: hidden;
    transition: transform .22s var(--ease), visibility .22s var(--ease);
  }
  /* Aceito as tres convencoes de estado comuns no projeto para o JS ficar livre
     para usar classe ou atributo. */
  .docs-sidebar.open,
  .docs-sidebar.is-open,
  .docs-sidebar[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }

  .docs-sidebar-overlay.open,
  .docs-sidebar-overlay.is-open,
  .docs-sidebar-overlay[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .docs-main { padding: 24px 0 72px; }
  .docs-brand small { display: none; }
  .docs-h2 { margin-top: 38px; }
  .docs-section { margin-bottom: 42px; }
  .code-body { font-size: 12px; padding: 14px; }
  .callout { font-size: 13.5px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }

  /* Ancora "#" sem hover no toque: fica sempre visivel, mas discreta. */
  .docs-anchor { opacity: 0.45; }

  /* Tabela larga vira area rolavel horizontal em vez de estourar o layout. */
  .params-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .params-table tbody td { white-space: nowrap; }
}

/* 360px e afins: aperta paddings sem quebrar a leitura. */
@media (max-width: 430px) {
  .docs-body { font-size: 14.5px; }
  .docs-layout { padding: 0 12px; }
  .docs-topbar { padding: 0 12px; gap: 10px; }
  .docs-topbar-right a, .docs-topbar-right button { padding: 7px 11px; font-size: 12.5px; }

  /*
   * REGRESSAO medida em 360-390px: o nome da marca e os DOIS links do topo
   * nao cabem juntos. Como `.docs-brand strong/small` usam `white-space:
   * nowrap`, o texto nao encolhe — ele passa por baixo de "Consultar
   * consumo" e os dois ficam ilegiveis, sobrepostos.
   *
   * "Consultar consumo" some porque e o unico item redundante aqui: o mesmo
   * destino ja aparece no rodape e em varios links dentro do texto. "Entrar"
   * fica, por ser a unica porta de acesso ao portal a partir desta pagina.
   */
  .docs-topbar-right .auth-link:not(.primary) { display: none; }

  /* O nome ainda precisa poder truncar se a fonte do sistema for maior que a
   * esperada — reticencias sao melhores do que texto invadindo o botao. */
  .docs-brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .docs-h1 { font-size: 1.55rem; }
  .docs-lead { font-size: 0.98rem; }
  .endpoint { padding: 10px 12px; gap: 8px; }
  .status-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .status-code { justify-self: start; }
  .copy-toast { bottom: 18px; font-size: 11.5px; }
}

/* Telas muito largas (>=1600px): centraliza o conteudo em vez de esticar a
   coluna de texto — linha longa demais derruba a legibilidade. */
@media (min-width: 1600px) {
  :root { --sidebar-w: 280px; --toc-w: 240px; }
}

/* =========================================================================
   FIGURAS DO PASSO A PASSO
   ========================================================================= */

/*
 * As capturas de tela dos programas (Cline, Cursor) sao SVG servidos de
 * /img/. Nao ha imagem remota nesta pagina de proposito: a CSP do servidor
 * declara `img-src 'self' data:`, entao qualquer <img> apontando para outro
 * dominio seria bloqueado pelo navegador e o leitor veria um retangulo
 * quebrado no meio do tutorial — pior do que nao ter imagem alguma.
 */
.docs-figure {
  margin: 0 0 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}
.docs-figure img {
  display: block;
  /* O SVG tem viewBox e nenhuma largura fixa: sem `width:100%` ele assumiria
   * a largura intrinseca e estouraria a coluna no celular. */
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.docs-figure figcaption {
  margin: 0;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.docs-figure figcaption strong { color: var(--dim); font-weight: 600; }

/* =========================================================================
   CARTAO DE DOWNLOAD (Codex Desktop)
   ========================================================================= */

/*
 * O cartao aparece SEMPRE, mesmo antes de a resposta da API chegar: o texto
 * inicial ja avisa "Verificando disponibilidade...". Renderizar o cartao so
 * depois do fetch faria o conteudo pular na tela (layout shift) justamente
 * no passo 1 da secao — e, se a API falhasse, o leitor nao veria nada e
 * concluiria que a pagina esta quebrada.
 */
.download-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  transition: border-color .15s var(--ease);
}
.download-card:hover { border-color: var(--line-strong); }

/* minmax(0, 1fr) via flex: sem `min-width: 0` um nome de arquivo longo
 * empurraria o botao para fora do cartao em vez de quebrar a linha. */
.download-info { flex: 1 1 220px; min-width: 0; }
.download-info strong {
  display: block;
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 600;
  /* O nome vem do painel de admin e pode ser enorme; quebrar por caractere
   * evita a barra de rolagem horizontal na pagina inteira. */
  overflow-wrap: anywhere;
}
.download-info small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.download-button {
  flex: 0 0 auto;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.download-button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-soft); }
.download-button:active { transform: translateY(0); }

.download-empty {
  flex: 1 1 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================================
   ACESSIBILIDADE E IMPRESSAO
   ========================================================================= */

/*
 * Movimento reduzido. O home.css usa `!important` no seletor universal, mas
 * aqui o escopo proibe `!important` fora do `[hidden]`. A solucao e listar os
 * seletores animados com a MESMA especificidade das regras originais: como
 * este bloco vem por ultimo no arquivo, ele vence pelo criterio de ordem.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .docs-topbar,
  .docs-topbar-right a,
  .docs-topbar-right button,
  .docs-menu-toggle,
  .docs-sidebar,
  .docs-sidebar-overlay,
  .docs-nav-link,
  .docs-nav-link::before,
  .docs-search-input,
  .docs-anchor,
  .docs-toc a,
  .docs-toc-link,
  .code-copy,
  .code-tab,
  .endpoint,
  .params-table tbody tr,
  .status-item,
  .doc-card,
  .copy-toast,
  .copy-toast.show,
  .copy-toast.visible,
  .copy-toast.is-visible {
    transition: none;
    animation: none;
  }

  /* O card nao deve "pular" quando o usuario pediu menos movimento. */
  .doc-card:hover { transform: none; }
  .code-copy:active { transform: none; }
}

/* Modo de alto contraste do Windows: reforca as bordas que dependem de alpha. */
@media (forced-colors: active) {
  .docs-nav-link.active,
  .code-tab.active,
  .docs-toc a.active { forced-color-adjust: none; }
  .code-block, .endpoint, .doc-card, .callout, .status-item { border-color: CanvasText; }
}

/*
 * Impressao: a doc de API costuma virar PDF de onboarding. Tira a navegacao
 * (inutil no papel), inverte para fundo branco e garante que os blocos de
 * codigo nao sejam cortados no meio entre paginas.
 */
@media print {
  .docs-topbar,
  .docs-sidebar,
  .docs-sidebar-overlay,
  .docs-toc,
  .docs-menu-toggle,
  .docs-search,
  .code-copy,
  .copy-toast,
  .docs-anchor { display: none; }

  .docs-body {
    background: #fff;
    color: #111;
    font-size: 11.5pt;
    overflow: visible;
  }
  .docs-layout { display: block; width: auto; padding: 0; }
  .docs-main { max-width: none; padding: 0; }

  .docs-h1, .docs-h2, .docs-h3, .doc-card strong, .endpoint-path { color: #000; }
  .docs-p, .docs-lead, .docs-li, .docs-ul, .docs-ol,
  .callout, .status-item, .params-table tbody td { color: #222; }
  .docs-h2 { border-bottom-color: #bbb; }
  .docs-hr { background: #bbb; }

  .code-block, .code-body, .code-head, .endpoint, .doc-card, .callout, .status-item {
    background: #f6f7f9;
    color: #111;
    border-color: #ccc;
    box-shadow: none;
  }
  .code-body { white-space: pre-wrap; word-break: break-word; }
  .tok-key, .tok-str, .tok-num, .tok-fn, .tok-punc { color: #111; }
  .tok-com { color: #666; }

  .params-table thead th { color: #333; border-bottom-color: #999; }
  .params-table tbody td { border-bottom-color: #ddd; }
  .method, .status-code, .pill, .param-req, .param-opt {
    color: #111;
    background: #eceff3;
    border-color: #bbb;
  }

  /* Evita quebra feia no meio de exemplos e avisos. */
  .code-block, .callout, .endpoint, .status-item, .doc-card { break-inside: avoid; }
  .docs-h1, .docs-h2, .docs-h3 { break-after: avoid; }
  .docs-section { break-inside: auto; }

  /* URL explicita no papel: link sem destino impresso e link perdido. */
  .docs-p a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}