/* ============================================================
   ONYX PAG — Documentação da API (redesign)
   Paleta: preto #0B0B0B · verde #64A300 · cinza. Layout moderno.
   ============================================================ */
:root{
  --ink:#14161a; --ink-soft:#3a4048; --muted:#6b7280;
  --green:#64A300; --green-600:#558C00; --green-700:#456f00; --green-050:#eef6e3;
  --black:#0B0B0B; --panel:#111418; --panel-2:#171b21;
  --bg:#f6f7f9; --surface:#ffffff; --line:#e7e9ee; --line-soft:#eef0f3;
  --code-bg:#0f1216;
  --amber:#b7791f; --amber-bg:#fff7e6; --amber-line:#f3dfae;
  --red:#c23b3b;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Fira Code','SF Mono','Monaco','Consolas',monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); line-height:1.65; color:var(--ink-soft); background:var(--bg); -webkit-font-smoothing:antialiased; }

.container{ display:flex; min-height:100vh; }

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  width:280px; background:linear-gradient(180deg,var(--black) 0%,#14171c 100%);
  color:#fff; position:fixed; height:100vh; overflow-y:auto; z-index:1000;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-header{ padding:1.75rem 1.5rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar-header h2{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.3rem; font-weight:800; letter-spacing:.02em; color:#fff; margin:0;
}
.sidebar-header h2 i{
  color:#0b0b0b; background:var(--green); width:34px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; margin:0;
}
.sidebar-header p{
  display:inline-block; margin-top:.7rem; color:var(--green);
  background:rgba(100,163,0,.14); border:1px solid rgba(100,163,0,.3);
  font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:.15rem .55rem; border-radius:99px;
}

/* busca */
.search-box, .sidebar input[type="text"], .sidebar input[type="search"]{
  width:calc(100% - 3rem); margin:1rem 1.5rem 0; padding:.65rem .85rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  color:#fff; font-family:var(--font); font-size:.85rem; outline:none; transition:border-color .15s, background .15s;
}
.sidebar input::placeholder{ color:#8b909a; }
.sidebar input:focus{ border-color:var(--green); background:rgba(255,255,255,.08); }

.nav-menu{ list-style:none; padding:1rem .75rem 2rem; }
.nav-menu li{ margin-bottom:2px; }
.nav-link{
  display:flex; align-items:center; gap:.1rem; padding:.7rem .85rem; border-radius:10px;
  color:#c1c6cf; text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .15s, color .15s; border-left:3px solid transparent;
}
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background:rgba(100,163,0,.14); color:#a6e05b; font-weight:600; }
.nav-link i{ width:26px; margin-right:.35rem; font-size:.95rem; text-align:center; color:inherit; opacity:.85; }
.nav-link.active i{ color:var(--green); opacity:1; }
/* item "Integre com IA" separado no topo */
.nav-link[href="#integre-ia"]{ border-top:1px solid rgba(255,255,255,.08); margin-top:.6rem; padding-top:.9rem; color:#c1c6cf !important; }
.nav-link[href="#integre-ia"].active{ color:#a6e05b !important; }

/* ---------------- MAIN ---------------- */
.main-content{ margin-left:280px; flex:1; padding:0; max-width:calc(100vw - 280px); }

/* topbar */
.doc-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:60px; padding:0 2rem; background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.doc-topbar-title{ font-size:.95rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.doc-topbar-btn{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  background:var(--green); color:#0b0b0b; font-weight:700; font-size:.85rem;
  padding:.5rem .95rem; border-radius:10px; transition:background .15s, transform .1s;
}
.doc-topbar-btn:hover{ background:var(--green-600); transform:translateY(-1px); }

/* coluna de leitura */
.section{ display:none; animation:fadeIn .25s ease; max-width:920px; margin:0 auto; padding:2.5rem 2rem 4rem; }
.section.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------------- Tipografia ---------------- */
h1{ font-size:2.1rem; font-weight:800; letter-spacing:-.025em; color:var(--ink); margin-bottom:1rem; }
h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin:2.5rem 0 1.2rem; padding-bottom:.55rem; border-bottom:1px solid var(--line); }
h3{ font-size:1.2rem; font-weight:700; color:var(--ink); margin:1.9rem 0 .8rem; }
h4{ font-size:1.02rem; font-weight:600; color:var(--ink-soft); margin-bottom:.5rem; }
p{ margin-bottom:1rem; color:var(--ink-soft); }
.lead{ font-size:1.14rem; line-height:1.7; color:var(--muted); margin-bottom:2rem; }
ul,ol{ margin:0 0 1rem 1.3rem; }
li{ margin-bottom:.4rem; }
a{ color:var(--green-700); }
strong{ color:var(--ink); }

/* ---------------- Cards ---------------- */
.info-card{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:14px; padding:1.4rem 1.5rem; box-shadow:0 1px 2px rgba(11,11,11,.04); margin-bottom:2rem; }
.info-card h3{ margin-top:0; margin-bottom:.9rem; }
.info-card i{ color:var(--green-600); margin-right:.5rem; }
.info-card ul{ margin-bottom:0; }

.warning-card{ background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:12px; padding:1rem 1.15rem; margin:1.5rem 0; color:var(--amber); }
.warning-card i{ color:var(--amber); margin-right:.5rem; }

.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; margin:2rem 0; }
.feature-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.4rem; text-align:center; box-shadow:0 1px 2px rgba(11,11,11,.04); transition:transform .16s, box-shadow .16s; }
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,11,11,.08); }
.feature-card i{ font-size:1.9rem; color:var(--green-600); margin-bottom:.9rem; display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; background:var(--green-050); border-radius:14px; }

/* passos de autenticação */
.auth-steps{ margin:2rem 0; }
.step{ display:flex; align-items:flex-start; margin-bottom:1.4rem; }
.step-number{ background:var(--green); color:#0b0b0b; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; margin-right:1rem; flex-shrink:0; }

/* endpoint */
.endpoint-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem; margin:1.5rem 0; display:flex; align-items:center; gap:1rem; box-shadow:0 1px 2px rgba(11,11,11,.04); }
.method{ padding:.28rem .7rem; border-radius:7px; font-weight:700; font-size:.78rem; letter-spacing:.03em; }
.method.get{ background:var(--green-050); color:var(--green-700); }
.method.post{ background:#12151a; color:#fff; }
.method.put{ background:#fff7e6; color:var(--amber); }
.method.delete{ background:#fdecec; color:var(--red); }
.endpoint-card code{ font-size:1rem; font-weight:600; color:var(--ink); background:transparent; padding:0; }

/* tabelas */
.params-table{ margin:1.5rem 0; overflow-x:auto; }
.params-table table{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; border-collapse:separate; border-spacing:0; }
.params-table th,.params-table td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); }
.params-table th{ background:#fafbfc; font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.params-table tr:last-child td{ border-bottom:0; }
.params-table tbody tr:hover{ background:var(--green-050); }
.params-table code{ background:var(--green-050); color:var(--green-700); padding:.18rem .45rem; border-radius:6px; font-size:.82rem; font-family:var(--mono); }

/* code blocks */
pre{ background:var(--code-bg); border:1px solid #1c2128; border-radius:12px; padding:1.35rem 1.4rem; margin:1.5rem 0; overflow-x:auto; position:relative; }
pre code{ color:#e6e9ee; font-family:var(--mono); font-size:.85rem; line-height:1.6; }
:not(pre) > code{ background:var(--green-050); color:var(--green-700); padding:.14rem .4rem; border-radius:6px; font-size:.85rem; font-family:var(--mono); }

/* copy button (injetado por script.js) */
.copy-button{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.14)!important; color:#c7ccd3!important; border-radius:8px!important; }
.copy-button:hover{ background:var(--green)!important; color:#0b0b0b!important; border-color:var(--green)!important; }

/* status cards */
.status-cards{ display:flex; gap:1rem; margin:1.5rem 0; flex-wrap:wrap; }
.status-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.95rem 1.1rem; text-align:center; min-width:120px; box-shadow:0 1px 2px rgba(11,11,11,.04); border-top:3px solid var(--line); }
.status-card strong{ display:block; font-size:1.02rem; margin-bottom:.2rem; }
.status-card.pending{ border-top-color:var(--amber); } .status-card.pending strong{ color:var(--amber); }
.status-card.paid, .status-card.approved, .status-card.processing{ border-top-color:var(--green); } .status-card.paid strong,.status-card.approved strong,.status-card.processing strong{ color:var(--green-600); }
.status-card.cancelled, .status-card.rejected{ border-top-color:var(--red); } .status-card.cancelled strong,.status-card.rejected strong{ color:var(--red); }

/* webhook events (era roxo) */
.webhook-events{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:1.5rem 0; }
.event-card{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:12px; padding:1rem 1.15rem; box-shadow:0 1px 2px rgba(11,11,11,.04); }
.event-card h4{ color:var(--green-700); font-family:var(--mono); font-size:.92rem; margin-bottom:.4rem; }

/* security tips */
.security-tips{ background:var(--green-050); border:1px solid rgba(100,163,0,.28); border-radius:12px; padding:1.4rem 1.5rem; margin:1.5rem 0; }
.security-tips h4{ color:var(--green-700); margin-bottom:.9rem; }
.security-tips i{ color:var(--green-600); margin-right:.5rem; }
.security-tips ul{ margin-left:1.3rem; }
.security-tips li{ margin-bottom:.45rem; color:var(--ink-soft); }

/* ---------------- Mobile ---------------- */
@media (max-width:768px){
  .sidebar{ transform:translateX(-100%); transition:transform .3s ease; width:84%; max-width:320px; }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .main-content{ margin-left:0; max-width:100vw; }
  .doc-topbar{ padding:0 1rem 0 4.2rem; }
  .section{ padding:1.75rem 1.15rem 3rem; }
  .features-grid{ grid-template-columns:1fr; }
  .status-cards{ flex-direction:column; }
  h1{ font-size:1.7rem; }
  .mobile-menu-button{ background:var(--black)!important; border-radius:10px!important; }
}

/* scrollbar */
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); }

/* print */
@media print{
  .sidebar,.doc-topbar,.mobile-menu-button{ display:none!important; }
  .main-content{ margin-left:0; max-width:100%; }
  .section{ display:block!important; page-break-before:always; max-width:none; }
  .section:first-child{ page-break-before:auto; }
}