/* ============================================================ AceleraAPI — documentação (/docs). Todas as regras são escopadas em `.docs-area` porque a documentação usa o MESMO cabeçalho e o MESMO rodapé do resto do site. Antes ela era uma página autônoma, com `body{}`, `a{}`, `code{}` e `footer{}` globais — regras que, carregadas depois de style.css, repintariam a navbar e o rodapé (link roxo e sublinhado, fonte trocada). O escopo é o que permite as duas folhas conviverem. Exceção: os seletores de exemplo continuam presos à classe do (`body.lang-php .docs-area .sample.php`), porque é lá que o script põe a classe — e mudar isso significaria reescrever o seletor em 24 seções. ============================================================ */ :root{ --bg:#ffffff; --sidebar:#fbfbfe; --tinta:#1a1c2b; --suave:#6b7080; --linha:#eceef4; --acc:#5b3df5; --acc2:#8b5cf6; --ok:#0ea86b; --warn:#c2410c; --amber:#b45309; --code:#12142a; --codeln:#2a2d52; --pill:#f0eefe; --nav-w:270px; --code-w:410px; /* navbar do site + barra da documentação, ambas sticky */ --topo-navbar:72px; --topo-barra:51px; --topo-fixo:123px; } *{box-sizing:border-box} html{scroll-behavior:smooth} .docs-area{margin:0;background:var(--bg);color:var(--tinta);line-height:1.6; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased} .docs-area a{color:var(--acc);text-decoration:none} .docs-area a:hover{text-decoration:underline} .docs-area code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em; background:var(--pill);color:#4b30d4;padding:1px 6px;border-radius:6px} /* Barra da documentação: seletor de linguagem + botão do índice no celular. Assumiu o papel da topbar antiga, agora que o topo da página é a navbar do site. Sticky logo abaixo dela, para o seletor continuar alcançável durante a leitura de uma seção longa. */ .docs-area .docs-barra{position:sticky;top:var(--topo-navbar);z-index:30;display:flex;align-items:center; gap:12px;padding:10px 40px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--linha)} .docs-area .docs-barra .spacer{flex:1} .docs-area .docs-barra .lnk{font-size:13px;font-weight:600} .docs-area .docs-barra .rotulo{font-size:11.5px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:#9aa0b0} .docs-area .langsel{display:inline-flex;background:#f1f2f7;border:1px solid var(--linha);border-radius:9px;padding:3px} .docs-area .langsel button{border:0;background:transparent;color:var(--suave);font-weight:700;font-size:12.5px; padding:5px 11px;border-radius:7px;cursor:pointer} .docs-area .langsel button.on{background:#fff;color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.08)} .docs-area .burger{display:none;align-items:center;gap:7px;border:1px solid var(--linha);background:#fff; cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--tinta);border-radius:9px;padding:6px 12px} .docs-area .layout{display:flex;max-width:1440px;margin:0 auto} .docs-area .sidebar{width:var(--nav-w);flex:0 0 var(--nav-w);border-right:1px solid var(--linha);background:var(--sidebar); position:sticky;top:var(--topo-fixo);height:calc(100vh - var(--topo-fixo));overflow-y:auto;padding:10px 10px 24px; /* A barra de rolagem nativa do Windows é grossa e fica sempre visível, cortando o menu com uma faixa cinza que compete com o conteúdo. Fica fina e translúcida, ganhando contraste só quando o ponteiro está no menu — continua rolável e visível ao usar, sem poluir a leitura. */ scrollbar-width:thin;scrollbar-color:transparent transparent} .docs-area .sidebar:hover{scrollbar-color:#cfd3e0 transparent} .docs-area .sidebar::-webkit-scrollbar{width:8px} .docs-area .sidebar::-webkit-scrollbar-track{background:transparent} .docs-area .sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:8px; border:2px solid transparent;background-clip:content-box} .docs-area .sidebar:hover::-webkit-scrollbar-thumb{background:#cfd3e0;background-clip:content-box} .docs-area .sidebar::-webkit-scrollbar-thumb:hover{background:#aeb4c7;background-clip:content-box} .docs-area .sidebar .grp{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9aa0b0;padding:12px 12px 4px} .docs-area .sidebar a{display:block;color:#3a3d4d;font-size:13.5px;padding:5px 12px;border-radius:8px;font-weight:500} .docs-area .sidebar a:hover{background:#f0eefe;text-decoration:none} .docs-area .sidebar a.on{background:#ece8fe;color:#4b30d4;font-weight:700} .docs-area .sidebar a .m{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:800;border-radius:4px; padding:1px 5px;margin-right:7px;color:#fff;vertical-align:1px} .docs-area .m.get{background:#0ea86b}.docs-area .m.post{background:#5b3df5}.docs-area .m.put{background:#b45309}.docs-area .m.del{background:#c2410c} .docs-area .content{flex:1;min-width:0;padding:8px 0 80px} .docs-area section.blk{padding:30px 40px;border-bottom:1px solid var(--linha); scroll-margin-top:calc(var(--topo-fixo) + 12px)} .docs-area [id]{scroll-margin-top:calc(var(--topo-fixo) + 12px)} .docs-area .cols{display:grid;grid-template-columns:1fr var(--code-w);gap:34px;align-items:start} .docs-area .doc h1{font-size:27px;margin:0 0 4px} .docs-area .doc h2{font-size:21px;margin:0 0 4px} .docs-area .doc h3{font-size:14px;margin:20px 0 6px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);font-weight:800} .docs-area .doc p{margin:8px 0} .docs-area .lead{color:var(--suave);font-size:15px} .docs-area .ep{display:inline-flex;align-items:center;gap:9px;margin:10px 8px 10px 0;padding:7px 12px;border:1px solid var(--linha); border-radius:10px;background:#fbfbfe;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;flex-wrap:wrap} .docs-area .ep b{font-family:ui-monospace,Menlo,Consolas,monospace;color:#2a2d52} .docs-area .verb{font-size:11px;font-weight:800;color:#fff;border-radius:5px;padding:2px 7px} .docs-area .verb.get{background:#0ea86b}.docs-area .verb.post{background:#5b3df5}.docs-area .verb.put{background:#b45309}.docs-area .verb.del{background:#c2410c} .docs-area table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px} .docs-area th, .docs-area td{border-bottom:1px solid var(--linha);text-align:left;padding:8px 10px;vertical-align:top} .docs-area th{color:var(--suave);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em} .docs-area td code{white-space:nowrap} .docs-area .req{color:var(--warn);font-weight:700;font-size:11px} .docs-area .opt{color:#9aa0b0;font-size:11px} .docs-area .callout{border:1px solid #e6e2fb;background:#f7f5ff;border-left:3px solid var(--acc);border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13.5px} .docs-area .callout.warn{border-color:#f5ddc4;background:#fff8f0;border-left-color:var(--amber)} .docs-area .callout b{color:#3a2ea8}.docs-area .callout.warn b{color:var(--amber)} .docs-area ul.clean{margin:8px 0;padding-left:18px} .docs-area ul.clean li{margin:4px 0;font-size:14px} .docs-area .badge{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;vertical-align:middle} .docs-area .badge.dev{background:#fef3c7;color:#92400e}.docs-area .badge.emp{background:#dcfce7;color:#166534} .docs-area .btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff; border:0;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13.5px;cursor:pointer} .docs-area .btn:hover{text-decoration:none;filter:brightness(1.05)} .docs-area .btn.sec{background:#eef0f8;color:var(--tinta)} .docs-area .acoes{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0} .docs-area .code{position:sticky;top:calc(var(--topo-fixo) + 14px)} .docs-area .codebox{background:var(--code);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(16,18,40,.14);margin-bottom:12px} .docs-area .codebox .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--codeln)} .docs-area .codebox .bar .t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8b90c9} .docs-area .codebox .bar .lbl{margin-left:auto;font-size:11px;color:#6b70a8;font-family:ui-monospace,monospace} .docs-area .codebox.resp .bar .t{color:#6ee7b7} .docs-area pre{margin:0;padding:14px 15px;overflow:auto;color:#e7e9ff;font-size:12.3px;line-height:1.62; font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .docs-area pre .c{color:#7f86c9}.docs-area pre .k{color:#c4b5fd}.docs-area pre .s{color:#86efac}.docs-area pre .n{color:#fca5a5} .docs-area .sample{display:none} body.lang-curl .docs-area .sample.curl, body.lang-php .docs-area .sample.php, body.lang-delphi .docs-area .sample.delphi{display:block} /* O rodapé da doc agora é o do site (includes/footer.php). Este é só o bloco de links de continuação no fim do conteúdo. */ .docs-area .docs-fim{padding:26px 40px;color:var(--suave);font-size:13px;border-top:1px solid var(--linha)} /* Modal de lead (download do SDK) */ .docs-area .modal-bg{position:fixed;inset:0;background:rgba(15,17,32,.55);backdrop-filter:blur(3px);z-index:60; display:none;align-items:center;justify-content:center;padding:18px} .docs-area .modal-bg.on{display:flex} .docs-area .modal{background:#fff;border-radius:16px;max-width:430px;width:100%;padding:24px;box-shadow:0 30px 70px rgba(16,18,40,.35)} .docs-area .modal h3{margin:0 0 4px;font-size:19px} .docs-area .modal p.sub{margin:0 0 14px;color:var(--suave);font-size:14px} .docs-area .modal label{display:block;font-size:12.5px;font-weight:700;color:#41455a;margin:10px 0 0} .docs-area .modal input{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;font-size:14px;font-family:inherit} .docs-area .modal input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px #ece8fe} .docs-area .modal .macoes{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .docs-area .modal .macoes button{border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer} .docs-area .modal .b-prim{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff} .docs-area .modal .b-canc{background:#f1f2f7;color:#41455a} .docs-area .modal .priv{font-size:11.5px;color:#9aa0b0;margin:12px 0 0} @media (max-width:1080px){ :root{--code-w:100%} .docs-area .cols{grid-template-columns:1fr} .docs-area .code{position:static;margin-top:16px} } @media (max-width:820px){ .docs-area .sidebar{position:fixed;left:0;top:var(--topo-fixo);z-index:35;transform:translateX(-100%);transition:transform .2s;box-shadow:0 20px 40px rgba(0,0,0,.18)} body.nav-open .docs-area .sidebar{transform:none} .docs-area .burger{display:inline-flex} .docs-area .docs-barra{padding:10px 20px} .docs-area section.blk{padding:24px 20px} } /* ========================================================================== Blocos adicionados quando a documentação saiu de /painel/docs para /docs. Antes era uma página única com âncoras; agora são 15 páginas irmãs, e isso criou três necessidades que não existiam: trilha (quem cai numa página profunda pelo Google precisa saber onde está), índice em cartões no hub (o menu lateral não existe no celular) e o quickstart multi-linguagem. ========================================================================== */ /* Trilha de navegação */ .docs-area .doc-trilha{padding:16px 40px 0;font-size:12.5px;color:var(--suave)} .docs-area .doc-trilha a{color:var(--suave)} .docs-area .doc-trilha a:hover{color:var(--acc)} .docs-area .doc-trilha span{color:var(--tinta);font-weight:600} /* Índice em cartões (hub /docs) */ .docs-area .doc-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-top:16px} .docs-area .doc-cartao{display:block;border:1px solid var(--linha);border-radius:11px;padding:14px 16px; background:#fbfbfe;transition:border-color .16s ease,box-shadow .16s ease} .docs-area .doc-cartao:hover{border-color:#cfc7fb;box-shadow:0 6px 18px rgba(16,18,40,.07);text-decoration:none} .docs-area .doc-cartao b{display:block;font-size:14.5px;color:var(--tinta);margin-bottom:2px} .docs-area .doc-cartao span{font-size:11.5px;color:var(--suave)} /* Quickstart com abas próprias. O seletor global do topo alterna por classe no e vale para as seções de referência; aqui as seis linguagens convivem na mesma página, então a troca é local — daí a classe .on no

 em vez de depender do body. */
  .docs-area .qs{border:1px solid var(--linha);border-radius:12px;overflow:hidden;margin:14px 0;max-width:860px}
  .docs-area .qs-abas{display:flex;flex-wrap:wrap;gap:2px;background:#f6f6fb;padding:6px;border-bottom:1px solid var(--linha)}
  .docs-area .qs-abas button{border:0;background:transparent;color:var(--suave);font-weight:700;font-size:12.5px;
    padding:6px 13px;border-radius:8px;cursor:pointer;font-family:inherit}
  .docs-area .qs-abas button:hover{color:var(--tinta)}
  .docs-area .qs-abas button.on{background:#fff;color:var(--acc);box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .docs-area .qs-code{display:none;background:var(--code)}
  .docs-area .qs-code.on{display:block}

  /* No hub, as seções não usam a grade de duas colunas — o texto pode ocupar a
     largura toda, o que deixa o quickstart legível sem rolagem horizontal. */
  .docs-area #quickstart .lead, .docs-area #referencia .lead{max-width:70ch}