/* ==========================================================================
   Documentação da API (/ajuda/api). Carrega depois do blog.css e do ajuda.css
   e usa os mesmos tokens (--accent, --ink, --line…).
   Desktop: índice fixo à esquerda + texto. Celular: uma coluna, índice
   recolhível no topo; tabela e código rolam DENTRO da caixa, nunca a página.
   ========================================================================== */

.ad-pagina .aj-topo .aj-kicker{margin-bottom:10px;}
.ad-pagina .aj-caminho code,
.ad-doc code{
  font:500 .88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--accent-soft);color:var(--accent-hi);
  padding:1px 6px;border-radius:6px;word-break:break-word;
}

.ad-grade{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;
  padding-top:28px;padding-bottom:72px;align-items:start;
}

/* ---------- índice ---------- */
.ad-indice{position:sticky;top:calc(var(--nav-h) + 18px);font-size:.9rem;}
.ad-indice summary{
  list-style:none;cursor:default;
  font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;
}
.ad-indice summary::-webkit-details-marker{display:none;}
.ad-indice ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-soft);}
.ad-indice a{
  display:block;padding:6px 0 6px 14px;margin-left:-2px;
  color:var(--body);text-decoration:none;border-left:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.ad-indice a:hover{color:var(--accent);}
.ad-indice a[aria-current="true"]{color:var(--accent);border-left-color:var(--accent);font-weight:700;}

/* ---------- texto ---------- */
.ad-doc{min-width:0;color:var(--body);font-size:1rem;line-height:1.65;}
.ad-sec{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line-soft);scroll-margin-top:calc(var(--nav-h) + 20px);}
.ad-sec:last-of-type{border-bottom:0;}
.ad-sec h2{font-size:1.5rem;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px;}
.ad-sec h3{font-size:1.08rem;color:var(--ink);margin:24px 0 8px;}
.ad-sec p{margin:0 0 12px;}
.ad-sec ul,.ad-passos{margin:0 0 14px;padding-left:22px;}
.ad-sec li{margin-bottom:7px;}
.ad-sec li::marker{color:var(--accent);}
.ad-passos li{margin-bottom:10px;}
.ad-sec a{color:var(--accent);}

/* rota: método + endereço */
.ad-rota{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:4px 0 14px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.ad-rota code{background:none;padding:0;color:var(--ink);word-break:break-all;}
.ad-met{
  flex:none;font:800 .72rem var(--sans);letter-spacing:.05em;
  padding:4px 8px;border-radius:6px;color:#fff;
}
.ad-met-post{background:var(--accent);}
.ad-met-get{background:var(--teal);}

/* código */
.ad-code{
  position:relative;margin:8px 0 16px;
  background:var(--ink-deep);border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.06);
}
.ad-code-rot{
  position:absolute;left:14px;top:9px;
  font:700 .68rem var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#8B97B0;
}
.ad-code pre{
  margin:0;padding:34px 16px 16px;overflow-x:auto;
  font:500 .85rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#E2E8F5;
  white-space:pre;tab-size:2;
}
.ad-code pre code{background:none;color:inherit;padding:0;font:inherit;word-break:normal;}
.ad-copiar{
  position:absolute;right:8px;top:6px;
  display:inline-flex;align-items:center;gap:6px;
  font:600 .75rem var(--sans);color:#C7D0E2;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:7px;
  padding:4px 9px;cursor:pointer;transition:background .15s,color .15s;
}
.ad-copiar:hover{background:rgba(255,255,255,.14);color:#fff;}
.ad-copiar.ok{color:#7EE2B8;border-color:rgba(126,226,184,.4);}

/* tabelas */
.ad-tab-wrap{overflow-x:auto;margin:6px 0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.ad-tab{width:100%;border-collapse:collapse;font-size:.92rem;}
.ad-tab th{
  text-align:left;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.ad-tab td{padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.ad-tab tr:last-child td{border-bottom:0;}
.ad-tab td:first-child{white-space:nowrap;}
.ad-tipo{color:var(--muted);white-space:nowrap;font-size:.86rem;}
.ad-obr{
  display:inline-block;margin-left:4px;
  font:700 .66rem var(--sans);letter-spacing:.04em;text-transform:uppercase;
  color:#B42318;background:#FEF3F2;padding:2px 6px;border-radius:5px;
}

/* aviso */
.ad-aviso{
  display:flex;gap:12px;align-items:flex-start;
  margin:14px 0;padding:14px 16px;
  background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:var(--r-sm);
  color:var(--ink-2,var(--ink));font-size:.95rem;
}
.ad-aviso > i{color:var(--accent);margin-top:4px;}

/* abas de linguagem */
.ad-abas-bt{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:-4px;}
.ad-abas-bt button{
  font:600 .85rem var(--sans);color:var(--body);
  background:transparent;border:1px solid transparent;border-radius:8px 8px 0 0;
  padding:7px 13px;cursor:pointer;
}
.ad-abas-bt button[aria-selected="true"]{color:#fff;background:var(--ink-deep);}
.ad-abas .ad-code{margin-top:0;border-top-left-radius:0;}

.ad-pagina .aj-faq{margin-top:0;}
.ad-pagina .aj-acoes{margin-top:8px;}

@media (min-width: 901px){ .ad-indice summary{pointer-events:none;} }

/* ---------- celular ---------- */
@media (max-width: 900px){
  .ad-grade{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:18px;}
  .ad-indice{position:static;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;}
  .ad-indice summary{cursor:pointer;margin:0;display:flex;justify-content:space-between;align-items:center;}
  .ad-indice summary::after{content:"\f078";font:900 .7rem "Font Awesome 6 Free";color:var(--muted);transition:transform .2s;}
  .ad-indice details[open] summary::after{transform:rotate(180deg);}
  .ad-indice details[open] summary{margin-bottom:8px;}
  .ad-indice ol{columns:2;column-gap:12px;border-left:0;}
  .ad-indice a{padding:5px 0;border-left:0;margin:0;}
  .ad-sec h2{font-size:1.3rem;}
  .ad-tab td:first-child{white-space:normal;}
}
@media (max-width: 480px){
  .ad-indice ol{columns:1;}
  .ad-code pre{font-size:.8rem;}
}