/* ============================================================================
   PADRAO-DOC-API-v1 · api-docs.css
   ----------------------------------------------------------------------------
   CSS canônico para documentação de API REST estilo hybrid editorial.
   Fontes externas: Google Fonts (Fraunces + IBM Plex Sans + JetBrains Mono).
   Sem dependências runtime — pode ser hospedado em qualquer estático.

   Estrutura deste arquivo:
     §1  Design tokens (light + dark)
     §2  Base & reset
     §3  Topbar
     §4  Layout (grid)
     §5  Sidebar
     §6  Main typography (h1, h2, lede, section-label)
     §7  Intro components (info-meta, base-url-row, toolbar)
     §8  Compare banner (Antes / Depois / Origem)
     §9  Protheus metadata box
     §10 Tag section
     §11 Operation block (acordeão por endpoint)
     §12 Parameters
     §13 Examples (tabs + tier badges)
     §14 Responses
     §15 Code blocks (dark, syntax highlighting)
     §16 Schemas
     §17 Callouts
     §18 Shared examples
     §19 Footer
     §20 Responsivo
   ========================================================================== */


/* §1 ─────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* paleta editorial */
  --bg:           #fbfaf7;   /* off-white quente (stone-50 + warm tint) */
  --bg-elev:      #ffffff;   /* superfícies elevadas (cards, opblocks) */
  --bg-inset:     #f5f4f0;   /* superfícies recuadas (headers de card) */
  --text:         #1c1917;   /* stone-900 */
  --text-muted:   #57534e;   /* stone-600 */
  --text-subtle:  #a8a29e;   /* stone-400 */
  --border:       #e7e5e4;   /* stone-200 */
  --border-strong:#d6d3d1;   /* stone-300 */
  --accent:       #c2410c;   /* orange-700 — accent editorial */
  --accent-soft:  #fff7ed;   /* orange-50 */

  /* paleta dark do code block (sempre dark, em ambos os temas) */
  --code-bg:      #1c1917;
  --code-text:    #e7e5e4;
  --code-border:  #292524;
  --code-muted:   #78716c;
  --code-string:  #84cc16;   /* lime-500 */
  --code-number:  #fb923c;   /* orange-400 */
  --code-key:     #93c5fd;   /* blue-300 */
  --code-comment: #57534e;

  /* cores por método HTTP — Tailwind 600, saturação contida */
  --method-get:    #16a34a;
  --method-post:   #2563eb;
  --method-put:    #ca8a04;
  --method-patch:  #9333ea;
  --method-delete: #dc2626;

  /* cores por tier (x-mcp-tier) — pills tonais */
  --tier-happy-min-bg:   rgba(168, 162, 158, 0.15);
  --tier-happy-min-fg:   #57534e;
  --tier-happy-real-bg:  rgba(22, 163, 74, 0.12);
  --tier-happy-real-fg:  #15803d;
  --tier-edge-bg:        rgba(202, 138, 4, 0.14);
  --tier-edge-fg:        #a16207;
  --tier-validation-bg:  rgba(234, 88, 12, 0.12);
  --tier-validation-fg:  #c2410c;
  --tier-business-bg:    rgba(147, 51, 234, 0.12);
  --tier-business-fg:    #7e22ce;
  --tier-notfound-bg:    rgba(220, 38, 38, 0.12);
  --tier-notfound-fg:    #b91c1c;

  /* tipografia */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* layout */
  --sidebar-w:   300px;
  --topbar-h:    60px;
  --content-pad: 64px;
  --max-w:       1600px;

  /* sombras */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow:    0 4px 12px -2px rgba(28, 25, 23, 0.08);
}

[data-theme="dark"] {
  --bg:           #0c0a09;
  --bg-elev:      #1c1917;
  --bg-inset:     #161412;
  --text:         #fafaf9;
  --text-muted:   #a8a29e;
  --text-subtle:  #78716c;
  --border:       #292524;
  --border-strong:#44403c;
  --accent:       #fb923c;
  --accent-soft:  rgba(251, 146, 60, 0.1);
  --code-bg:      #161412;
}


/* §2 ─────────────────────────────────────────────────────────────────────────
   BASE & RESET
   Fonte base 16.5px (10% maior que o padrão 15px).
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 0.88em; }
p { margin: 0 0 1em; color: var(--text-muted); }
::selection { background: var(--accent-soft); color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.02em;

  margin: 0;
}


/* §3 ─────────────────────────────────────────────────────────────────────────
   TOPBAR
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 24px;
}
.brand {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;

}
.brand .product { color: var(--text); }
.brand .sep     { color: var(--text-subtle); font-size: 15px; }
.brand .doc     { font-style: italic; font-weight: 400; color: var(--text-muted); }
.version-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.topbar .spacer { flex: 1; }
.topbar .search {
  width: 280px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-subtle);
  font-size: 14px;
  cursor: text;
}
.topbar .search:hover { border-color: var(--border-strong); }
.topbar .search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 7px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
}
.topbar button.icon {
  background: none;
  border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.topbar button.icon:hover {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border-strong);
}
.topbar button.icon svg { width: 18px; height: 18px; }


/* §4 ─────────────────────────────────────────────────────────────────────────
   LAYOUT — grid sidebar + main, max-width 1600px (usa toda a tela)
   --------------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  max-width: var(--max-w);
  margin: 0 auto;
}


/* §5 ─────────────────────────────────────────────────────────────────────────
   SIDEBAR
   --------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 36px 16px 64px 28px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.nav-group { margin-bottom: 30px; }
.nav-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 8px 12px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.nav-item:hover { background: var(--bg-elev); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nav-item .method {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 42px;
}
.nav-item .method.get    { color: var(--method-get); }
.nav-item .method.post   { color: var(--method-post); }
.nav-item .method.put    { color: var(--method-put); }
.nav-item .method.patch  { color: var(--method-patch); }
.nav-item .method.delete { color: var(--method-delete); }


/* §6 ─────────────────────────────────────────────────────────────────────────
   MAIN — typography (h1, h2, section-label, lede)
   --------------------------------------------------------------------------- */
main { min-width: 0; padding: 60px 0; }
section.block { padding: 0 var(--content-pad); margin-bottom: 72px; }

h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 18px;

}
h2 {
  font-size: 31px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 14px;
}
h3.section-label {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.lede {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 300;

  margin-bottom: 36px;
  max-width: 70ch;
}


/* §7 ─────────────────────────────────────────────────────────────────────────
   INTRO COMPONENTS (info-meta, base-url-row, toolbar, authorize-btn)
   --------------------------------------------------------------------------- */
.info-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.endpoint-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.oas-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 9px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}
.base-url-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 18px 0 26px;
  font-family: var(--font-mono);
  font-size: 14px;
}
.base-url-row .label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 32px;
}
.toolbar select {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.authorize-btn {
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.authorize-btn:hover { background: var(--accent-soft); }
.authorize-btn svg { width: 14px; height: 14px; }


/* §8 ─────────────────────────────────────────────────────────────────────────
   COMPARE BANNER — Antes / Depois / Origem
   --------------------------------------------------------------------------- */
.compare-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 32px 0 40px;
}
.compare-col {
  background: var(--bg-elev);
  padding: 20px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.compare-col.is-after { background: var(--accent-soft); }
.compare-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.compare-col.is-after .compare-label { color: var(--accent); }
.compare-col code {
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
  color: var(--text);
}
.compare-col.is-after code {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
}


/* §9 ─────────────────────────────────────────────────────────────────────────
   PROTHEUS METADATA BOX — extension x-protheus (ou similar)
   --------------------------------------------------------------------------- */
.protheus-meta {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  overflow: hidden;
  margin: 32px 0 40px;
}
.protheus-meta-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.protheus-meta-header .title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;

}
.ext-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
}
.protheus-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.meta-item { background: var(--bg-elev); padding: 16px 18px; }
.meta-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 8px;
}
.meta-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  display: block;
}
.meta-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 4px;
  display: block;
}
.op-modes {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.op-modes span { color: var(--text); }
.op-modes code {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0 5px;
  border-radius: 3px;
  margin-right: 6px;
}
.protheus-deps { padding: 18px 22px; border-top: 1px solid var(--border); }
.protheus-deps-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 12px;
}
.dep-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dep-card {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
}
.dep-card .dep-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 4px;
}
.dep-card .dep-entity { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.dep-card .dep-detail { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
.dep-card .dep-detail code {
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
}


/* §10 ────────────────────────────────────────────────────────────────────────
   TAG SECTION
   --------------------------------------------------------------------------- */
.tag-section { padding: 0 var(--content-pad); margin-bottom: 64px; }
.tag-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tag-header .tag-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;

}
.tag-header .tag-description { font-size: 15px; color: var(--text-muted); }


/* §11 ────────────────────────────────────────────────────────────────────────
   OPERATION BLOCK — acordeão por endpoint, faixa lateral 4px colorida
   --------------------------------------------------------------------------- */
.opblock {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.opblock:hover { border-color: var(--border-strong); }
.opblock::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.opblock.get::before    { background: var(--method-get); }
.opblock.post::before   { background: var(--method-post); }
.opblock.put::before    { background: var(--method-put); }
.opblock.patch::before  { background: var(--method-patch); }
.opblock.delete::before { background: var(--method-delete); }

.opblock-summary {
  padding: 16px 18px 16px 26px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.method-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 4px;
  color: white;
  min-width: 70px;
  text-align: center;
}
.method-badge.get    { background: var(--method-get); }
.method-badge.post   { background: var(--method-post); }
.method-badge.put    { background: var(--method-put); }
.method-badge.patch  { background: var(--method-patch); }
.method-badge.delete { background: var(--method-delete); }

.opblock-path {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.opblock-path .param { color: var(--accent); }
.opblock-desc {
  flex: 1;
  font-size: 14px;
  color: var(--text-muted);
  text-align: right;
  padding-right: 4px;
}
.opblock-expand {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--text-subtle);
  transition: transform 0.2s;
}
.opblock.collapsed .opblock-expand { transform: rotate(-90deg); }

.opblock-body { border-top: 1px solid var(--border); display: none; }
.opblock:not(.collapsed) .opblock-body { display: block; }

.opblock-section {
  padding: 22px 26px 22px 30px;
  border-bottom: 1px solid var(--border);
}
.opblock-section:last-child { border-bottom: none; }
.opblock-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.opblock-section-header h4 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.op-description {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 80ch;
  margin-bottom: 8px;
}
.op-description code {
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.86em;
  color: var(--text);
}
.op-description strong { color: var(--text); font-weight: 600; }
.op-description ul { padding-left: 22px; margin: 8px 0; }
.op-description li { margin-bottom: 4px; }


/* §12 ────────────────────────────────────────────────────────────────────────
   PARAMETERS — grid 280px / 1fr (aproveita largura)
   --------------------------------------------------------------------------- */
.params { border-top: 1px solid var(--border); }
.param-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.param-row:last-child { border-bottom: none; }
.param-row .key { display: flex; flex-direction: column; gap: 5px; }
.param-row .name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.param-row .meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}
.param-row .type     { color: var(--text-muted); font-weight: 500; }
.param-row .required { color: var(--method-delete); font-weight: 500; }
.param-row .optional { color: var(--text-subtle); }
.param-row .in       { font-style: italic; color: var(--text-subtle); }

/* field-ref: pill laranja conectando à origem SX3 (SE2.E2_*) */
.param-row .field-ref {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
  font-weight: 500;
  width: fit-content;
}
.param-row .field-ref::before { content: '↳'; opacity: 0.6; }

.param-row .description {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}
.param-row .description code {
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.86em;
}
.param-row .description strong { color: var(--text); }
.param-row .enum { margin-top: 8px; font-size: 13px; color: var(--text-subtle); }
.param-row .enum code { margin-right: 5px; color: var(--text); }
.param-input {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 14px;
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  color: var(--text);
}
.param-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* §13 ────────────────────────────────────────────────────────────────────────
   EXAMPLES — múltiplos examples por request/response via tabs
   --------------------------------------------------------------------------- */
.examples-container { margin-top: 16px; }
.examples-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.example-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
  transition: all 0.15s;
}
.example-tab:hover { color: var(--text); background: var(--bg-elev); }
.example-tab.active {
  background: var(--bg-elev);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.example-tab .name {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Tier badges (x-mcp-tier) */
.tier-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-badge.happy-path-minimal   { background: var(--tier-happy-min-bg);   color: var(--tier-happy-min-fg); }
.tier-badge.happy-path-realistic { background: var(--tier-happy-real-bg);  color: var(--tier-happy-real-fg); }
.tier-badge.edge-valid           { background: var(--tier-edge-bg);        color: var(--tier-edge-fg); }
.tier-badge.validation-error     { background: var(--tier-validation-bg);  color: var(--tier-validation-fg); }
.tier-badge.business-error       { background: var(--tier-business-bg);    color: var(--tier-business-fg); }
.tier-badge.not-found            { background: var(--tier-notfound-bg);    color: var(--tier-notfound-fg); }

.example-pane { display: none; }
.example-pane.active { display: block; }
.example-pane .example-meta {
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  font-size: 13.5px;
  color: var(--text-muted);
}
.example-pane .example-meta strong { color: var(--text); font-weight: 600; }
.example-pane .example-meta code {
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
}
.example-pane .code-block {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}
.example-pane .example-meta + .code-block { border-top: 1px solid var(--code-border); }


/* §14 ────────────────────────────────────────────────────────────────────────
   RESPONSES
   --------------------------------------------------------------------------- */
.response-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.response-row:last-child { border-bottom: none; }
.status-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  display: inline-block;
  width: fit-content;
}
.status-badge.s2xx { background: rgba(22, 163, 74, 0.1);  color: var(--method-get); }
.status-badge.s4xx { background: rgba(202, 138, 4, 0.12); color: var(--method-put); }
.status-badge.s5xx { background: rgba(220, 38, 38, 0.1);  color: var(--method-delete); }
.response-row .desc { font-size: 15px; color: var(--text-muted); line-height: 1.55; }
.response-row .desc code {
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.86em;
}
.response-row .desc strong { color: var(--text); }


/* §15 ────────────────────────────────────────────────────────────────────────
   CODE BLOCKS — dark, com header e syntax highlighting manual
   --------------------------------------------------------------------------- */
.code-block {
  margin-top: 14px;
  background: var(--code-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--code-border);
}
.code-block header {
  display: flex; align-items: center;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--code-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--code-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 10px;
}
.code-block header .status-badge {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}
.code-block pre {
  margin: 0;
  padding: 16px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--code-text);
}
.code-block pre::-webkit-scrollbar { height: 6px; }
.code-block pre::-webkit-scrollbar-thumb { background: var(--code-border); border-radius: 3px; }

/* JSON tokens */
.tok-key     { color: var(--code-key); }
.tok-string  { color: var(--code-string); }
.tok-number  { color: var(--code-number); }
.tok-comment { color: var(--code-comment); font-style: italic; }
.tok-punct   { color: var(--code-muted); }
.tok-keyword { color: #f0abfc; }
.tok-bool    { color: #fb923c; }

/* HTTP request line tokens */
.tok-method        { font-weight: 700; letter-spacing: 0.04em; }
.tok-method.get    { color: #4ade80; }
.tok-method.post   { color: #60a5fa; }
.tok-method.put    { color: #facc15; }
.tok-method.delete { color: #f87171; }
.tok-url-base      { color: #a8a29e; }
.tok-url-path      { color: #e7e5e4; }
.tok-url-param     { color: #fb923c; }
.tok-url-query     { color: #57534e; }
.tok-url-qval      { color: #84cc16; }
.tok-header-name   { color: #fbbf24; }
.tok-header-value  { color: #d6d3d1; }


/* §16 ────────────────────────────────────────────────────────────────────────
   SCHEMAS — cards colapsáveis, allOf indicado em "extends"
   --------------------------------------------------------------------------- */
.schema {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  overflow: hidden;
  margin-bottom: 18px;
}
.schema-header {
  padding: 14px 18px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.schema-header .left {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.schema-header .name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.schema-header .composes {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}
.schema-header .composes code {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 4px;
}
.schema-header .right { display: flex; align-items: center; gap: 10px; }
.schema-header .type-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.schema-header svg {
  width: 17px; height: 17px;
  color: var(--text-subtle);
  transition: transform 0.2s;
}
.schema.collapsed .schema-header svg { transform: rotate(-90deg); }
.schema-body { display: block; }
.schema.collapsed .schema-body { display: none; }
.schema-description {
  padding: 14px 18px 0;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.schema-description code {
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.86em;
}
.schema .params { border-top: 1px solid var(--border); margin-top: 14px; }
.schema .param-row { padding: 14px 18px; }


/* §17 ────────────────────────────────────────────────────────────────────────
   CALLOUTS — destaques editoriais
   --------------------------------------------------------------------------- */
.callout {
  margin: 26px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.6;
}
.callout strong { color: var(--text); font-weight: 600; }
.callout p { margin: 0; color: var(--text-muted); }
.callout code {
  background: rgba(255, 255, 255, 0.6);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.88em;
}


/* §18 ────────────────────────────────────────────────────────────────────────
   SHARED EXAMPLES — cards reutilizáveis ($ref em components/examples)
   --------------------------------------------------------------------------- */
.shared-example {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 10px;
  margin-bottom: 18px;
  overflow: hidden;
}
.shared-example-header {
  padding: 14px 18px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.shared-example-header .name {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.shared-example-header .summary {
  flex: 1;
  font-size: 14px;
  color: var(--text-muted);
}
.shared-example-body { padding: 16px 18px; }
.shared-example-body .desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.shared-example-body .desc code {
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.86em;
}


/* §19 ────────────────────────────────────────────────────────────────────────
   FOOTER
   --------------------------------------------------------------------------- */
footer {
  padding: 72px var(--content-pad) 56px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 14px;
}
footer .row {
  display: flex; justify-content: space-between; align-items: center;
}


/* §20 ────────────────────────────────────────────────────────────────────────
   RESPONSIVO
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 260px minmax(0, 1fr); }
  :root { --content-pad: 36px; }
  .protheus-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .dep-list { grid-template-columns: 1fr; }
  .compare-banner { grid-template-columns: 1fr; }
  .param-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  :root { --content-pad: 24px; }
  .topbar .search { display: none; }
  h1 { font-size: 36px; }
  .opblock-desc { display: none; }
  .protheus-meta-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   §6 Auth panel + Try it out + Mobile drawer (PADRAO-DOC-API-v1 piloto)
   Movido de inline na primeira sessao 2026-05-13.
   ========================================================================== */
    .auth-panel {
      position: fixed;
      top: 62px;
      right: 16px;
      width: min(420px, calc(100vw - 32px));
      padding: 16px;
      border: 1px solid var(--border-strong, #d0d4d9);
      border-radius: 8px;
      background: var(--bg-elevated, #fafbfc);
      font-family: var(--font-body, system-ui, sans-serif);
      font-size: 14px;
      z-index: 100;
      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    }
    .auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle, #e5e7eb); margin-bottom: 14px; }
    .auth-tab {
      background: transparent; border: none; padding: 8px 12px;
      font: inherit; color: var(--text-subtle, #6b7280); cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
    }
    .auth-tab.is-active { color: var(--text-strong, #111); border-bottom-color: var(--method-get, #16a34a); font-weight: 500; }
    .auth-form { display: flex; flex-direction: column; gap: 10px; }
    .auth-form[hidden], .auth-panel[hidden], .auth-status[hidden] { display: none !important; }
    .auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-subtle, #6b7280); }
    .auth-form input[type="text"],
    .auth-form input[type="password"],
    .auth-form textarea {
      font: 13px/1.4 var(--font-mono, "JetBrains Mono", monospace);
      padding: 8px 10px;
      border: 1px solid var(--border-subtle, #e5e7eb);
      border-radius: 6px;
      background: var(--bg-canvas, #fff);
      color: var(--text-strong, #111);
    }
    .auth-form input:focus, .auth-form textarea:focus { outline: 2px solid var(--method-get, #16a34a); outline-offset: -1px; }
    .auth-advanced summary { font-size: 12px; color: var(--text-subtle, #6b7280); cursor: pointer; user-select: none; padding: 4px 0; }
    .auth-advanced[open] summary { margin-bottom: 6px; }
    .auth-submit {
      align-self: flex-start; padding: 8px 16px;
      background: var(--method-get, #16a34a); color: #fff;
      border: none; border-radius: 6px; cursor: pointer; font: 500 13px/1 inherit;
    }
    .auth-submit:hover { filter: brightness(0.95); }
    .auth-submit:disabled { opacity: 0.5; cursor: progress; }
    .auth-status {
      margin-top: 14px; padding: 12px; border-radius: 6px;
      background: rgba(22, 163, 74, 0.08);
      border: 1px solid rgba(22, 163, 74, 0.3);
    }
    .auth-status.is-error { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.3); }
    .auth-status-line { font-weight: 500; margin-bottom: 6px; }
    .auth-token-preview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .auth-token-label { font-size: 11px; color: var(--text-subtle, #6b7280); text-transform: uppercase; letter-spacing: 0.5px; }
    .auth-token-preview code {
      font: 12px/1.3 var(--font-mono, "JetBrains Mono", monospace);
      max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      padding: 2px 6px; background: rgba(0,0,0,0.06); border-radius: 4px;
    }
    .auth-mini {
      padding: 4px 10px; font-size: 12px;
      background: var(--bg-canvas, #fff); color: var(--text-strong, #111);
      border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 4px; cursor: pointer;
    }
    .auth-mini:hover { background: var(--bg-elevated, #f3f4f6); }
    .auth-mini-danger { color: #b91c1c; border-color: rgba(185, 28, 28, 0.3); }
    .auth-hint { font-size: 12px; color: var(--text-subtle, #6b7280); margin-top: 12px; line-height: 1.4; }
    .auth-hint code { font-size: 11px; }
    .topbar .authorize-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; margin-right: 8px;
      background: #2563eb; color: #fff;
      border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
      font: 500 13px/1 var(--font-body, system-ui, sans-serif);
      cursor: pointer;
    }
    .topbar .authorize-btn:hover { filter: brightness(0.95); }
    .topbar .authorize-btn svg { width: 14px; height: 14px; }
    .topbar .authorize-btn.is-authed { background: var(--method-get, #16a34a); }
    .authorize-btn.is-authed { background: var(--method-get, #16a34a); color: #fff; }
    .tok-header-value.is-real { background: rgba(22, 163, 74, 0.12); border-radius: 3px; padding: 0 2px; }
    /* Vinculacao ERP — docs v0 (sem data-collapsible-tag): oculta, revelada via botao.
       Docs v1 (regra 10 PADRAO-DOC-API-v1): visivel por padrao, toggle pelo section-label. */
    #protheus:not([data-collapsible-tag]) { display: none; }
    #protheus:not([data-collapsible-tag]).is-revealed { display: block; }
    .auth-extras { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
    /* Section colapsavel generico: header sempre visivel, conteudo some quando .collapsed */
    [data-collapsible-tag] > .tag-header,
    [data-collapsible-tag] > .section-label { cursor: pointer; user-select: none; position: relative; padding-right: 28px; }
    [data-collapsible-tag] > .tag-header::after,
    [data-collapsible-tag] > .section-label::after {
      content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      font-size: 14px; color: var(--text-subtle, #6b7280); transition: transform 0.15s ease;
    }
    [data-collapsible-tag].collapsed > .tag-header::after,
    [data-collapsible-tag].collapsed > .section-label::after { transform: translateY(-50%) rotate(-90deg); }
    [data-collapsible-tag].collapsed > :not(.tag-header):not(.section-label) { display: none; }
    /* Botao Executar embutido no header do .code-block (estilo Swagger) */
    .code-block header .cb-exec {
      display: inline-flex; align-items: center; gap: 4px;
      margin-left: 12px; padding: 3px 10px;
      background: rgba(22,163,74,0.18); color: #4ade80;
      border: 1px solid rgba(22,163,74,0.4); border-radius: 4px;
      font: 600 11px/1 var(--font-mono, monospace); letter-spacing: 0.04em;
      cursor: pointer; text-transform: uppercase;
    }
    .code-block header .cb-exec:hover { filter: brightness(1.15); }
    .code-block header .cb-exec:disabled { opacity: 0.5; cursor: progress; }
    .code-block header .cb-exec svg { width: 12px; height: 12px; }

    /* Resultado da execucao (.cb-result), card abaixo do .code-block executado */
    .cb-result { margin-top: 10px; }
    .cb-result .cb-result-status { font: 600 11px/1 var(--font-mono, monospace); letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; }
    .cb-result .cb-result-status.s2xx { background: rgba(22,163,74,0.18); color: #4ade80; }
    .cb-result .cb-result-status.s3xx { background: rgba(37,99,235,0.18); color: #60a5fa; }
    .cb-result .cb-result-status.s4xx { background: rgba(180,83,9,0.20); color: #fbbf24; }
    .cb-result .cb-result-status.s5xx { background: rgba(220,38,38,0.20); color: #f87171; }
    .cb-result pre {
      font: 12px/1.5 var(--font-mono, "JetBrains Mono", monospace);
      padding: 14px 16px; margin: 0;
      max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word;
      background: transparent; color: var(--code-text, var(--text-strong, #111));
    }


    /* Mobile: drawer pra sidebar */
    .topbar .menu-toggle { display: none; }
    @media (max-width: 720px) {
      .topbar .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; margin-right: 8px;
        background: transparent; border: 1px solid var(--border-subtle, #e5e7eb);
        border-radius: 6px; cursor: pointer; color: inherit;
      }
      .layout { display: block; }
      .sidebar {
        position: fixed; left: 0; top: 52px; bottom: 0;
        width: 280px; max-width: 80vw; z-index: 90;
        background: var(--bg-canvas, #fff); border-right: 1px solid var(--border-subtle, #e5e7eb);
        overflow-y: auto; padding: 16px;
        transform: translateX(-100%); transition: transform 0.2s ease;
      }
      .sidebar.open { transform: translateX(0); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
      .topbar { position: sticky; top: 0; z-index: 95; }
      [data-theme="dark"] .sidebar { background: #11151c; border-right-color: #2c3340; }
      .auth-panel { right: 8px; left: 8px; width: auto; }
    }

    /* Response example value injetado por JS (estilo Swagger).
       Anexado sempre como filho direto de .response-row; forca col 2
       do grid para alinhar com a descricao (que pode ou nao ter
       wrapper em volta dela). */
    .response-row > .response-example { margin-top: 10px; grid-column: 2; }
    .response-example .response-example-meta { font-size: 12px; color: var(--code-muted, var(--text-subtle, #6b7280)); }
    .response-example pre {
      font: 12px/1.5 var(--font-mono, "JetBrains Mono", monospace);
      padding: 14px 16px; margin: 0;
      max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word;
      background: transparent; color: var(--code-text, var(--text-strong, #111));
    }