/* =========================================================
   Análise Competitiva · Elemento Puro · painel executivo
   Paleta validada (dataviz reference palette)
   ========================================================= */

:root {
  color-scheme: light;
  /* surfaces & ink */
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  /* categorical slots (fixed order · color follows the entity) */
  --series-1: #2a78d6; /* elementopuro */
  --series-2: #008300; /* gsuplementos */
  --series-3: #e87ba4; /* integralmedica */
  --series-4: #eda100; /* maxtitanium */
  --series-5: #1baf7a; /* soldiers */
  --series-6: #eb6834; /* adaptogen */
  --series-7: #4a3aa7; /* underlabz */
  /* status */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --success-text: #006300;
  /* brand accents (report chrome) */
  --topbar-bg: #171526;
  --topbar-ink: #ffffff;
  --accent: #421983;
  --shadow: 0 1px 2px rgba(11,11,11,.05), 0 4px 16px rgba(11,11,11,.06);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255,255,255,0.10);
    --series-1: #3987e5;
    --series-2: #008300;
    --series-3: #d55181;
    --series-4: #c98500;
    --series-5: #199e70;
    --series-6: #d95926;
    --series-7: #9085e9;
    --success-text: #0ca30c;
    --topbar-bg: #14121f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface-1: #1a1a19;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255,255,255,0.10);
  --series-1: #3987e5;
  --series-2: #008300;
  --series-3: #d55181;
  --series-4: #c98500;
  --series-5: #199e70;
  --series-6: #d95926;
  --series-7: #9085e9;
  --success-text: #0ca30c;
  --topbar-bg: #14121f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: color-mix(in srgb, var(--grid) 55%, transparent); padding: 1px 5px; border-radius: 4px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg); color: var(--topbar-ink);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 22px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { height: 36px; width: auto; display: block; flex: none; }
.brand-sep { width: 1px; height: 28px; background: rgba(255,255,255,.22); flex: none; }
.footer-brand { margin-bottom: 8px; }
.footer-logo { height: 24px; width: auto; opacity: .92; }
.logo-white { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-ink { display: none; }
  :root:where(:not([data-theme="light"])) .logo-white { display: inline-block; }
}
:root[data-theme="dark"] .logo-ink { display: none; }
:root[data-theme="dark"] .logo-white { display: inline-block; }
:root[data-theme="light"] .logo-ink { display: inline-block; }
:root[data-theme="light"] .logo-white { display: none; }

/* ---------- Icon button (shared skin: theme toggle + hamburger) ---------- */
.icon-btn {
  width: 32px; height: 32px; border-radius: 99px; border: none;
  background: rgba(255,255,255,.10); color: var(--topbar-ink);
  display: grid; place-items: center; cursor: pointer; transition: .15s;
  flex: none;
}
.icon-btn:hover { background: rgba(255,255,255,.20); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- Theme toggle ---------- */
.theme-toggle svg { display: none; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }

/* ---------- Hamburger (mobile nav toggle) ---------- */
.nav-toggle .nt-close { display: none; }
.nav-toggle.open .nt-burger { display: none; }
.nav-toggle.open .nt-close { display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; overflow: hidden; }
.brand-text strong { font-size: 15px; white-space: nowrap; }
.brand-text span { font-size: 11px; opacity: .65; white-space: nowrap; }
.topnav { gap: 2px; }
.topnav a {
  color: var(--topbar-ink); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px; opacity: .72; transition: .15s;
}
.topnav a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.topnav a.active { opacity: 1; background: rgba(255,255,255,.14); }
.topbar-meta { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.10); color: var(--topbar-ink); white-space: nowrap;
}

/* ---------- Layout ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 28px 20px 60px; }
.section { margin-bottom: 52px; }
.section-head { margin-bottom: 18px; }
.section-head h1 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; max-width: 860px; }

.domain-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 99px; background: var(--surface-1);
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.pill-ai {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(90deg, #3987e5, #9085e9);
  color: #fff; padding: 4px 12px; border-radius: 99px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-meta { font-size: 12px; color: var(--muted); }
/* .two-col: grid + colunas + gap agora vêm de classes Tailwind no HTML (evita guerra de especificidade) */

/* ---------- KPI cards ---------- */
.kpi-grid { margin-bottom: 18px; }
.kpi {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.kpi-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 26px; font-weight: 800; margin-top: 4px; line-height: 1.1; }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.delta { font-size: 12px; font-weight: 700; }
.delta.up { color: var(--success-text); }
.delta.down { color: var(--critical); }
.delta::before { font-size: 10px; }
.delta.up::before { content: "▲ "; }
.delta.down::before { content: "▼ "; }

/* ---------- Callout ---------- */
.callout {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid; font-size: 13px;
}
.callout-critical { background: color-mix(in srgb, var(--critical) 7%, var(--surface-1)); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.callout-critical .callout-icon { color: var(--critical); flex: none; margin-top: 2px; }
.callout strong { font-size: 14px; display: block; margin-bottom: 3px; }
.callout p { color: var(--text-secondary); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  padding: 8px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap;
}
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: color-mix(in srgb, var(--grid) 30%, transparent); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .kw { font-weight: 600; color: var(--text-primary); }
.data-table .url { color: var(--muted); font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table.master td, .data-table.master th { white-space: nowrap; }
.data-table.master th:not(:last-child), .data-table.master td:not(:last-child) { border-right: 1px solid var(--grid); }
.data-table.master th, .data-table.master td { padding-left: 12px; padding-right: 12px; }
.data-table.master .best { font-weight: 800; }
.data-table.master .client-row td { background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.pos-badge {
  display: inline-block; min-width: 26px; text-align: center;
  font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--series-1);
}
.pos-badge.warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: #8a6100; }
.intent {
  display: inline-block; width: 18px; height: 18px; border-radius: 5px;
  font-size: 10px; font-weight: 700; text-align: center; line-height: 18px; margin-right: 2px;
}
.intent.N { background: #ece7fb; color: #4a3aa7; }
.intent.I { background: #e3effc; color: #1c5cab; }
.intent.C { background: #fdf0d8; color: #8a6100; }
.intent.T { background: #ddf3e9; color: #0d6b4a; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .intent.N { background: #2c2745; color: #9085e9; }
  :root:where(:not([data-theme="light"])) .intent.I { background: #1c2c40; color: #6da7ec; }
  :root:where(:not([data-theme="light"])) .intent.C { background: #3c2f12; color: #eda100; }
  :root:where(:not([data-theme="light"])) .intent.T { background: #12352a; color: #1baf7a; }
}
:root[data-theme="dark"] .intent.N { background: #2c2745; color: #9085e9; }
:root[data-theme="dark"] .intent.I { background: #1c2c40; color: #6da7ec; }
:root[data-theme="dark"] .intent.C { background: #3c2f12; color: #eda100; }
:root[data-theme="dark"] .intent.T { background: #12352a; color: #1baf7a; }
.footnote { font-size: 11px; color: var(--muted); margin-top: 10px; }

/* ---------- Nugget ---------- */
.nugget {
  display: flex; gap: 10px; align-items: flex-start;
  background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--series-1) 25%, transparent);
  border-radius: 10px; padding: 12px 14px; margin-top: 14px; font-size: 13px;
}
.nugget p { color: var(--text-secondary); }
.nugget-ic { font-size: 16px; }

/* ---------- Horizontal bar charts ---------- */
.chart-row { margin-bottom: 18px; }
.chart-card { margin-bottom: 0; }
.hbar-chart { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.hbar-row { display: grid; grid-template-columns: 108px 1fr 64px; align-items: center; gap: 10px; }
.hbar-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; overflow: hidden; }
.hbar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { position: relative; height: 18px; background: color-mix(in srgb, var(--grid) 45%, transparent); border-radius: 5px; }
.hbar-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  min-width: 3px; cursor: default;
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.hbar-fill:hover { filter: brightness(1.08); }
.hbar-value { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Stacked AI chart ---------- */
.stack-chart { display: flex; flex-direction: column; gap: 10px; }
.stack-row { display: grid; grid-template-columns: 118px 1fr 70px; align-items: center; gap: 10px; }
.stack-track { display: flex; height: 20px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--grid) 45%, transparent); }
.stack-seg { height: 100%; border-right: 2px solid var(--surface-1); cursor: default; transition: width .7s ease; }
.stack-seg:last-child { border-right: none; }
.stack-seg:hover { filter: brightness(1.1); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Tiers ---------- */
.tier-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px;
}
.tier-tag { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; display: inline-block; margin-bottom: 8px; }
.t1 .tier-tag { background: color-mix(in srgb, var(--series-2) 15%, transparent); color: var(--series-2); }
.t2 .tier-tag { background: color-mix(in srgb, var(--series-4) 18%, transparent); color: #8a6100; }
.t3 .tier-tag { background: color-mix(in srgb, var(--series-6) 15%, transparent); color: var(--series-6); }
.t4 .tier-tag { background: color-mix(in srgb, var(--series-1) 13%, transparent); color: var(--series-1); }
.tier-card strong { display: block; font-size: 14px; margin-bottom: 4px; }
.tier-card p { font-size: 12px; color: var(--text-secondary); }

/* ---------- Tabs / dossiês ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  padding: 8px 14px; border-radius: 99px; cursor: pointer; transition: .15s;
}
.tab-btn:hover { border-color: var(--baseline); color: var(--text-primary); }
.tab-btn.active { background: var(--text-primary); color: var(--page); border-color: var(--text-primary); }
.tab-btn .logo-chip { width: 20px; height: 20px; font-size: 9px; }
.logo-chip {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: 10px; color: #fff; letter-spacing: .2px;
}
.company-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.company-header .logo-chip { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.company-title strong { font-size: 18px; display: block; }
.company-title span { font-size: 12px; color: var(--muted); }
.company-badges { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill { font-size: 11px; font-weight: 700; border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px; color: var(--text-secondary); background: var(--surface-1); }
.company-kpis { margin-bottom: 16px; }
.company-insight {
  border-left: 3px solid var(--series-1); padding: 10px 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--grid) 30%, transparent); border-radius: 0 8px 8px 0;
  font-size: 13px; color: var(--text-secondary);
}
/* .detail-grid: grid + colunas + gap agora vêm de classes Tailwind no HTML */

/* ---------- Insights row ---------- */
.insight-row { margin-top: 4px; }
.mini-insight {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; font-size: 12px; color: var(--text-secondary);
}
.mi-num { font-size: 30px; font-weight: 800; color: var(--text-primary); display: block; margin-bottom: 4px; }
.mi-unit { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* ---------- Roadmap ---------- */
.step {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface-1);
  display: flex; flex-direction: column; gap: 6px;
}
.step-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--series-1);
}
.step strong { font-size: 13px; }
.step p { font-size: 12px; color: var(--text-secondary); }
.step .tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: auto; padding-top: 6px; }
.tag.urgent { color: var(--critical); }
.tag.quick { color: var(--success-text); }
.tag.mid { color: #8a6100; }

/* ---------- Icons (inline SVG masks) ---------- */
.ic { width: 17px; height: 17px; display: inline-block; background: currentColor; flex: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; color: var(--muted); }
.ic-key   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12 20 3m-4 1 3 3'/%3E%3C/svg%3E"); }
.ic-page  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.ic-traffic{ --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E"); }
.ic-auth  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z'/%3E%3C/svg%3E"); }
.ic-ai    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.2 6.8L21 11l-6.8 2.2L12 20l-2.2-6.8L3 11l6.8-2.2z'/%3E%3C/svg%3E"); }
.ic-table { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M9 4v16'/%3E%3C/svg%3E"); }
.ic-gap   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
.ic-star  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3 7 7 .8-5.2 4.8 1.5 7L12 18l-6.3 3.6 1.5-7L2 9.8 9 9z'/%3E%3C/svg%3E"); }
.ic-flag  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 21V4m0 0h13l-2.5 4L18 12H5'/%3E%3C/svg%3E"); }

/* ---------- Fancy lists ---------- */
.fancy-list { list-style: none; counter-reset: fl; display: flex; flex-direction: column; gap: 10px; }
.fancy-list li { counter-increment: fl; position: relative; padding-left: 38px; font-size: 13px; color: var(--text-secondary); }
.fancy-list li strong { color: var(--text-primary); }
.fancy-list li::before {
  content: counter(fl); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.gaps li::before { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }
.wins li::before { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--success-text); }

/* ---------- Info icon (i) ---------- */
.info-ic {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 9px; font-weight: 700; font-style: normal; line-height: 1;
  font-family: Georgia, serif; text-transform: lowercase; letter-spacing: 0;
  border: 1.2px solid var(--baseline); color: var(--muted);
  cursor: help; flex: none; vertical-align: text-bottom; margin-left: 2px;
  user-select: none; transition: .15s;
}
.info-ic:hover { background: var(--text-primary); color: var(--page); border-color: var(--text-primary); }
th .info-ic { width: 13px; height: 13px; font-size: 8px; }
.stat-pill { cursor: help; }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--text-primary); color: var(--page);
  font-size: 12px; font-weight: 500; line-height: 1.45;
  padding: 8px 11px; border-radius: 8px; max-width: 260px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.tooltip strong { font-weight: 700; }

/* ---------- Footer ---------- */
.report-footer { border-top: 1px solid var(--grid); padding-top: 18px; font-size: 12px; color: var(--muted); }
.report-footer p:first-child { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }

/* ---------- Table scroll: dica visual de que dá pra arrastar ---------- */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .table-scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    background: linear-gradient(to right, transparent, var(--surface-1));
    pointer-events: none;
  }
}

/* ---------- Responsive ---------- */
/* Grids (kpi-grid, two-col, chart-row, tier-grid, roadmap-grid, insight-row,
   company-kpis, detail-grid) têm suas colunas/gap definidos via classes
   Tailwind direto no HTML/JS — nada a fazer aqui para eles. */
@media (max-width: 767px) {
  .section-head h1 { font-size: 20px; }
  .hbar-row { grid-template-columns: 88px 1fr 56px; }
  .company-badges { margin-left: 0; }
  .badge-source { display: none; }
  .brand-text span { display: none; }
  .brand-logo { height: 28px; }
  .card { padding: 16px; }
}