/* ══════════════════════════════════════════════════════════════
   Sialia · Guia do Sistema — folha de estilo única
   Portada do index.html original (Tailwind CDN) para CSS próprio:
   mesmas cores, raios e sombras, sem compilar nada no navegador.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-200:#BFDBFE; --brand-300:#93C5FD;
  --brand-400:#60A5FA; --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8;
  --brand-800:#1E40AF; --brand-900:#1E3A8A;

  --warm-50:#FFFBEB; --warm-100:#FEF3C7; --warm-200:#FDE68A; --warm-400:#FBBF24;
  --warm-600:#D97706; --warm-700:#B45309; --warm-900:#78350F;

  --green-50:#ECFDF5; --green-100:#D1FAE5; --green-200:#A7F3D0; --green-400:#34D399;
  --green-600:#059669; --green-700:#047857; --green-900:#064E3B;

  --red-50:#FEF2F2; --red-100:#FEE2E2; --red-200:#FECACA; --red-400:#F87171;
  --red-600:#DC2626; --red-700:#B91C1C; --red-900:#7F1D1D;

  --info-50:#F0F9FF; --info-100:#E0F2FE; --info-400:#38BDF8; --info-600:#0284C7; --info-900:#0C4A6E;

  --violet-50:#F5F3FF; --violet-100:#EDE9FE; --violet-400:#A78BFA; --violet-600:#7C3AED; --violet-900:#4C1D95;

  /* Neutros */
  --ink:#0F172A; --gray-900:#111827; --gray-800:#1F2937; --gray-700:#374151; --gray-600:#475569;
  --gray-500:#64748B; --gray-400:#94A3B8; --gray-300:#CBD5E1; --gray-200:#E2E8F0;
  --gray-100:#F1F5F9; --gray-50:#F8FAFC; --white:#FFFFFF;

  --radius:14px; --radius-lg:20px; --radius-xl:24px;
  --shadow:0 1px 3px rgba(15,23,42,.05), 0 6px 24px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.07), 0 20px 48px rgba(15,23,42,.06);
  --sidebar-w:264px;
  --font:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }

body {
  font-family:var(--font);
  background:var(--white);
  color:var(--gray-700);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

a { color:var(--brand-700); text-decoration:none; }
a:hover { text-decoration:underline; }
strong { color:var(--gray-900); font-weight:700; }
code {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.86em; background:var(--gray-100); color:var(--brand-800);
  padding:.12em .4em; border-radius:6px;
}

/* ─────────────────────────── Layout ─────────────────────────── */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--white); border-right:1px solid var(--gray-200);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; padding:20px 14px 16px;
  z-index:40;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:0 8px 18px; margin-bottom:6px;
  border-bottom:1px solid var(--gray-100);
}
.sidebar-brand:hover { text-decoration:none; }
.sidebar-brand-name { font-weight:800; font-size:1.05rem; color:var(--gray-900); letter-spacing:-.01em; display:block; line-height:1.2; }
.sidebar-brand-sub { font-size:.66rem; color:var(--gray-400); font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.sidebar-nav { flex:1; padding-top:12px; }
.nav-group {
  font-size:.66rem; font-weight:800; color:var(--gray-400);
  text-transform:uppercase; letter-spacing:.09em;
  padding:16px 10px 6px;
}
.nav-group:first-child { padding-top:2px; }
.nav-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:10px;
  font-size:.875rem; font-weight:500; color:var(--gray-600);
  transition:background .18s, color .18s;
}
.nav-link:hover { background:var(--gray-50); color:var(--gray-900); text-decoration:none; }
.nav-link.active { background:var(--brand-50); color:var(--brand-800); font-weight:700; }
.nav-link svg { width:17px; height:17px; flex-shrink:0; opacity:.8; }
.nav-link.active svg { opacity:1; }
.sidebar-foot {
  border-top:1px solid var(--gray-100); padding:12px 10px 0; margin-top:10px;
  font-size:.68rem; color:var(--gray-400); text-align:center;
}

.main { flex:1; min-width:0; }
.wrap { max-width:1080px; margin:0 auto; padding:44px 32px 96px; }

/* Cabeçalho de página */
.page-head { margin-bottom:34px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand-600); background:var(--brand-50);
  border:1px solid var(--brand-100); padding:5px 12px; border-radius:999px;
  margin-bottom:14px;
}
h1 { font-size:2.5rem; font-weight:800; color:var(--gray-900); line-height:1.12; letter-spacing:-.02em; }
h2 { font-size:1.6rem; font-weight:800; color:var(--gray-900); line-height:1.25; letter-spacing:-.01em; }
h3 { font-size:1.14rem; font-weight:700; color:var(--gray-900); line-height:1.35; }
h4 { font-size:.98rem; font-weight:700; color:var(--gray-900); }
.lead { font-size:1.09rem; color:var(--gray-500); max-width:70ch; margin-top:12px; }

section.block { margin-top:52px; scroll-margin-top:20px; }
section.block > h2 { display:flex; align-items:center; gap:11px; }
.accent-bar { width:34px; height:4px; border-radius:2px; background:var(--brand-500); flex-shrink:0; }
.bar-brand { background:var(--brand-600); }
.bar-green { background:var(--green-600); } .bar-warm { background:var(--warm-600); }
.bar-red { background:var(--red-600); } .bar-violet { background:var(--violet-600); }
.bar-info { background:var(--info-600); } .bar-gray { background:var(--gray-400); }
.sub { color:var(--gray-500); margin-top:10px; max-width:74ch; }
p + p { margin-top:12px; }
.mt { margin-top:18px; }
.mt-lg { margin-top:28px; }
.what { margin-top:14px; }
.what b { color:var(--gray-900); }

/* ─────────────────────────── Índice interno ─────────────────────────── */
.toc {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:18px 22px; margin-top:26px;
}
.toc-title {
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray-400); margin-bottom:10px;
}
.toc ul { list-style:none; columns:2; column-gap:28px; }
.toc li { margin-bottom:6px; break-inside:avoid; }
.toc a { font-size:.875rem; color:var(--gray-600); font-weight:500; }
.toc a:hover { color:var(--brand-700); }

/* Listas de corpo */
.list { margin-top:16px; padding-left:22px; }
.list li { margin-bottom:8px; font-size:.94rem; }
.list-num { margin-top:16px; padding-left:22px; }
.list-num li { margin-bottom:9px; font-size:.94rem; }

/* ─────────────────────────── Cartões ─────────────────────────── */
.card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:26px;
}
.card-tint { background:var(--gray-50); box-shadow:none; }
.feature-card {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,#fff,var(--gray-50));
  border:1px solid var(--gray-200); border-radius:var(--radius-xl);
  padding:28px 26px; transition:transform .3s, box-shadow .3s, border-color .3s;
}
.feature-card:hover { border-color:var(--brand-200); box-shadow:0 8px 32px rgba(37,99,235,.09); transform:translateY(-3px); }

.grid { display:grid; gap:20px; margin-top:22px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-side { grid-template-columns:1.1fr .9fr; align-items:start; }

.icon-box {
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; flex-shrink:0;
}
.icon-box svg { width:23px; height:23px; }
.bg-brand { background:var(--brand-50); color:var(--brand-600); }
.bg-green { background:var(--green-50); color:var(--green-600); }
.bg-warm  { background:var(--warm-50);  color:var(--warm-600); }
.bg-red   { background:var(--red-50);   color:var(--red-600); }
.bg-info  { background:var(--info-50);  color:var(--info-600); }
.bg-violet{ background:var(--violet-50);color:var(--violet-600); }
.bg-gray  { background:var(--gray-100); color:var(--gray-600); }

.card h3 + p, .feature-card h3 + p { margin-top:7px; color:var(--gray-500); font-size:.925rem; }

/* Lista com marcador de confirmação */
.check-list { margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.check-item { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--gray-600); }
.check-item::before {
  content:""; flex-shrink:0; margin-top:.42em;
  width:15px; height:15px; border-radius:50%;
  background:var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563EB'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/11px no-repeat;
}
.check-list.green .check-item::before { background-color:var(--green-100); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23059669'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); }

/* ─────────────────────────── Passos numerados ─────────────────────────── */
.steps { margin-top:24px; }
.step { display:flex; gap:16px; align-items:flex-start; }
.step-num {
  width:38px; height:38px; min-width:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.95rem;
  background:var(--brand-50); color:var(--brand-700);
  border:1px solid var(--brand-100);
}
.step-last .step-num { background:var(--brand-600); color:#fff; border-color:var(--brand-600); }
.step-body { padding-bottom:4px; }
.step-body h4 { margin-bottom:3px; }
.step-body p { font-size:.9rem; color:var(--gray-500); }
.step-line { width:2px; height:16px; margin:2px 0 2px 18px; background:linear-gradient(to bottom,var(--brand-200),var(--brand-100)); }

/* Passos em linha */
.flow-row { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:20px; }
.flow-chip {
  background:var(--white); border:1px solid var(--gray-200); border-radius:999px;
  padding:8px 16px; font-size:.85rem; font-weight:600; color:var(--gray-700);
  box-shadow:var(--shadow);
}
.flow-arrow { color:var(--gray-300); font-weight:700; }

/* ─────────────────────────── Selos e status ─────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.01em;
  background:var(--gray-100); color:var(--gray-600);
}
.pill-brand { background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100); }
.pill-green { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); }
.pill-warm  { background:var(--warm-50);  color:var(--warm-700);  border:1px solid var(--warm-200); }
.pill-red   { background:var(--red-50);   color:var(--red-700);   border:1px solid var(--red-200); }
.pill-violet{ background:var(--violet-50);color:var(--violet-600);border:1px solid var(--violet-100); }
.pill-info  { background:var(--info-50);  color:var(--info-600);  border:1px solid var(--info-100); }

.status {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:7px;
  font-size:.73rem; font-weight:700; white-space:nowrap;
}
.st-green { background:var(--green-50); color:var(--green-700); }
.st-amber { background:var(--warm-50);  color:var(--warm-700); }
.st-red   { background:var(--red-50);   color:var(--red-700); }
.st-gray  { background:var(--gray-100); color:var(--gray-600); }
.st-blue  { background:var(--brand-50); color:var(--brand-700); }
.st-violet{ background:var(--violet-50);color:var(--violet-600); }
.pill-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; align-items:center; }

/* ─────────────────────────── Tabelas ─────────────────────────── */
.table-wrap { overflow-x:auto; margin-top:20px; border-radius:var(--radius); border:1px solid var(--gray-200); }
table { width:100%; border-collapse:collapse; background:var(--white); font-size:.895rem; }
thead th {
  background:var(--gray-50); text-align:left;
  font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gray-500); padding:11px 15px; white-space:nowrap;
  border-bottom:1px solid var(--gray-200);
}
tbody td { padding:12px 15px; border-top:1px solid var(--gray-100); color:var(--gray-600); vertical-align:top; }
tbody tr:first-child td { border-top:none; }
tbody tr:hover { background:var(--gray-50); }
td strong, td b { color:var(--gray-900); }
.col-narrow { width:1%; white-space:nowrap; }
.req { color:var(--red-600); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.opt { color:var(--gray-400); font-size:.8rem; }

/* ─────────────────────────── Avisos ─────────────────────────── */
.callout {
  display:flex; gap:14px; align-items:flex-start;
  border-radius:var(--radius); padding:16px 18px; margin-top:22px;
  border:1px solid var(--gray-200); background:var(--gray-50);
  font-size:.91rem;
}
.callout-ico { font-size:1.25rem; line-height:1.3; flex-shrink:0; }
.callout-body h4 { margin-bottom:3px; font-size:.94rem; }
.callout-body p { color:var(--gray-600); }
.co-tip    { background:var(--brand-50);  border-color:var(--brand-100); }
.co-good   { background:var(--green-50);  border-color:var(--green-200); }
.co-warn   { background:var(--warm-50);   border-color:var(--warm-200); }
.co-danger { background:var(--red-50);    border-color:var(--red-200); }
.co-idea   { background:var(--violet-50); border-color:var(--violet-100); }

/* ─────────────────────────── Bloco comercial ─────────────────────────── */
.sell {
  margin-top:44px; border-radius:var(--radius-xl);
  border:1px solid var(--violet-100);
  background:linear-gradient(145deg,var(--violet-50),#fff 70%);
  padding:28px 30px;
}
.sell-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet-600); background:var(--white);
  border:1px solid var(--violet-100); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.sell h3 { color:var(--violet-900); }
.sell > p { color:var(--gray-600); margin-top:8px; font-size:.95rem; }
.sell-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px; }
.sell-item { background:var(--white); border:1px solid var(--violet-100); border-radius:var(--radius); padding:16px 18px; }
.sell-item h4 { color:var(--violet-900); margin-bottom:5px; font-size:.9rem; }
.sell-item p { font-size:.86rem; color:var(--gray-600); }
.sell-quote {
  margin-top:20px; padding:14px 18px; border-left:3px solid var(--violet-400);
  background:var(--white); border-radius:0 var(--radius) var(--radius) 0;
  font-size:.93rem; color:var(--gray-700);
}
.sell-quote b { color:var(--violet-900); }

/* ─────────────────────────── Mockups de tela ─────────────────────────── */
.mock {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden;
}
.mock-bar {
  display:flex; align-items:center; gap:7px;
  padding:11px 15px; background:var(--gray-50); border-bottom:1px solid var(--gray-200);
}
.mock-dot { width:9px; height:9px; border-radius:50%; }
.mock-title { font-size:.75rem; color:var(--gray-500); font-weight:600; margin-left:8px; }
.mock-body { padding:18px; }
.mock-label { font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gray-400); margin-bottom:9px; }
.mock-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.83rem; padding:6px 0; }
.mock-row + .mock-row { border-top:1px solid var(--gray-100); }
.mock-row .k { color:var(--gray-400); }
.mock-row .v { color:var(--gray-800); font-weight:600; }
.mock-total { border-top:2px solid var(--gray-200); margin-top:6px; padding-top:9px; font-weight:800; }
.mock-total .v { color:var(--brand-600); font-size:1rem; }
.mock-sep { border-top:1px solid var(--gray-100); margin:14px 0; }

/* KPIs */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.kpi { border-radius:var(--radius); padding:14px 16px; border:1px solid; }
.kpi-label { font-size:.7rem; font-weight:700; opacity:.85; }
.kpi-value { font-size:1.28rem; font-weight:800; margin-top:2px; letter-spacing:-.02em; }
.kpi-foot { font-size:.68rem; opacity:.75; margin-top:2px; }
.kpi-green { background:var(--green-50); border-color:var(--green-200); color:var(--green-700); }
.kpi-red   { background:var(--red-50);   border-color:var(--red-200);   color:var(--red-700); }
.kpi-brand { background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700); }
.kpi-warm  { background:var(--warm-50);  border-color:var(--warm-200);  color:var(--warm-700); }
.kpi-violet{ background:var(--violet-50);border-color:var(--violet-100);color:var(--violet-600); }
.kpi-gray  { background:var(--gray-50);  border-color:var(--gray-200);  color:var(--gray-600); }

/* ─────────────────────────── Gráficos ─────────────────────────── */
.chart-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow); margin-top:22px; }
.chart-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chart-title { font-size:.95rem; font-weight:700; color:var(--gray-900); }
.chart-note { font-size:.78rem; color:var(--gray-400); }
.chart-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; }
.legend-item { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--gray-500); }
.legend-swatch { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
svg.chart { display:block; width:100%; height:auto; overflow:visible; }
svg.chart text { font-family:var(--font); }

/* Barras em CSS */
.bars { display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:18px; }
.bars .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; }
.bars .stack { width:100%; display:flex; gap:3px; align-items:flex-end; height:100%; }
.bars .bar { flex:1; border-radius:6px 6px 0 0; min-height:3px; }
.bars .lbl { font-size:.7rem; color:var(--gray-400); font-weight:600; }

/* ─────────────────────────── Mermaid ─────────────────────────── */
.diagram {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:24px; margin-top:22px; overflow-x:auto;
}
.diagram-title { font-size:.95rem; font-weight:700; color:var(--gray-900); text-align:center; }
.diagram-sub { font-size:.84rem; color:var(--gray-500); text-align:center; margin-top:4px; margin-bottom:16px; }
.diagram pre.mermaid { background:transparent; text-align:center; }
.diagram pre.mermaid:not([data-processed]) { color:transparent; min-height:60px; }

/* ─────────────────────────── Navegação de rodapé ─────────────────────────── */
.pager { display:flex; justify-content:space-between; gap:14px; margin-top:64px; padding-top:26px; border-top:1px solid var(--gray-200); }
.pager a {
  flex:1; max-width:48%; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:14px 18px; background:var(--white); transition:border-color .2s, box-shadow .2s;
}
.pager a:hover { border-color:var(--brand-200); box-shadow:var(--shadow); text-decoration:none; }
.pager .dir { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-400); }
.pager .name { font-size:.95rem; font-weight:700; color:var(--gray-900); margin-top:2px; }
.pager .next { text-align:right; margin-left:auto; }

/* ─────────────────────────── Menu móvel ─────────────────────────── */
.menu-btn {
  display:none; position:fixed; top:14px; left:14px; z-index:60;
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:var(--white); border:1px solid var(--gray-200); box-shadow:var(--shadow-md);
  align-items:center; justify-content:center; color:var(--gray-700);
}
.menu-btn svg { width:20px; height:20px; }
.overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.4);
  z-index:35; backdrop-filter:blur(2px);
}
.overlay.show { display:block; }

/* ─────────────────────────── Responsivo ─────────────────────────── */
@media (max-width:1080px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .sell-grid { grid-template-columns:1fr; }
}
@media (max-width:920px) {
  .sidebar {
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:var(--shadow-md);
  }
  .sidebar.open { transform:none; }
  .menu-btn { display:flex; }
  .wrap { padding:70px 20px 80px; }
  .grid-2, .grid-3, .grid-side { grid-template-columns:1fr; }
  .toc ul { columns:1; }
  h1 { font-size:1.95rem; }
  h2 { font-size:1.35rem; }
  .pager { flex-direction:column; }
  .pager a { max-width:100%; }
  .pager .next { text-align:left; }
}

/* ─────────────────────────── Impressão ─────────────────────────── */
@media print {
  .sidebar, .menu-btn, .pager, .overlay { display:none !important; }
  .wrap { max-width:100%; padding:0; }
  .card, .feature-card, .diagram, .chart-card { break-inside:avoid; box-shadow:none; }
  body { font-size:11pt; }
}