/* ============================================================
   Siversa Documentation Experience — guide.css
   Design System v3.0 · Compatível com todas as shells legadas
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Brand */
  --docs-brand:          #1E4FA3;
  --docs-brand-2:        #2563eb;
  --docs-brand-3:        #5b93f5;
  --docs-brand-hover:    #1844a0;
  --docs-brand-soft:     #edf3ff;
  --docs-brand-soft-2:   #dbeafe;
  --docs-accent:         #F58220;
  --docs-accent-2:       #c45e0c;
  --docs-accent-soft:    #fff4e8;

  /* Surfaces */
  --docs-bg:             #eef1f7;
  --docs-bg-2:           #e7ecf4;
  --docs-surface:        #ffffff;
  --docs-surface-muted:  #f7f9fc;
  --docs-surface-hover:  #f1f5fb;

  /* Navy (sidebar, header) */
  --docs-navy:           #0d1526;
  --docs-navy-2:         #131f37;
  --docs-navy-3:         #1b2942;
  --docs-navy-light:     #243552;
  --docs-navy-text:      #b9c6de;
  --docs-navy-text-2:    #8496b5;
  --docs-navy-text-3:    #66789a;

  /* Text */
  --docs-text:           #141d2e;
  --docs-text-2:         #3c4a60;
  --docs-text-muted:     #5b6a80;
  --docs-text-faint:     #8b95a8;

  /* Borders */
  --docs-border:         #e4eaf2;
  --docs-border-2:       #d2dae8;
  --docs-hairline:       #edf1f7;
  --docs-sidebar-border: #263650;

  /* Semantic */
  --docs-success:        #16835f;
  --docs-success-soft:   #f0f9f5;
  --docs-warning:        #9a5b00;
  --docs-warning-soft:   #fff8ed;
  --docs-danger:         #b42318;
  --docs-danger-soft:    #fff4f3;
  --docs-info-soft:      #f1f6fd;

  /* Layout */
  --docs-sidebar-w:      300px;
  --docs-rail-w:         232px;
  --docs-rail-gap:       44px;
  --docs-header-h:       60px;
  --docs-content-max:    848px;
  --docs-sheet-pad:      52px;

  /* Radius */
  --docs-radius-sm:      7px;
  --docs-radius-md:      10px;
  --docs-radius-lg:      14px;

  /* Shadow */
  --docs-shadow-sm:      0 1px 2px rgba(15,23,42,.05), 0 3px 10px rgba(15,38,73,.045);
  --docs-shadow-md:      0 1px 2px rgba(15,23,42,.05), 0 10px 28px rgba(15,38,73,.07);
  --docs-shadow-lg:      0 2px 6px rgba(15,23,42,.05), 0 22px 54px rgba(15,38,73,.11);
  --docs-shadow-sheet:   0 1px 2px rgba(15,23,42,.04), 0 8px 30px rgba(19,42,80,.055);

  /* Transition */
  --docs-transition:     .15s ease;

  /* Callout icons (inline SVG, zero dependências externas) */
  --docs-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --docs-ico-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316835f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --docs-ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --docs-ico-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --docs-ico-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l5 5v13H7z'/%3E%3Cpath d='M15 3v6h5'/%3E%3C/svg%3E");
  --docs-ico-search-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768ab0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");

  /* Legacy aliases — mantém retrocompatibilidade com guide v1 */
  --sg-blue:         var(--docs-brand);
  --sg-blue-2:       var(--docs-brand-2);
  --sg-navy:         var(--docs-navy);
  --sg-navy-2:       var(--docs-navy-2);
  --sg-ink:          var(--docs-text);
  --sg-muted:        var(--docs-text-muted);
  --sg-line:         var(--docs-border);
  --sg-bg:           var(--docs-bg);
  --sg-paper:        var(--docs-surface);
  --sg-ok:           var(--docs-success);
  --sg-warn:         var(--docs-warning);
  --sg-danger:       var(--docs-danger);
  --sg-orange:       var(--docs-accent);
  --sg-sidebar:      var(--docs-sidebar-w);
  --sg-radius:       var(--docs-radius-md);
  --sg-shadow:       var(--docs-shadow-md);
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--docs-header-h) + 20px);
}
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--docs-text);
  background: var(--docs-bg);
  line-height: 1.68;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
button, input, select { font: inherit; }
a { color: var(--docs-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--docs-brand-2);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--docs-brand-soft-2); color: var(--docs-text); }

/* ── 3. GLOBAL HEADER ─────────────────────────────────────── */
.docs-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--docs-header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--docs-border);
  z-index: 100;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
/* Menu do manual: escondido no desktop, aparece <=991px (ver responsive) */
.docs-header-menu-btn {
  display: none;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  align-items: center; justify-content: center;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-sm);
  background: var(--docs-surface);
  color: var(--docs-text-2);
  cursor: pointer;
  transition: border-color var(--docs-transition), color var(--docs-transition);
}
.docs-header-menu-btn:hover { border-color: var(--docs-brand-3); color: var(--docs-brand); }
.docs-header-menu-btn svg { width: 18px; height: 18px; }

.docs-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 15.5px;
  letter-spacing: -.02em;
  color: var(--docs-text);
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  padding-right: 16px;
  border-right: 1px solid var(--docs-border);
}
.docs-header-brand:hover { text-decoration: none; color: var(--docs-text); }
.docs-header-brand .docs-brand-name { color: var(--docs-brand); }
.docs-header-brand small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--docs-text-faint);
  margin: 0;
  line-height: 1.3;
}
.docs-header-logo {
  width: 30px; height: 30px;
  border-radius: var(--docs-radius-sm);
  object-fit: contain;
  flex: 0 0 auto;
}

/* Progress bar subtil (sob o header global) */
.docs-progress-bar {
  position: fixed;
  left: 0; right: 0;
  top: var(--docs-header-h);
  height: 2px;
  z-index: 99;
  background: transparent;
  pointer-events: none;
}
.docs-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--docs-brand), var(--docs-brand-3));
  transition: width .18s ease;
}

/* Search bar in header */
.docs-header-search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.docs-header-search-btn {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 11px;
  background: var(--docs-surface-muted);
  border: 1px solid var(--docs-border);
  border-radius: 999px;
  color: var(--docs-text-muted);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), background var(--docs-transition);
}
.docs-header-search-btn:hover {
  border-color: var(--docs-brand-3);
  background: var(--docs-surface);
  box-shadow: 0 0 0 3px rgba(37,99,235,.09);
}
.docs-header-search-btn svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--docs-text-faint); }
.docs-header-search-btn span { flex: 1; }
.docs-header-search-btn kbd {
  border: 1px solid var(--docs-border-2);
  background: var(--docs-surface);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--docs-text-faint);
  font-family: inherit;
  letter-spacing: .02em;
}

/* Module switcher */
.docs-header-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.docs-mod-switcher { position: relative; }
.docs-mod-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-sm);
  background: var(--docs-surface);
  color: var(--docs-text-2);
  font-size: 13px; font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--docs-transition), background var(--docs-transition), color var(--docs-transition);
}
.docs-mod-btn:hover { border-color: var(--docs-brand-3); background: var(--docs-brand-soft); color: var(--docs-brand); }
.docs-mod-btn svg { width: 13px; height: 13px; }
.docs-mod-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 262px;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  box-shadow: var(--docs-shadow-lg);
  padding: 7px;
  z-index: 110;
}
.docs-mod-dropdown.open { display: block; animation: docsPop .14s ease; }
@keyframes docsPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.docs-mod-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--docs-radius-sm);
  color: var(--docs-text);
  font-size: 13.5px;
  text-decoration: none;
}
.docs-mod-dropdown-item:hover { background: var(--docs-surface-hover); text-decoration: none; color: var(--docs-brand); }
.docs-mod-dropdown-item.active { color: var(--docs-brand); font-weight: 650; background: var(--docs-brand-soft); }
.docs-mod-dropdown-item svg { width: 16px; height: 16px; color: var(--docs-text-muted); flex: 0 0 auto; }
.docs-mod-dropdown-item.active svg { color: var(--docs-brand); }
.docs-mod-cat {
  font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--docs-text-faint); padding: 8px 10px 3px; display: block;
}
.docs-header-icon-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-sm);
  background: var(--docs-surface);
  color: var(--docs-text-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color var(--docs-transition), color var(--docs-transition);
}
.docs-header-icon-btn:hover { border-color: var(--docs-brand-3); color: var(--docs-brand); }
.docs-header-icon-btn svg { width: 16px; height: 16px; }

/* Legacy topbar — Financeiro uses .topbar; map to new tokens */
/* Topbar legada (Financeiro): o header universal cobre marca, pesquisa global,
   módulos e imprimir. Mantê-la visível dava dois cabeçalhos e duas pesquisas.
   Fica fora do ecrã; o JS reaproveita o input de pesquisa local antes disto. */
body.has-docs-header .topbar { display: none !important; }

.topbar {
  position: fixed; inset: 0 0 auto 0;
  height: var(--docs-header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--docs-surface);
  border-bottom: 1px solid var(--docs-border);
  z-index: 100;
}
.topbar .brand { color: var(--docs-text); }
.topbar .brand:hover { color: var(--docs-text); text-decoration: none; }
.topbar .brand span { color: var(--docs-brand); }
.topbar .brand small { color: var(--docs-text-muted); margin: 0; }
.topbar .search { flex: 1; max-width: 480px; margin: 0; position: relative; }
.topbar .search input {
  background: var(--docs-surface-muted); border: 1px solid var(--docs-border);
  color: var(--docs-text); height: 36px;
  width: 100%; border-radius: var(--docs-radius-sm);
  padding: 0 12px;
}
.topbar .search input:focus {
  background: var(--docs-surface);
  border-color: var(--docs-brand-2);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}
.topbar kbd {
  position: absolute; right: 10px; top: 8px;
  border: 1px solid var(--docs-border-2); background: var(--docs-surface);
  border-radius: 4px; padding: 1px 6px; font-size: 10px; color: var(--docs-text-faint);
}

/* ── 4. SIDEBAR ───────────────────────────────────────────── */
/* Nota: o rail direito também é um <aside>; fica sempre excluído destes
   selectores legados, senão herda o chrome fixo/navy do sidebar. */
.sidebar, aside:not(.docs-right-rail) {
  position: fixed;
  inset: var(--docs-header-h) auto 0 0;
  width: var(--docs-sidebar-w);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(37,99,235,.16), transparent 70%),
    linear-gradient(180deg, var(--docs-navy) 0%, #0b1424 100%);
  color: #e8eef8;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 34px;
  z-index: 40;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.055);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
  overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar, aside:not(.docs-right-rail)::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track, aside:not(.docs-right-rail)::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, aside:not(.docs-right-rail)::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.sidebar:hover::-webkit-scrollbar-thumb, aside:not(.docs-right-rail):hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); background-clip: padding-box; }
/* Financeiro sidebar sits below topbar */
body.sg-fin .sidebar { top: var(--docs-header-h); }

/* Sidebar header section (sticky identity + search) */
.docs-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 15px 16px 13px;
  background: linear-gradient(180deg, rgba(11,20,36,.98) 72%, rgba(11,20,36,.86) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.docs-sidebar-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--docs-navy-text-2) !important;
  text-decoration: none;
  margin-bottom: 13px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  transition: color var(--docs-transition), background var(--docs-transition);
}
.docs-sidebar-back:hover { color: #fff !important; background: rgba(255,255,255,.1); text-decoration: none; }
.docs-sidebar-back svg { width: 12px; height: 12px; }
.docs-sidebar-module {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 13px;
}
.docs-sidebar-module-ico {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(91,147,245,.28), rgba(37,99,235,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  display: grid; place-items: center;
  flex: 0 0 auto;
  color: #d6e4ff;
}
.docs-sidebar-module-ico svg { width: 19px; height: 19px; }
.docs-sidebar-module > div { min-width: 0; }
.docs-sidebar-module-name {
  font-size: 15.5px; font-weight: 750; color: #fff; line-height: 1.22;
  letter-spacing: -.01em;
}
.docs-sidebar-module-sub {
  font-size: 11.5px; color: var(--docs-navy-text-2); display: block; margin-top: 2px;
  line-height: 1.4;
}
.docs-sidebar-module-topics {
  display: inline-block;
  font-size: 10px;
  color: #cfe0ff;
  margin-top: 7px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(91,147,245,.18);
  box-shadow: inset 0 0 0 1px rgba(145,185,255,.2);
}

/* Sidebar search (novo + legado unificados) */
.docs-sidebar-search { position: relative; }
.docs-sidebar-search input,
.search input,
.search, #q,
input.search,
.sidebar input[type="search"],
.sidebar input#search,
.sidebar input#q,
aside input#q,
aside input#search {
  width: 100%; height: 36px;
  border: 1px solid var(--docs-sidebar-border);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #fff;
  padding: 0 12px 0 34px;
  outline: none;
  font-size: 13px;
  background-image: var(--docs-ico-search-dim);
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px 14px;
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), background-color var(--docs-transition);
}
/* Legado: inputs soltos no sidebar precisam de margem lateral */
.search, #q, input.search,
.sidebar input#search, .sidebar input#q,
aside input#q, aside input#search {
  margin: 4px 16px 0;
  width: calc(100% - 32px);
}
.docs-sidebar-head .search,
.docs-sidebar-head #q,
.docs-sidebar-head input.search,
.docs-sidebar-head input#search { margin: 0; width: 100%; }
.docs-sidebar-search input::placeholder,
.search input::placeholder,
#q::placeholder,
input.search::placeholder { color: var(--docs-navy-text-3); }
.docs-sidebar-search input:focus,
.search input:focus,
#q:focus,
input.search:focus {
  border-color: #4d7ad4;
  background-color: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
/* Wrapper legado <div class="search"> (topbar Financeiro): reset — nunca atinge input.search */
.search:not(input) { border: 0; background: none; padding: 0; height: auto; background-image: none; }
.search:not(input) > input { margin: 0; width: 100%; }

/* Nav wrapper */
.docs-nav-scroll { padding: 8px 0 0; }

/* Nav groups — accordion */
.docs-nav-group {
  margin: 1px 10px;
  padding: 0;
  border-radius: var(--docs-radius-sm);
}
.docs-nav-group-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  background: none; border: 0;
  font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--docs-navy-text-2);
  cursor: pointer;
  border-radius: var(--docs-radius-sm);
  transition: color var(--docs-transition), background var(--docs-transition);
  text-align: left;
}
.docs-nav-group-btn:hover { color: #dce7fa; background: rgba(255,255,255,.05); }
.docs-nav-group-btn > span:first-child { flex: 1; min-width: 0; }
.docs-nav-group-btn svg {
  width: 11px; height: 11px;
  transition: transform .2s ease;
  flex: 0 0 auto;
  color: var(--docs-navy-text-3);
  order: -1;
}
.docs-nav-group.open > .docs-nav-group-btn svg { transform: rotate(90deg); }
.docs-nav-group.open > .docs-nav-group-btn { color: #e3ecfb; }
.docs-nav-group-count {
  font-size: 9.5px; font-weight: 700;
  color: var(--docs-navy-text-3);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 1px 6px;
  letter-spacing: .02em;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.docs-nav-group.open .docs-nav-group-count { color: #a9bcdc; }
.docs-nav-group.has-active > .docs-nav-group-btn { color: #fff; }
.docs-nav-group-links {
  display: none;
  padding: 2px 0 8px 8px;
  margin-left: 9px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.docs-nav-group.open > .docs-nav-group-links { display: block; }

/* Legacy nav-group, ng — map to new styles */
.nav-group, .ng { margin: 2px 10px; }
.nav-group-title, .nt, .side-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--docs-navy-text-2); font-weight: 750; padding: 8px 9px 5px; display: block;
}
.nav-group a, .ng a,
.sidebar a, aside:not(.docs-right-rail) a,
.docs-nav-link {
  display: block;
  color: var(--docs-navy-text);
  text-decoration: none;
  padding: 6px 10px 6px 11px;
  border-radius: var(--docs-radius-sm);
  font-size: 13px;
  line-height: 1.4;
  margin: 1px 0;
  transition: background var(--docs-transition), color var(--docs-transition);
  position: relative;
}
.nav-group a:hover, .ng a:hover,
.sidebar a:hover, aside:not(.docs-right-rail) a:hover,
.docs-nav-link:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
}
.nav-group a.active, .ng a.active,
.sidebar a.active, aside:not(.docs-right-rail) a.active,
.docs-nav-link.active {
  background: linear-gradient(90deg, rgba(37,99,235,.34), rgba(37,99,235,.08));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
/* Active accent bar */
.nav-group a.active::before,
.ng a.active::before,
.sidebar a.active::before,
aside:not(.docs-right-rail) a.active::before,
.docs-nav-link.active::before {
  content: '';
  position: absolute;
  left: -9px; top: 3px; bottom: 3px;
  width: 2.5px;
  border-radius: 99px;
  background: var(--docs-brand-3);
  box-shadow: 0 0 10px rgba(91,147,245,.7);
}
.docs-nav-group-links a.active::before { left: -9px; }
/* Numeração dos tópicos */
.sidebar a span, aside:not(.docs-right-rail) a span {
  color: var(--docs-navy-text-3);
  width: 24px; display: inline-block;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.sidebar a.active span, aside:not(.docs-right-rail) a.active span { color: #a9c6ff; }

/* Sidebar hidden-by-search state */
.docs-nav-group[hidden] { display: none !important; }
.docs-sidebar-noresult {
  margin: 14px 18px;
  padding: 12px 14px;
  border-radius: var(--docs-radius-sm);
  background: rgba(255,255,255,.05);
  color: var(--docs-navy-text-2);
  font-size: 12.5px;
  display: none;
}
.docs-sidebar-noresult.show { display: block; }

/* Side footer */
.side-footer {
  margin: 20px 18px 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--docs-navy-text-2);
  font-size: 11px;
}

/* Back-to-docs link in legacy sidebar */
.sg-home {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--docs-navy-text-2) !important;
  text-decoration: none !important;
  margin: 14px 16px 8px;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.sg-home:hover { color: #fff !important; }

/* Brand in sidebar */
.brand, .sidebar .brand, aside .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 750; font-size: 16px; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
  padding: 0 8px;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand span, .brand i { color: #93b4ea; font-style: normal; }
.sg-brand-word { color: inherit; }
.sub, .subtitle, .small, .brand small {
  display: block; font-size: 11px; color: var(--docs-navy-text-2);
  margin: 1px 0 0; font-weight: 400; padding: 0 8px;
}
.sg-brand-stack { min-width: 0; line-height: 1.15; }
.sg-brand-stack small {
  display: block; margin: 2px 0 0; font-size: 10px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--docs-navy-text-2);
}

/* ── 5. LAYOUT SHELL ──────────────────────────────────────── */
/* O shell dos manuais: sidebar fixo + folha de documento centrada + rail direito.
   Grelha com colunas-espaçador (1fr) para o conteúdo NÃO ficar preso à esquerda. */
body.sg-mod, body.sg-fin { padding-top: var(--docs-header-h); }

body.sg-mod main, body.sg-fin main, .docs-main {
  margin-left: var(--docs-sidebar-w);
  display: grid;
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, var(--docs-content-max))
    var(--docs-rail-w)
    minmax(24px, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--docs-header-h));
}
body.sg-mod main > *, body.sg-fin main > * { grid-column: 2; min-width: 0; }
body.sg-mod main > .docs-right-rail,
body.sg-fin main > .docs-right-rail { grid-column: 3; }

/* A folha de documento */
body.sg-mod main > .content,
body.sg-mod main > .wrap,
body.sg-fin main > .content,
body.sg-fin main > .wrap {
  max-width: none;
  margin: 26px 0 72px;
  padding: 0;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-lg);
  box-shadow: var(--docs-shadow-sheet);
  overflow: hidden;
}
/* Financeiro: capítulos são filhos directos de <main> — folha por capítulo */
body.sg-fin main > .chapter {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-lg);
  box-shadow: var(--docs-shadow-sheet);
  margin: 0 0 16px;
  overflow: hidden;
}
body.sg-fin main > .docs-masthead { margin-top: 26px; }
body.sg-fin main > .chapter:first-of-type { margin-top: 0; }

/* O rail é o elemento sticky (não o .docs-toc): como item de grelha com
   align-self:start a sua altura é a do conteúdo, logo sticky no filho não teria
   folga para se mover. */
.docs-right-rail {
  width: var(--docs-rail-w);
  padding: 26px 0 40px var(--docs-rail-gap);
  align-self: start;
  position: sticky;
  top: var(--docs-header-h);
  max-height: calc(100vh - var(--docs-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.docs-right-rail::-webkit-scrollbar { width: 8px; }
.docs-right-rail::-webkit-scrollbar-thumb {
  background: var(--docs-border-2); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* Legacy .main (mesmo elemento <main>) */
.main { min-width: 0; }
body.sg-fin .sidebar a { display: flex; align-items: center; gap: 10px; }
body.sg-fin .topbar .brand { display: flex; align-items: center; gap: 10px; }

/* ── 6. MOBILE BAR (legacy) ───────────────────────────────── */
.mobilebar, .mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--docs-header-h);
  z-index: 90;
  background: var(--docs-navy);
  color: #fff;
  padding: 0 14px;
  gap: 12px;
  align-items: center;
}
.mobilebar button, .mobile button,
.iconbtn.mobile-menu {
  border: 0;
  background: var(--docs-navy-3);
  color: #fff;
  border-radius: var(--docs-radius-sm);
  padding: 7px 11px;
  cursor: pointer;
}

/* ── 7. MODULE MASTHEAD (compact) ─────────────────────────── */
.docs-masthead {
  padding: 22px var(--docs-sheet-pad) 18px;
  border-bottom: 1px solid var(--docs-hairline);
  background: linear-gradient(180deg, var(--docs-surface-muted), var(--docs-surface));
}
.docs-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--docs-text-faint);
  margin-bottom: 14px;
  min-height: 18px;
}
.docs-breadcrumb a { color: var(--docs-text-faint); }
.docs-breadcrumb a:hover { color: var(--docs-brand); text-decoration: none; }
.docs-breadcrumb svg { width: 11px; height: 11px; opacity: .6; flex: 0 0 auto; }
.docs-breadcrumb-current { color: var(--docs-text-muted); font-weight: 650; }
.docs-breadcrumb-current:empty { display: none; }
.docs-breadcrumb-current:empty + svg { display: none; }
.docs-module-head {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 0;
  background: none;
  border: 0;
  margin: 0;
}
.docs-module-head-ico {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--docs-accent-soft), #ffe9d2);
  box-shadow: inset 0 0 0 1px rgba(245,130,32,.2);
  display: grid; place-items: center;
  flex: 0 0 auto;
  color: var(--docs-accent-2);
}
.docs-module-head-ico svg { width: 23px; height: 23px; }
.docs-module-head-body { flex: 1; min-width: 0; }
.docs-module-head-tag {
  font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--docs-accent-2); display: block; margin-bottom: 4px;
}
.docs-module-head-title {
  font-size: 25px; font-weight: 780; letter-spacing: -.025em;
  color: var(--docs-text); margin: 0 0 3px; line-height: 1.16;
}
.docs-module-head-sub {
  font-size: 14px; color: var(--docs-text-muted); margin: 0;
}
.docs-module-head-meta {
  font-size: 11px; color: var(--docs-text-faint);
  margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap;
}
.docs-module-head-meta span {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 650;
  letter-spacing: .03em;
}

/* ── 8. HERO (homepage only — keep expressive) ────────────── */
.hero, .hero-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(245,130,32,.3), transparent 34%),
    linear-gradient(135deg, #0a2560 0%, var(--docs-brand) 56%, #2563eb 100%);
  color: #fff;
  padding: 52px 40px 46px;
  position: relative; overflow: hidden;
}
.hero-card { border-radius: var(--docs-radius-md); padding: 26px 28px; margin-bottom: 8px; }
.hero .kicker, .hero .k, .hero-card .eyebrow, .kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #b9d0ff; font-weight: 750;
}
.hero h1, .hero-card h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1; letter-spacing: -.035em;
  margin: 10px 0 12px; max-width: 800px; color: #fff;
}
.hero p, .hero-card .lead, .hero-card p.lead {
  margin: 0; max-width: 660px; color: #dce8ff; font-size: 16px;
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.badge {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.11);
  border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(4px);
}
.badge svg { width: 12px; height: 12px; opacity: .9; }
.hero-actions { display: flex; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }

/* Hide big hero in manuals. The hero stays only on the homepage (index.html). */
body.sg-mod header.hero,
body.sg-mod .hero,
body.sg-mod .hero-card,
body.sg-fin header.hero,
body.sg-fin .hero,
body.sg-fin .hero-card {
  display: none !important;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--docs-radius-sm); padding: 8px 12px;
  color: #fff; font-weight: 700; font-size: 13px;
}
.btn.primary { background: #fff; color: var(--docs-brand); border-color: #fff; }

/* ── 9. CONTENT & WRAP ────────────────────────────────────── */
.content, .wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.docs-prose { max-width: var(--docs-content-max); }

/* ── 10. CHAPTERS ─────────────────────────────────────────── */
.intro, .scope {
  background: var(--docs-info-soft);
  border: 1px solid #dbe6f8;
  border-left: 3px solid var(--docs-brand);
  padding: 14px 16px;
  border-radius: 0 var(--docs-radius-md) var(--docs-radius-md) 0;
  margin: 22px var(--docs-sheet-pad) 0;
  color: #384861;
  font-size: 14px;
}
.intro p:first-child, .scope p:first-child { margin-top: 0; }
.intro p:last-child, .scope p:last-child { margin-bottom: 0; }

/* Capítulo = bloco de documento (sem aspecto de card independente) */
.chapter {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--docs-hairline);
  border-radius: 0;
  padding: 34px var(--docs-sheet-pad) 30px;
  margin: 0;
  box-shadow: none;
  scroll-margin-top: calc(var(--docs-header-h) + 18px);
}
.chapter:last-child { border-bottom: 0; }
body.sg-fin .chapter { padding: 0; overflow: hidden; border-bottom: 0; }
.chapter-head {
  padding: 26px var(--docs-sheet-pad) 18px;
  border-bottom: 1px solid var(--docs-hairline);
  background: linear-gradient(180deg, var(--docs-surface-muted), var(--docs-surface));
}
.chapter-head h1 { margin: 5px 0 6px; font-size: 23px; letter-spacing: -.025em; }
.chapter-head p { margin: 0; color: var(--docs-text-muted); }
.chapter-body { padding: 26px var(--docs-sheet-pad) 30px; }

/* Eyebrow como chip discreto */
.chapter-no, .eyebrow, .eye {
  display: inline-block;
  font-size: 10px; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--docs-brand);
  background: var(--docs-brand-soft);
  border-radius: 999px;
  padding: 2.5px 9px;
  margin-bottom: 9px;
  box-shadow: inset 0 0 0 1px rgba(30,79,163,.1);
}
.hero .kicker, .hero .k { background: none; box-shadow: none; padding: 0; }

h1 { font-size: 27px; line-height: 1.18; letter-spacing: -.025em; margin: 0 0 14px; }
h2 {
  font-size: 20px; line-height: 1.28; letter-spacing: -.02em;
  margin: 4px 0 12px; font-weight: 750;
  scroll-margin-top: calc(var(--docs-header-h) + 18px);
}
.chapter-body h2 { font-size: 17.5px; margin: 26px 0 9px; }
.chapter-body h2:first-child { margin-top: 0; }
h3 {
  font-size: 15.5px; margin: 22px 0 8px; font-weight: 720;
  scroll-margin-top: calc(var(--docs-header-h) + 18px);
}
h4 {
  font-size: 14px; margin: 16px 0 6px; font-weight: 720; color: var(--docs-text-2);
  scroll-margin-top: calc(var(--docs-header-h) + 18px);
}
p { margin: 8px 0 12px; color: var(--docs-text-2); }
ul, ol { padding-left: 22px; color: var(--docs-text-2); }
li { margin: 5px 0; }
li::marker { color: var(--docs-text-faint); }
strong { color: var(--docs-text); font-weight: 700; }
code, kbd.inline {
  font-family: "Cascadia Code", "Consolas", monospace;
  background: var(--docs-surface-muted);
  border: 1px solid var(--docs-border);
  border-radius: 5px;
  padding: 1.5px 5px;
  font-size: .88em;
  color: #2c3a52;
}

/* Âncora de secção (interactividade discreta) */
.docs-anchor {
  opacity: 0;
  margin-left: 8px;
  color: var(--docs-text-faint) !important;
  font-weight: 400;
  text-decoration: none !important;
  transition: opacity var(--docs-transition), color var(--docs-transition);
  vertical-align: middle;
}
.docs-anchor svg { width: 14px; height: 14px; display: inline-block; }
h2:hover .docs-anchor, h3:hover .docs-anchor, .docs-anchor:focus-visible { opacity: 1; }
.docs-anchor:hover { color: var(--docs-brand) !important; }
@media (hover: none) { .docs-anchor { display: none; } }

/* Flash ao chegar por deep link */
@keyframes docsTargetFlash {
  0%   { background: rgba(245,130,32,.16); }
  100% { background: transparent; }
}
.docs-target-flash { animation: docsTargetFlash 1.4s ease-out; border-radius: var(--docs-radius-sm); }

/* ── 11. CALLOUTS ─────────────────────────────────────────── */
.callout, .tip, .warning, .note, .callout.info {
  position: relative;
  border-radius: var(--docs-radius-md);
  padding: 13px 16px 13px 46px;
  margin: 16px 0;
  border: 1px solid #dbe6f8;
  border-left: 3px solid var(--docs-brand);
  background: var(--docs-info-soft);
  color: #364559;
  font-size: 14.2px;
  background-image: var(--docs-ico-info);
  background-repeat: no-repeat;
  background-position: 16px 15px;
  background-size: 17px 17px;
}
.callout p, .tip p, .warning p, .note p { margin: 6px 0; }
.callout p:first-child, .tip p:first-child, .warning p:first-child, .note p:first-child { margin-top: 0; }
.callout p:last-child, .tip p:last-child, .warning p:last-child, .note p:last-child { margin-bottom: 0; }
.callout b, .callout strong, .tip strong, .warning strong { display: inline; color: var(--docs-text); }
.callout ul, .tip ul, .warning ul, .note ul { margin: 6px 0; }

.tip, .callout.tip {
  background-color: var(--docs-success-soft);
  border-color: #cfeadf;
  border-left-color: var(--docs-success);
  background-image: var(--docs-ico-tip);
}
.warning, .callout.warning {
  background-color: var(--docs-warning-soft);
  border-color: #f5e3c6;
  border-left-color: var(--docs-warning);
  background-image: var(--docs-ico-warning);
}
.callout.danger, .danger.callout {
  background-color: var(--docs-danger-soft);
  border-color: #f7d7d4;
  border-left-color: var(--docs-danger);
  background-image: var(--docs-ico-danger);
}
.note {
  background-color: #f6f8fa;
  border-color: #e3e8ef;
  border-left-color: #7d8797;
  background-image: var(--docs-ico-note);
}

/* ── 12. TABLES ───────────────────────────────────────────── */
.docs-table-wrap {
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
  scrollbar-width: thin;
}
.docs-table-wrap::-webkit-scrollbar { height: 9px; }
.docs-table-wrap::-webkit-scrollbar-thumb { background: var(--docs-border-2); border-radius: 99px; }
.docs-table-wrap > .guide-table,
.docs-table-wrap > .tbl,
.docs-table-wrap > table {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 100%;
}
.guide-table, .tbl, table.guide-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  font-size: 13.5px;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  overflow: hidden;
}
.guide-table th, .guide-table td,
.tbl th, .tbl td {
  border: 0;
  border-bottom: 1px solid var(--docs-hairline);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.guide-table th, .tbl th {
  background: #f4f7fc;
  font-weight: 750;
  color: var(--docs-text);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--docs-border);
  position: sticky; top: 0; z-index: 1;
}
.guide-table tbody tr:last-child td, .tbl tbody tr:last-child td { border-bottom: 0; }
.guide-table tbody tr:nth-child(even) td, .tbl tbody tr:nth-child(even) td { background: #fbfcfe; }
.guide-table tbody tr:hover td, .tbl tbody tr:hover td { background: var(--docs-brand-soft); }
.guide-table tbody td:first-child, .tbl tbody td:first-child { font-weight: 650; color: var(--docs-text); }

/* ── 13. CHAPTER FOOT ─────────────────────────────────────── */
/* Chrome legado por capítulo (nome do módulo + "Voltar ao topo"): já existe
   masthead, progresso e botão flutuante globais. Fica no DOM para não perder
   nada, mas sai do ecrã e da impressão. */
.chapter-foot, .foot { display: none; }

/* ── 14. PREVIOUS / NEXT ──────────────────────────────────── */
.docs-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--docs-hairline);
  align-items: stretch;
}
.docs-prevnext-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  background: var(--docs-surface);
  color: var(--docs-text);
  text-decoration: none;
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), transform var(--docs-transition);
}
.docs-prevnext-btn:hover {
  border-color: var(--docs-brand-3);
  box-shadow: var(--docs-shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}
.docs-prevnext-btn svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--docs-text-faint); }
.docs-prevnext-btn:hover svg { color: var(--docs-brand); }
.docs-prevnext-btn.next { text-align: right; flex-direction: row-reverse; }
.docs-prevnext-block { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.docs-prevnext-label {
  font-size: 10px; color: var(--docs-text-faint); display: block; margin-bottom: 3px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.docs-prevnext-title { font-size: 14px; font-weight: 700; display: block; color: var(--docs-text); line-height: 1.35; }
.docs-prevnext-btn:hover .docs-prevnext-title { color: var(--docs-brand); }
.docs-prevnext-empty { display: block; }

/* ── 15. RIGHT RAIL (On this page) ───────────────────────── */
.docs-toc {
  border-left: 1px solid var(--docs-border);
  padding-left: 18px;
  scrollbar-width: thin;
}
.docs-toc-position {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--docs-text-faint);
  margin-bottom: 14px;
}
.docs-toc-position-bar {
  flex: 1; height: 3px; border-radius: 99px;
  background: var(--docs-border);
  overflow: hidden;
}
.docs-toc-position-fill {
  height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--docs-brand), var(--docs-brand-3));
  transition: width .2s ease;
}
.docs-toc-title {
  font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--docs-text-faint); margin-bottom: 10px;
}
.docs-toc-list { list-style: none; padding: 0; margin: 0; }
.docs-toc-link {
  display: block; font-size: 12.5px; color: var(--docs-text-muted);
  padding: 4px 0 4px 12px;
  margin-left: -19px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color var(--docs-transition), border-color var(--docs-transition);
  line-height: 1.45;
}
.docs-toc-link:hover { color: var(--docs-brand); border-left-color: var(--docs-border-2); text-decoration: none; }
.docs-toc-link.active { color: var(--docs-brand); border-left-color: var(--docs-brand); font-weight: 700; }
.docs-toc-link.docs-toc-h4 { padding-left: 24px; font-size: 12px; }
.docs-toc-empty { font-size: 12.5px; color: var(--docs-text-faint); }

/* ── 16. PROGRESS + BACK TO TOP ───────────────────────────── */
.docs-progress {
  font-size: 11px; color: var(--docs-text-faint);
  padding: 6px 32px 0;
  max-width: calc(var(--docs-content-max) + 64px);
}
.docs-top-btn {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--docs-border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  color: var(--docs-text-2);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--docs-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--docs-transition), transform var(--docs-transition), visibility var(--docs-transition), border-color var(--docs-transition);
  z-index: 60;
}
.docs-top-btn.show { opacity: 1; visibility: visible; transform: none; }
.docs-top-btn:hover { border-color: var(--docs-brand-3); color: var(--docs-brand); }
.docs-top-btn svg { width: 17px; height: 17px; }

/* ── 17. EMPTY / NO RESULTS ──────────────────────────────── */
.empty, .no-results {
  display: none;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  padding: 28px; text-align: center;
  color: var(--docs-text-muted); margin: 20px 0;
}

/* ── 18. GRID & CARDS ────────────────────────────────────── */
.grid { display: grid; gap: 12px; margin: 16px 0; }
.grid.two, .quick-grid, .module-grid, .role-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mini-card, .feature, .quick-card, .module, .role {
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md);
  padding: 15px 16px 14px;
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
}
.mini-card h3, .mini-card h4, .feature h3, .feature h4 { margin-top: 0; }
.quick-card:hover, .module:hover {
  border-color: var(--docs-border-2);
  box-shadow: var(--docs-shadow-md);
  text-decoration: none;
}
.module h3 { margin: 0 0 5px; font-size: 15.5px; color: var(--docs-text); }
.module p, .feature p { margin: 0; color: var(--docs-text-muted); font-size: 13.5px; }
.module .tag {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--docs-brand); font-weight: 750; display: block; margin-bottom: 4px;
}

/* ── 19. STEPS ───────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 14px 0; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 30px 1fr;
  column-gap: 13px; padding: 10px 0;
  border-bottom: 1px solid var(--docs-hairline);
}
ol.steps li:last-child { border-bottom: 0; }
ol.steps li:before {
  content: counter(step);
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--docs-brand-soft); color: var(--docs-brand);
  display: grid; place-items: center; font-weight: 750; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(30,79,163,.12);
}
.step {
  display: grid; grid-template-columns: 34px 1fr; gap: 13px;
  border: 1px solid var(--docs-border); border-radius: var(--docs-radius-md);
  padding: 13px; margin: 9px 0;
  background: var(--docs-surface);
}
.step .badge, .step .n {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--docs-brand-soft); color: var(--docs-brand);
  display: grid; place-items: center; font-weight: 750;
  border: 0;
}

/* ── 20. MISC LAYOUT ─────────────────────────────────────── */
.flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; align-items: stretch; }
.flow > div {
  min-width: 130px; flex: 1;
  border: 1px solid var(--docs-border); border-radius: var(--docs-radius-md);
  padding: 12px; background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
}
.flow span { display: block; }
.checklist { list-style: none; padding-left: 0; }
.checklist.grid, div.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.glossary { display: grid; grid-template-columns: 190px 1fr; gap: 0; }
.glossary dt, .glossary dd { padding: 9px 0; border-bottom: 1px solid var(--docs-hairline); margin: 0; }
dt { font-weight: 750; margin-top: 9px; }
dd { margin-left: 0; color: var(--docs-text-muted); }

.section-divider {
  margin: 30px 0 16px; padding: 18px 22px; border-radius: var(--docs-radius-md); color: #fff;
  background: linear-gradient(135deg, var(--docs-brand), #1545c5);
  box-shadow: var(--docs-shadow-md);
}
.section-divider.cbl { background: linear-gradient(135deg, #075d55, #0b8b7a); }
.section-divider h2 { margin: 0; font-size: 19px; color: #fff; }
.section-divider p { margin: 5px 0 0; color: rgba(255,255,255,.86); }

mark, .highlight { background: #ffe08a; color: var(--docs-text); border-radius: 2px; padding: 0 2px; }

/* ── 21. COMMAND PALETTE ─────────────────────────────────── */
.sg-kbar {
  position: fixed; inset: 0;
  background: rgba(10,18,32,.5);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 200;
  padding: 10vh 16px 16px;
}
.sg-kbar.open { display: block; }
.sg-kbar-panel {
  max-width: 640px; margin: 0 auto;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-lg);
  box-shadow: var(--docs-shadow-lg);
  overflow: hidden;
  animation: docsPop .16s ease;
}
.sg-kbar-head { padding: 12px 14px; border-bottom: 1px solid var(--docs-border); display: flex; align-items: center; gap: 10px; }
.sg-kbar-head svg { width: 17px; height: 17px; color: var(--docs-text-faint); flex: 0 0 auto; }
.sg-kbar-head input {
  flex: 1; border: 0; outline: 0; font-size: 15.5px; color: var(--docs-text); background: none;
  min-width: 0;
}
.sg-kbar-head input::-webkit-search-cancel-button { display: none; }
.sg-kbar-head kbd {
  flex: 0 0 auto;
  border: 1px solid var(--docs-border-2); background: var(--docs-surface-muted);
  border-radius: 4px; padding: 2px 6px; font-size: 10px; color: var(--docs-text-faint);
  font-family: inherit; letter-spacing: .02em;
}
.sg-kbar-scope { display: flex; gap: 5px; padding: 9px 14px 0; }
.sg-kbar-chip {
  font-size: 11.5px; font-weight: 650;
  border: 1px solid var(--docs-border); background: var(--docs-surface-muted);
  color: var(--docs-text-muted);
  border-radius: 999px; padding: 3px 11px; cursor: pointer;
}
.sg-kbar-chip.active { background: var(--docs-brand-soft); border-color: var(--docs-brand-soft-2); color: var(--docs-brand); }
.sg-kbar-list { max-height: 56vh; overflow-y: auto; padding: 8px; }
.sg-kbar-item {
  display: block; padding: 9px 11px; border-radius: var(--docs-radius-sm);
  color: inherit; text-decoration: none;
}
.sg-kbar-item:hover, .sg-kbar-item.active { background: var(--docs-brand-soft); text-decoration: none; }
.sg-kbar-item b { display: block; font-size: 14px; color: var(--docs-text); }
.sg-kbar-item small {
  color: var(--docs-text-muted); font-size: 12px; display: block;
  line-height: 1.5; max-height: 2.95em; overflow: hidden;
}
/* Realce do termo: nunca o amarelo default do browser. */
.sg-kbar-item mark {
  background: var(--docs-brand-soft); color: var(--docs-brand);
  font-weight: 650; border-radius: 3px; padding: 0 1px;
}
.sg-kbar-item:hover mark, .sg-kbar-item.active mark { background: #fff; }
.sg-kbar-item .sg-kbar-mod {
  font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--docs-brand); margin-bottom: 2px; display: block;
}
.sg-kbar-empty { padding: 28px 18px; text-align: center; color: var(--docs-text-muted); }
.sg-kbar-foot {
  padding: 8px 14px; font-size: 11px; color: var(--docs-text-faint);
  border-top: 1px solid var(--docs-border); background: var(--docs-surface-muted);
  display: flex; align-items: center; gap: 14px;
}
.sg-kbar-foot span { display: inline-flex; align-items: center; gap: 4px; }
.sg-kbar-foot kbd {
  border: 1px solid var(--docs-border-2); background: var(--docs-surface);
  border-radius: 3px; padding: 1px 5px; font-size: 10px; color: var(--docs-text-faint);
  font-family: inherit;
}

/* ── 22. HUB (index.html) ────────────────────────────────── */
.sg-hub { background: var(--docs-bg); padding-top: var(--docs-header-h); }
.sg-hub .hero { padding: 56px 40px 50px; }
.sg-hub .hero::after {
  content: '';
  position: absolute; right: -56px; bottom: -110px;
  width: 360px; height: 360px;
  background: url('logo.ico') center / contain no-repeat;
  opacity: .1; pointer-events: none;
}
.sg-hero-inner {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 44px; align-items: center;
  max-width: 1160px; margin: 0 auto;
  position: relative; z-index: 1;
}
.sg-cover-logo {
  width: 168px;
  background: #fff; border-radius: var(--docs-radius-md);
  padding: 11px 13px;
  box-shadow: 0 18px 44px rgba(8,20,50,.26);
  display: block;
}
.sg-hub .hero .sg-hub-search { margin-top: 24px; max-width: 560px; position: relative; }
.sg-hub .hero .sg-search-ico {
  position: absolute; left: 16px; top: 15px;
  width: 18px; height: 18px; color: #7a8495; pointer-events: none;
}
.sg-hub .hero .sg-hub-search input {
  width: 100%; height: 48px; border: 0; border-radius: 999px;
  padding: 0 18px 0 44px; font-size: 15px; color: var(--docs-text);
  box-shadow: 0 14px 36px rgba(8,20,50,.22);
}
.sg-hub .hero .sg-hub-search input:focus { outline: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 14px 36px rgba(8,20,50,.22); }
.sg-hub .hero .badges { margin-top: 20px; }

.sg-hub main { padding: 0 24px; }
.sg-hub .content {
  padding: 8px 0 72px;
  max-width: 1160px;
  margin: 0 auto;
  background: none; border: 0; box-shadow: none;
}
.sg-hub .sg-section-label {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 780; color: var(--docs-text-muted); margin: 34px 0 13px;
  display: flex; align-items: center; gap: 10px;
}
.sg-hub .sg-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--docs-border);
}

/* Quick tasks */
.sg-hub .sg-start { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0; }
.sg-hub .sg-start a {
  display: flex; align-items: center; gap: 12px;
  background: var(--docs-surface); border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-md); padding: 13px 15px;
  color: var(--docs-text); font-size: 14px;
  box-shadow: var(--docs-shadow-sm);
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), transform var(--docs-transition);
}
.sg-hub .sg-start a:hover {
  border-color: var(--docs-brand-3); box-shadow: var(--docs-shadow-md);
  transform: translateY(-2px); text-decoration: none;
}
.sg-hub .sg-start a .sg-start-copy { min-width: 0; }
.sg-hub .sg-start a .sg-start-copy > span {
  display: block; font-weight: 400; color: var(--docs-text-muted); font-size: 12.5px; margin-top: 1px;
}
.sg-hub .sg-start a b { display: block; font-weight: 700; color: var(--docs-text); }
.sg-hub .sg-foot {
  margin: 42px 0 12px; color: var(--docs-text-muted); font-size: 13px;
  padding-top: 20px; border-top: 1px solid var(--docs-border);
}
.sg-count { font-variant-numeric: tabular-nums; color: #93b4ea; font-size: 12px; }

/* Icon tiles */
.sg-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--docs-brand-soft); color: var(--docs-brand);
  box-shadow: inset 0 0 0 1px rgba(30,79,163,.08);
}
.sg-ico svg { width: 19px; height: 19px; display: block; }
.sg-ico--start  { background: var(--docs-accent-soft); color: var(--docs-accent-2); box-shadow: inset 0 0 0 1px rgba(245,130,32,.16); }
.sg-ico--key    { background: #eef2ff; color: #4338ca; box-shadow: inset 0 0 0 1px rgba(67,56,202,.12); }
.sg-ico--stock  { background: #e8f6f9; color: #0e7490; box-shadow: inset 0 0 0 1px rgba(14,116,144,.12); }
.sg-ico--cash   { background: var(--docs-success-soft); color: var(--docs-success); box-shadow: inset 0 0 0 1px rgba(22,131,95,.14); }
.sg-ico--truck  { background: #f4effc; color: #6d28d9; box-shadow: inset 0 0 0 1px rgba(109,40,217,.12); }
.sg-ico--rocket { background: var(--docs-accent-soft); color: var(--docs-accent-2); box-shadow: inset 0 0 0 1px rgba(245,130,32,.16); }
.sg-ico--fin    { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px rgba(6,95,70,.12); }

/* Module cards */
.sg-hub .sg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.sg-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-lg);
  padding: 18px 18px 15px;
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), transform var(--docs-transition);
}
.sg-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--docs-brand), var(--docs-brand-3));
  opacity: 0;
  transition: opacity var(--docs-transition);
}
.sg-card:hover {
  border-color: var(--docs-border-2);
  box-shadow: var(--docs-shadow-md);
  transform: translateY(-3px);
}
.sg-card:hover::before { opacity: 1; }
.sg-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.sg-card-head .tag { margin: 0; }
.sg-card .tag {
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--docs-text-faint); font-weight: 750; display: block;
}
.sg-card-topics {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  color: var(--docs-text-faint);
  background: var(--docs-surface-muted);
  border: 1px solid var(--docs-border);
  border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sg-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.02em; }
.sg-card h3 a { color: var(--docs-text); text-decoration: none; }
.sg-card:hover h3 a { color: var(--docs-brand); }
.sg-card > p { margin: 0; color: var(--docs-text-muted); font-size: 13.5px; }
.sg-card-popular {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--docs-hairline);
}
.sg-card-popular-label {
  font-size: 9.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase;
  color: var(--docs-text-faint); margin-bottom: 6px; display: block;
}
.sg-card-popular a {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--docs-text-2); padding: 3.5px 0;
  border-radius: 4px;
}
.sg-card-popular a:hover { color: var(--docs-brand); text-decoration: none; }
.sg-card-popular a svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--docs-text-faint); transition: transform var(--docs-transition); }
.sg-card-popular a:hover svg { color: var(--docs-brand); transform: translateX(2px); }
.sg-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--docs-brand);
  margin-top: auto; padding-top: 14px;
}
.sg-card-cta svg { width: 14px; height: 14px; transition: transform var(--docs-transition); }
.sg-card:hover .sg-card-cta svg { transform: translateX(3px); }

/* Recently viewed */
.docs-recent { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0; }
.docs-recent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: var(--docs-radius-md);
  color: var(--docs-text);
  text-decoration: none;
  font-size: 13.5px;
  border: 1px solid var(--docs-border);
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition), transform var(--docs-transition);
}
.docs-recent-item:hover {
  border-color: var(--docs-brand-3); text-decoration: none;
  box-shadow: var(--docs-shadow-md); transform: translateY(-2px);
}
.docs-recent-item svg { width: 15px; height: 15px; color: var(--docs-text-faint); flex: 0 0 auto; }
.docs-recent-item > span { min-width: 0; }
.docs-recent-mod {
  font-size: 10px; color: var(--docs-text-faint); display: block;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}

/* Guided journeys */
.docs-journeys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.docs-journey {
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius-lg);
  padding: 16px 18px;
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow-sm);
  margin: 0;
  transition: border-color var(--docs-transition), box-shadow var(--docs-transition);
}
.docs-journey:hover { border-color: var(--docs-border-2); box-shadow: var(--docs-shadow-md); }
.docs-journey-title {
  font-weight: 750; font-size: 14.5px; color: var(--docs-text); margin-bottom: 11px;
  letter-spacing: -.01em;
}
.docs-journey-steps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.docs-journey-step { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--docs-text-muted); }
.docs-journey-step a {
  color: var(--docs-text-2); font-weight: 650; text-decoration: none;
  background: var(--docs-surface-muted);
  border: 1px solid var(--docs-border);
  border-radius: 999px;
  padding: 3px 11px;
  transition: background var(--docs-transition), color var(--docs-transition), border-color var(--docs-transition);
}
.docs-journey-step a:hover {
  text-decoration: none; color: var(--docs-brand);
  background: var(--docs-brand-soft); border-color: var(--docs-brand-soft-2);
}
.docs-journey-step svg { width: 12px; height: 12px; color: var(--docs-text-faint); flex: 0 0 auto; }

/* ── 23. BRAND ELEMENTS ──────────────────────────────────── */
.sg-logo {
  width: 32px; height: 32px;
  border-radius: var(--docs-radius-sm);
  object-fit: contain;
  background: #fff; padding: 3px;
  flex: 0 0 auto; display: block;
}
.brandmark {
  width: 34px; height: 34px; border-radius: var(--docs-radius-sm);
  background: #fff;
  display: grid; place-items: center; color: var(--docs-brand);
  font-weight: 800; font-size: 14px;
  overflow: hidden; flex: 0 0 auto; padding: 0;
}
.brandmark .sg-logo { width: 30px; height: 30px; padding: 2px; border-radius: 5px; }
.iconbtn {
  border: 1px solid var(--docs-border);
  background: var(--docs-surface);
  border-radius: var(--docs-radius-sm);
  padding: 6px 10px; cursor: pointer; color: var(--docs-text-2);
}

/* ── 24. RESPONSIVE ──────────────────────────────────────── */
/* Rail só quando há espaço real para ele */
@media (max-width: 1400px) {
  body.sg-mod main, body.sg-fin main, .docs-main {
    grid-template-columns: minmax(24px, 1fr) minmax(0, var(--docs-content-max)) minmax(24px, 1fr);
  }
  .docs-right-rail { display: none; }
}
@media (max-width: 1200px) {
  .sg-hub .sg-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sg-hub .sg-start { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .docs-recent { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1080px) {
  :root { --docs-sheet-pad: 32px; }
}
@media (max-width: 991px) {
  .sidebar, aside:not(.docs-right-rail) {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: min(320px, 88vw);
    box-shadow: 20px 0 48px rgba(15,23,42,.26);
    /* Começa abaixo do header: o header continua visível e o seu botão fecha o drawer. */
    top: var(--docs-header-h) !important;
    height: calc(100vh - var(--docs-header-h));
  }
  .sidebar.open, aside:not(.docs-right-rail).open,
  body.menu-open .sidebar,
  body.menu-open aside:not(.docs-right-rail) { transform: none; }
  body.sg-mod main, body.sg-fin main, .docs-main {
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 14px;
  }
  body.sg-mod main > .content,
  body.sg-mod main > .wrap,
  body.sg-fin main > .content,
  body.sg-fin main > .wrap { margin: 14px 0 48px; border-radius: var(--docs-radius-md); }
  body.sg-fin main > .chapter { border-radius: var(--docs-radius-md); }
  .hero { padding: 34px 20px 30px; }
  .content, .wrap { padding: 18px 16px 56px; }
  .grid.two, .quick-grid, .module-grid, .role-grid,
  .checklist.grid, div.checklist { grid-template-columns: 1fr; }
  .glossary { grid-template-columns: 1fr; }
  .topbar .brand small, .topbar kbd, .print-text { display: none; }
  body.sg-fin .sidebar { top: 0; }
  .sg-hub .sg-hub-hint { display: none; }
  .sg-hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .sg-cover-logo { width: 120px; }
  /* A .mobilebar legada fica escondida: o header universal passa a ter o menu. */
  .mobilebar, .mobile { display: none; }
  .docs-header-menu-btn { display: inline-flex; }
  .docs-header-brand { border-right: 0; padding-right: 0; }
  .docs-header-brand small { display: none; }
  /* Pesquisa colapsa para ícone; sem o rótulo a transbordar o header. */
  .docs-header-search { flex: 0 0 auto; max-width: none; margin-left: auto; }
  .docs-header-search-btn { width: 38px; padding: 0; justify-content: center; }
  .docs-header-search-btn span, .docs-header-search-btn kbd { display: none; }

  /* Scrim do drawer — abaixo do header para o botão de menu continuar a fechar. */
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: var(--docs-header-h) 0 0 0;
    background: rgba(10,18,32,.5);
    z-index: 95;
  }
  .sidebar, aside:not(.docs-right-rail) { z-index: 96; }

  /* Paleta ocupa quase todo o ecrã em telefone */
  .sg-kbar { padding: 8px; }
  .sg-kbar-panel { max-width: none; }
  .sg-kbar-list { max-height: 62vh; }
}
@media (max-width: 760px) {
  :root { --docs-sheet-pad: 20px; }
  .docs-prevnext { grid-template-columns: 1fr; }
  .sg-hub .sg-start,
  .sg-hub .sg-card-grid,
  .docs-recent,
  .docs-journeys-grid { grid-template-columns: 1fr; }
  .sg-hub .hero { padding: 34px 20px 30px; }
  .sg-hub main { padding: 0 14px; }
  .docs-mod-btn span { display: none; }
  .docs-module-head-title { font-size: 21px; }
  .docs-module-head-ico { width: 40px; height: 40px; }
  .guide-table th { position: static; }
}

/* ── 25. PRINT ───────────────────────────────────────────── */
@media print {
  .sidebar, aside, .topbar, .mobilebar, .mobile,
  .chapter-foot, .foot, .sg-kbar, .sg-home,
  .docs-header, .docs-prevnext, .docs-right-rail,
  .docs-breadcrumb, .docs-progress, .docs-progress-bar,
  .docs-top-btn, .docs-anchor,
  .sg-hub .hero::after { display: none !important; }
  body { background: #fff; padding-top: 0; }
  body.sg-mod main, body.sg-fin main, .docs-main {
    margin: 0; padding: 0; display: block; min-height: 0;
  }
  body.sg-mod main > .content,
  body.sg-mod main > .wrap,
  body.sg-fin main > .content,
  body.sg-fin main > .wrap,
  body.sg-fin main > .chapter {
    margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .docs-masthead { background: #fff; border-bottom: 2px solid #111; padding: 0 0 10px; }
  .hero, .hero-card { background: #fff !important; color: #111; padding: 10px 0; border-bottom: 2px solid #111; }
  .hero p, .hero-card .lead { color: #333; }
  .sg-cover-logo { width: 110px; box-shadow: none; }
  .chapter {
    box-shadow: none; border: 0;
    border-bottom: 1px solid #ddd; border-radius: 0;
    padding: 14px 0;
    break-inside: avoid;
  }
  .guide-table, .tbl { box-shadow: none; }
  .guide-table th, .tbl th { position: static; }
  .docs-table-wrap { border: 0; box-shadow: none; overflow: visible; }
  a[href]::after { content: '' !important; }
}