/* ══════════════════════════════════════════════════════════
   DataGOVEN — Design System · Editorial Atelier v2
   Brand: DataGOVEN / DM Sans + DM Mono / Creme palette
   ══════════════════════════════════════════════════════════ */

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  /* Canvas / surfaces */
  --bg:          #FAF8F4;   /* creme — papel/relatório */
  --off:         #F3F0EA;   /* surface-alt — thead, hover, tracks */
  --surface:     #FFFFFF;   /* cards, inputs */
  --surface-alt: #F3F0EA;   /* alias */

  /* Borders */
  --border:      #E8E2D6;   /* border padrão */
  --border-2:    #EDE7DA;   /* hairline — separadores leves */
  --border-st:   #D5CCB9;   /* border strong — dashed separators */

  /* Texto — 4 níveis */
  --text:        #1A2030;   /* primário */
  --text-2:      #4A5468;   /* secundário */
  --text-3:      #8A8478;   /* meta, labels caps */
  --text-4:      #B8AE9C;   /* hint, numeração rank */

  /* Navy (sidebar) */
  --navy:        #0C1A2E;
  --navy-2:      #142236;
  --navy-3:      #1A2D47;

  /* Azul institucional */
  --blue:        #185FA5;
  --blue-mid:    #2272C3;
  --blue-lt:     #378ADD;
  --blue-wash:   #EAF0F8;
  --silver:      #B5D4F4;

  /* Status */
  --green:       #1E6E42;
  --green-lt:    #D4EDDA;
  --red:         #B91C1C;
  --red-lt:      #FEE2E2;
  --amber:       #B45309;
  --amber-lt:    #FEF3C7;
  --purple:      #7B3FA0;
  --teal:        #0F766E;

  /* Layout */
  --sidebar-w:   220px;
  --topbar-h:    52px;
  --radius:      6px;
  --radius-sm:   4px;
  --shadow:      0 1px 2px rgba(26,32,48,.04), 0 2px 8px rgba(26,32,48,.04);

  --font:  'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', 'Fira Mono', monospace;

  /* Backwards compat aliases */
  --white:   #FFFFFF;
  --mid:     #8A8478;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { cursor: pointer; font-family: inherit; }
input, select { font-family: inherit; }
a { color: var(--blue-mid); }

/* Tabular figures em todos os números */
.mono, [class*="kpi-value"], [class*="kri-value"],
[class*="rank-val"], [class*="ptr-val"], [class*="bar-val"],
[class*="bar-pct"], [class*="bar-value"],
[class*="def-"], td.num, .ed-hero-number {
  font-feature-settings: "tnum", "ss01";
}

/* ─── Shell ──────────────────────────────────────────────── */
.shell {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 20px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.brand-mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-eyebrow {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(181,212,244,.35);
  margin-bottom: 0;
  font-family: var(--mono);
}
.brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #E8F1FB;
  line-height: 1.2;
}
.brand-sub {
  font-size: 9px;
  color: #5C6A82;
  font-family: var(--mono);
  margin-top: 1px;
  letter-spacing: .05em;
}

/* Nav */
.nav {
  flex: 1;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-group-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3D5470;
  padding: 16px 10px 4px;
}
.nav-group-label:first-child { padding-top: 6px; }
.nav-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #8E9EB5;
  font-size: 13px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background .12s, color .12s;
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,.04);
  color: rgba(181,212,244,.85);
}
.nav-item.active {
  background: rgba(255,255,255,.06);
  color: #E8F1FB;
  font-weight: 500;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--blue-lt);
  border-radius: 2px;
}
.nav-icon {
  font-size: 14px;
  opacity: .7;
  flex-shrink: 0;
  line-height: 1;
}
.nav-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: #5C6A82;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 16px 18px 0;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: auto;
}
.sf-ref {
  font-size: 9.5px;
  font-family: var(--mono);
  color: #5C6A82;
  line-height: 1.6;
  display: block;
}
.sf-meta {
  font-size: 9px;
  font-family: var(--mono);
  color: #5C6A82;
  margin-top: 2px;
}

/* ─── Main ───────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 40px;
}
.topbar-breadcrumb {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.topbar-left { display: flex; flex-direction: column; gap: 1px; }
.topbar-section-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.topbar-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
}
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-search-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
}
.topbar-search-widget svg { opacity: .6; }
.topbar-kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-3);
  margin-left: 4px;
}
.topbar-sep { width: 1px; height: 16px; background: var(--border); }
.topbar-period {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}
.topbar-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.topbar-export-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Legacy topbar search (EFPCs / Planos) */
.search-wrap { position: relative; }
.search-input {
  width: 240px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 0 14px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border .12s, box-shadow .12s;
}
.search-input:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(34,114,195,.10); }
.topbar-badge {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}

/* ─── Sections ───────────────────────────────────────────── */
.section {
  display: none;
  padding: 36px 40px 56px;
  animation: fadeIn .18s ease;
}
.section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── § Section header ───────────────────────────────────── */
.ed-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 16px;
}
.ed-section-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  flex-shrink: 0;
}
.ed-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}
.ed-section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.ed-section-action {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.ed-section-action:hover { color: var(--blue); }

/* Legacy section rule (kept for compat) */
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 16px;
}
.section-rule::before {
  content: '';
  flex: 0 0 3px;
  height: 16px;
  background: var(--blue);
  border-radius: 2px;
}
.section-rule-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Section controls (filter bar) */
.section-controls { margin-bottom: 20px; }
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-select {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 28px 0 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8478' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border .12s;
}
.filter-select:focus { border-color: var(--blue-mid); }
.filter-count {
  font-size: 12px;
  color: var(--text-3);
  margin-left: auto;
  font-family: var(--mono);
}

/* ─── Grid layouts ───────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.grid-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}
.grid-composition {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
}
.col-span-2 { grid-column: span 2; }
@media (max-width: 1280px) {
  .grid-hero { grid-template-columns: 1fr; }
  .grid-composition { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .col-span-2 { grid-column: span 1; }
}
@media (max-width: 860px) {
  /* !important porque alguns blocos trazem proporção inline (1.5fr 1fr);
     em tela estreita nenhuma proporção de duas colunas cabe. */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
}

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.card-head { margin-bottom: 20px; }
.card-eyebrow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.card-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.card-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.5;
}
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: visible;
}

/* ─── Editorial Hero ─────────────────────────────────────── */
.ed-hero {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.ed-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ed-hero-eyebrow-line {
  height: 1px;
  background: var(--border);
  width: 60px;
  flex-shrink: 0;
}
.ed-h1 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 14px;
  max-width: 520px;
}
.ed-lede {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 480px;
}
.ed-lede .mono { color: var(--text); }
.ed-lede .mono-muted { color: var(--text-3); }

/* Hero card (patrimônio hero number) */
.ed-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.ed-hero-badge {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--blue-wash);
  color: var(--blue);
  font-weight: 500;
  letter-spacing: .04em;
}
.ed-hero-number {
  font-size: 60px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: 18px;
  font-feature-settings: "tnum";
}
.ed-hero-number-unit {
  font-size: 32px;
  color: var(--text-2);
  letter-spacing: -.02em;
}
.ed-hero-delta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
}
.ed-delta-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 12px;
  background: rgba(30,110,66,.10);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--mono);
}
.ed-delta-pill.pos { background: rgba(30,110,66,.10); color: var(--green); }
.ed-delta-pill.neg { background: rgba(185,28,28,.08); color: var(--red); }
.ed-delta-pill.neu { background: var(--surface-alt); color: var(--text-3); }
.ed-delta-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.ed-sparkline-header {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 6px;
}

/* ─── Metrics Rail (C_Metric) ────────────────────────────── */
.ed-metrics-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  overflow: hidden;
  margin-bottom: 28px;
}
.ed-metric {
  flex: 1;
  padding: 16px 18px 14px;
  border-right: 1px solid var(--border-2);
}
.ed-metric:last-child { border-right: none; }
.ed-metric-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.ed-metric-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ed-metric-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.018em;
  line-height: 1;
  font-feature-settings: "tnum";
}
.ed-metric-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.ed-metric-delta {
  font-family: var(--mono);
  font-size: 10.5px;
}
.ed-metric-delta.pos { color: var(--green); }
.ed-metric-delta.neg { color: var(--red); }
.ed-metric-delta.neu { color: var(--text-3); }
.ed-metric-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
}

/* ─── Sparkline ──────────────────────────────────────────── */
.sparkline-wrap { display: block; overflow: visible; flex-shrink: 0; }

/* ─── Treemap (CSS flex proporcional) ────────────────────── */
.treemap-wrap {
  display: flex;
  gap: 4px;
  width: 100%;
}
.treemap-big {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgba(255,255,255,.95);
  position: relative;
  overflow: hidden;
  min-width: 120px;
}
.treemap-rest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.treemap-row { display: flex; gap: 4px; }
.treemap-cell {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: rgba(255,255,255,.95);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 60px;
  overflow: hidden;
}
.treemap-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.treemap-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.treemap-big .treemap-label { font-size: 18px; }
.treemap-note {
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  margin-top: 6px;
}
.treemap-vals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
}
.treemap-val {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.01em;
  font-feature-settings: "tnum";
}
.treemap-big .treemap-val { font-size: 28px; }
.treemap-pct {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.6);
}

/* ─── Composition Bar (BD/CD/CV) ─────────────────────────── */
.c-composition-bar {
  display: flex;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 26px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.c-composition-seg {
  display: flex;
  align-items: center;
  padding: 0 18px;
}
.c-composition-seg-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.95);
}
.c-composition-detail { display: flex; flex-direction: column; gap: 0; }
.c-composition-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border-2);
}
.c-composition-row:first-child { border-top: none; }
.c-composition-pill {
  height: 36px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}
.c-composition-name { font-size: 13.5px; color: var(--text); font-weight: 500; }
.c-composition-note { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.c-composition-vals { text-align: right; }
.c-composition-v {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-feature-settings: "tnum";
}
.c-composition-p {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  display: block;
}

/* ─── Dot-leader Rank (DotRank) ──────────────────────────── */
.dot-rank { display: flex; flex-direction: column; }
.dot-rank-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0;
  padding: 12px 0;
  border-top: 1px dashed var(--border-st);
}
.dot-rank-row:first-child { border-top: none; }
.dot-rank-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-right: 10px;
}
.dot-rank-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: .05em;
  flex-shrink: 0;
  min-width: 18px;
}
.dot-rank-name {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.dot-rank-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  display: block;
  margin-top: 1px;
}
.dot-leader {
  align-self: center;
  border-bottom: 1px dotted var(--text-4);
  height: 1px;
  transform: translateY(-2px);
  min-width: 20px;
}
.dot-rank-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  padding-left: 10px;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

/* ─── KPI Strip (legacy + new C_Metric style) ────────────── */
.kpi-strip {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kpi-card {
  flex: 1;
  min-width: 120px;
  padding: 16px 18px 14px;
  border-right: 1px solid var(--border-2);
  position: relative;
  overflow: hidden;
}
.kpi-card:last-child { border-right: none; }
.kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.kpi-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.018em;
  font-feature-settings: "tnum";
}
.kpi-sub {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 8px;
  font-family: var(--mono);
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 8px;
  font-family: var(--mono);
}
.kpi-delta.up   { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi-delta.flat { color: var(--amber); }

/* Inline KPI row */
.kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kpi-row-item { flex: 1; min-width: 100px; }
.kri-label { font-size: 10px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.kri-value { font-size: 18px; font-weight: 500; color: var(--text); font-feature-settings: "tnum"; }
.kri-sub   { font-size: 11px; color: var(--text-3); }

/* Vertical KPI column */
.kpi-col { display: flex; flex-direction: column; gap: 12px; }
.kpi-col-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-2); }
.kpi-col-item:last-child { border-bottom: none; padding-bottom: 0; }
.kci-label { font-size: 12px; color: var(--text-2); }
.kci-value { font-size: 14px; font-weight: 500; color: var(--text); font-family: var(--mono); white-space: nowrap; font-feature-settings: "tnum"; }
.kci-sub   { font-size: 11px; color: var(--text-3); font-family: var(--mono); }

/* ─── Bar Charts ─────────────────────────────────────────── */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-chart.large .bar-row { gap: 10px; }
.bar-chart.mt-12 { margin-top: 12px; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-row .bar-label {
  flex: 0 0 auto;
  width: 38%;
  max-width: 160px;
}
.bar-row .bar-track { flex: 1 1 auto; min-width: 32px; }
.bar-row .bar-val   { flex: 0 0 auto; text-align: right; min-width: 56px; }
.bar-row.compact    { gap: 8px; }

.bar-label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 7px;
  background: var(--off);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.bar-chart.large .bar-track { height: 10px; }
.bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width .35s ease;
}
.bar-fill.blue-lt  { background: var(--blue-lt); }
.bar-fill.silver   { background: var(--silver); }
.bar-fill.green    { background: #2D7D46; }
.bar-fill.amber    { background: #C4780E; }
.bar-fill.red      { background: #C0392B; }
.bar-fill.purple   { background: #7B3FA0; }
.bar-fill.teal     { background: var(--teal); }
.bar-fill.bd       { background: var(--blue); }
.bar-fill.cd       { background: #2D7D46; }
.bar-fill.cv       { background: #7B3FA0; }
.bar-fill.male-fill   { background: var(--blue); }
.bar-fill.female-fill { background: var(--blue-lt); }

.bar-val {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
  min-width: 80px;
  font-feature-settings: "tnum";
}
.bar-value {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
  min-width: 48px;
  font-feature-settings: "tnum";
}
.bar-pct { font-size: 11px; font-family: var(--mono); color: var(--text-3); text-align: right; min-width: 44px; font-feature-settings: "tnum"; }
.bar-sub { display: block; font-size: 10px; color: var(--text-3); }

/* ─── Population Pyramid ─────────────────────────────────── */
.pyramid-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.pleg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.pleg::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
}
.pleg.female::before { background: var(--blue-lt); }
.pleg.male::before   { background: var(--blue); }

.pyramid { display: flex; flex-direction: column; gap: 6px; }
.pyr-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.pyr-label {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
}
.pyr-bar-left {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 13px;
  overflow: hidden;
}
.pyr-bar-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 13px;
  overflow: hidden;
}
.pyr-fill {
  height: 13px;
  border-radius: 3px;
  transition: width .3s ease;
  flex-shrink: 0;
}
.pyr-fill.male   { background: #3b82f6;  border-radius: 0 3px 3px 0; }
.pyr-fill.female { background: #ec4899;  border-radius: 3px 0 0 3px; }
.pyr-chart { padding: 4px 0 8px; }

/* ─── Rank List (legacy) ─────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: 0; }
.rank-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-st);
}
.rank-item:last-child { border-bottom: none; }
.rank-pos {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-4);
  min-width: 18px;
  text-align: right;
}
.rank-info { min-width: 0; }
.rank-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-sub {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-val, .rank-value {
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

/* ─── Chips ──────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}
.chip-bd { background: rgba(24,95,165,.12); color: var(--blue); }
.chip-cd { background: rgba(45,125,70,.12);  color: var(--green); }
.chip-cv { background: rgba(123,63,160,.12); color: #7B3FA0; }

/* ─── Variação Block ─────────────────────────────────────── */
.variacao-block { display: flex; align-items: center; gap: 24px; padding: 20px 0; }
.vb-item { text-align: center; }
.vb-label { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.vb-value { font-size: 26px; font-weight: 500; color: var(--text); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.vb-sub { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.vb-sep { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; }
.vb-delta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vb-delta-val { font-size: 28px; font-weight: 500; color: var(--green); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.vb-delta-label { font-size: 11px; color: var(--text-3); }

/* ─── Narrative block ────────────────────────────────────── */
.narrative-block {
  background: var(--off);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.narrative-text { font-size: 13px; line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }
.narrative-kpis { display: flex; gap: 24px; }
.nar-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nar-val { font-size: 22px; font-weight: 500; color: var(--text); font-feature-settings: "tnum"; }
.nar-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }

/* ─── Semáforo ───────────────────────────────────────────── */
.semaforo-block { display: flex; gap: 12px; flex-wrap: wrap; }
.sem-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--off);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  flex: unset;
  min-width: unset;
  text-align: left;
}
.sem-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sem-info { flex: 1; }
.sem-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 0; text-transform: none; }
.sem-count { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
.sem-value { font-size: 22px; font-weight: 500; font-feature-settings: "tnum"; }
.sem-item.equilibrio .sem-value { color: var(--green); }
.sem-item.superavit  .sem-value { color: var(--blue); }
.sem-item.deficit    .sem-value { color: var(--red); }

/* ─── Deficit list ───────────────────────────────────────── */
.deficit-list { display: flex; flex-direction: column; gap: 0; }
.deficit-item {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-2);
}
.deficit-item:last-child { border-bottom: none; }
.deficit-name { font-size: 13px; font-weight: 500; color: var(--text); }
.deficit-sub  { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.deficit-patrimonio { font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.deficit-label { font-size: 10px; color: var(--text-3); }
.deficit-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  font-family: var(--mono);
  text-align: right;
  font-feature-settings: "tnum";
}
.deficit-empty { padding: 32px; text-align: center; color: var(--text-3); font-size: 13px; }

/* New deficit item style */
.def-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
}
.def-item:last-child { border-bottom: none; }
.def-pos {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-4);
  min-width: 18px;
  padding-top: 2px;
  text-align: right;
  flex-shrink: 0;
}
.def-info { min-width: 0; flex: 1; }
.def-label { font-size: 13px; font-weight: 600; color: var(--text); }
.def-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.def-metrics { margin-top: 4px; }
.def-deficit { font-size: 12px; font-weight: 600; color: var(--red); font-family: var(--mono); }
.def-sep { font-size: 12px; color: var(--text-3); }
.def-pat { font-size: 12px; color: var(--text-3); font-family: var(--mono); }

/* ─── Data Tables ────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead { background: var(--off); }
.data-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table th.num { text-align: right; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sortable.sort-asc::after  { content: ' ↑'; color: var(--blue); }
.data-table th.sortable.sort-desc::after { content: ' ↓'; color: var(--blue); }
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table td.num { text-align: right; font-family: var(--mono); font-feature-settings: "tnum"; }
.data-table tr:hover td { background: var(--off); }
.data-table tr:last-child td { border-bottom: none; }

.badge-patrocinio {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 500;
  background: var(--off);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.badge-patrocinio.federal    { background: rgba(24,95,165,.1);   color: var(--blue);   border-color: rgba(24,95,165,.2); }
.badge-patrocinio.privada    { background: rgba(123,63,160,.08); color: #7B3FA0;        border-color: rgba(123,63,160,.15); }
.badge-patrocinio.estadual   { background: rgba(15,118,110,.1);  color: var(--teal);   border-color: rgba(15,118,110,.2); }
.badge-patrocinio.municipal  { background: rgba(196,120,14,.1);  color: var(--amber);  border-color: rgba(196,120,14,.2); }
.badge-patrocinio.instituidor{ background: rgba(30,110,66,.1);   color: var(--green);  border-color: rgba(30,110,66,.2); }

/* ─── Method note ────────────────────────────────────────── */
.method-note {
  margin-top: 24px;
  background: var(--off);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}
.method-note strong { color: var(--text-2); font-weight: 600; }
.method-note.compact { margin-top: 12px; padding: 10px 14px; font-size: 11px; }
.mt-12 { margin-top: 12px; }

/* ─── Variação block (ativos) ────────────────────────────── */
.variacao-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 16px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.var-item { text-align: center; }
.var-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 6px; }
.var-value { font-size: 24px; font-weight: 500; color: var(--text); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.var-meta  { font-size: 10px; color: var(--text-3); font-family: var(--mono); margin-top: 2px; }
.var-arrow { text-align: center; }
.var-pct   { font-size: 22px; font-weight: 500; font-feature-settings: "tnum"; }
.var-abs   { font-size: 11px; font-family: var(--mono); color: var(--text-3); margin-top: 2px; }
.var-arrow.positivo .var-pct { color: var(--green); }
.var-arrow.negativo .var-pct { color: var(--red); }

/* ─── Patrimônio by modality ─────────────────────────────── */
.mod-kpi {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--off);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid var(--blue);
}
.mod-kpi.bd { border-left-color: var(--blue); }
.mod-kpi.cd { border-left-color: #2D7D46; }
.mod-kpi.cv { border-left-color: #7B3FA0; }
.mod-pct  { font-size: 18px; font-weight: 500; color: var(--text); font-feature-settings: "tnum"; }
.mod-label{ font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); flex-shrink: 0; }
.mod-val  { font-size: 11px; font-family: var(--mono); color: var(--text-3); margin-left: auto; }

/* ─── Loading Overlay ────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-content { text-align: center; }
.loading-mark { width: 64px; height: 64px; margin: 0 auto 20px; }
.loading-mark svg { width: 100%; height: 100%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.loading-label { font-size: 20px; font-weight: 600; color: #E8F1FB; letter-spacing: .06em; }
.loading-sub { font-size: 12px; color: rgba(181,212,244,.4); margin-top: 6px; font-family: var(--mono); }

/* ─── Empty states ───────────────────────────────────────── */
.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ─── Misc utility ───────────────────────────────────────── */
.positivo { color: var(--green); }
.negativo { color: var(--red); }
td.mono { font-family: var(--mono); font-size: 12px; }

/* ══════════════════════════════════════════════════════════
   SEGMENTOS DE INVESTIMENTO
   ══════════════════════════════════════════════════════════ */

.seg-tab-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.seg-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: var(--font);
}
.seg-tab:hover { border-color: var(--blue); color: var(--blue); }
.seg-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.seg-tab.chip-bd:not(.active) { border-color: var(--blue);   color: var(--blue);   background: var(--blue-wash); }
.seg-tab.chip-cd:not(.active) { border-color: #2a9d5c; color: #2a9d5c; background: #e7f6ee; }
.seg-tab.chip-cv:not(.active) { border-color: #7B3FA0; color: #7B3FA0; background: rgba(123,63,160,.08); }

.seg-list { display: flex; flex-direction: column; gap: 0; }
.seg-group { border-bottom: 1px solid var(--border-2); }
.seg-group:first-child { border-top: 1px solid var(--border-2); }
.seg-group summary { list-style: none; }
.seg-group summary::-webkit-details-marker { display: none; }

.seg-row {
  display: grid;
  grid-template-columns: 160px 1fr 68px 78px 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .1s;
}
.seg-row:hover { background: var(--off); }

.seg-nome { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.seg-nome small { display: block; font-weight: 400; font-size: 11px; color: var(--text-3); }

.seg-bar-wrap {
  position: relative;
  height: 7px;
  background: var(--off);
  border-radius: 4px;
  overflow: visible;
}
.seg-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--blue);
  transition: width .35s ease;
  position: relative;
  z-index: 1;
}
.seg-bar-fill.warn { background: #f39c12; }
.seg-bar-fill.over { background: var(--red); max-width: 100%; border-radius: 4px 0 0 4px; }
.seg-bar-limit {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--text-3) 0, var(--text-3) 3px, transparent 3px, transparent 6px);
  z-index: 2;
  border-radius: 1px;
}

.seg-pct-val { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); text-align: right; font-feature-settings: "tnum"; }
.seg-pct-val.over { color: var(--red); }

.seg-limite-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--off);
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
}
.seg-limite-badge.over { background: #fff0f0; color: #c0392b; font-weight: 600; }

.seg-chevron {
  font-size: 16px;
  color: var(--text-3);
  text-align: center;
  transition: transform .2s;
  line-height: 1;
}
.seg-group[open] .seg-chevron { transform: rotate(90deg); }

.seg-detail {
  padding: 0 4px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seg-detail-header {
  display: grid;
  grid-template-columns: 20px 1fr 140px 72px 90px;
  gap: 8px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
}
.seg-detail-item {
  display: grid;
  grid-template-columns: 20px 1fr 140px 72px 90px;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background .1s;
}
.seg-detail-item:hover { background: var(--off); }

.sdi-tipo { font-size: 9px; font-weight: 700; padding: 2px 4px; border-radius: 3px; text-align: center; letter-spacing: .02em; }
.sdi-tipo-fundo  { background: #dbeafe; color: #1d4ed8; }
.sdi-tipo-direto { background: #dcfce7; color: #15803d; }

.sdi-label { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdi-bar-wrap { height: 5px; background: var(--border-2); border-radius: 3px; overflow: hidden; }
.sdi-bar { height: 100%; background: var(--blue); border-radius: 3px; opacity: .65; }
.sdi-seg-pct { font-family: var(--mono); font-size: 11px; color: var(--text-2); text-align: right; }
.sdi-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); text-align: right; font-feature-settings: "tnum"; }

/* ─── Tooltip ────────────────────────────────────────────
   Motor único em .tl-tip (topo do app.js). O antigo #goven-tooltip, que
   seguia o cursor e só respondia a mouse, foi retirado. */

/* ══════════════════════════════════════════════════════════
   PGA ANALYTICS MODULE
   ══════════════════════════════════════════════════════════ */

.pga-view-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pga-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pga-tab:hover { border-color: var(--blue-mid); color: var(--blue-mid); }
.pga-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

#pga-rank-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 14px;
  flex-wrap: wrap;
}

.pga-tree { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }

.pga-tree-row {
  display: grid;
  grid-template-columns: 16px 1fr 64px 110px 90px 24px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  list-style: none;
}
.pga-tree-total {
  grid-template-columns: 1fr 110px 90px;
  background: var(--off);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.pga-tree-resultado {
  grid-template-columns: 1fr 110px 90px;
  font-weight: 700;
  font-size: 13px;
  border-top: 1.5px dashed var(--border-st);
  margin-top: 6px;
  padding-top: 10px;
  border-radius: 0;
}
.pga-nat-group { border-radius: var(--radius-sm); overflow: hidden; }
.pga-nat-group + .pga-nat-group { margin-top: 2px; }

.pga-nat-row {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-weight: 600;
  color: var(--text);
  list-style: none;
  border-left: 3px solid var(--nat-color, var(--blue));
  transition: background .1s;
}
.pga-nat-row::-webkit-details-marker { display: none; }
.pga-nat-row::marker { display: none; }
.pga-nat-row:hover { background: var(--off); }
.pga-nat-group[open] .pga-nat-row { background: var(--off); }

.pga-leaf-row {
  grid-template-columns: 16px 1fr 64px 110px 90px;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: default;
  transition: background .1s;
}
.pga-leaf-row:hover { background: var(--off); }

.ptr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; justify-self: center; }
.ptr-indent { display: block; }
.ptr-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptr-leaf { font-size: 11px; color: var(--text-2); font-weight: 400; padding-left: 4px; }
.ptr-pct { font-family: var(--mono); font-size: 11px; color: var(--text-3); text-align: right; }
.ptr-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); text-align: right; font-feature-settings: "tnum"; }
.ptr-var { font-size: 10px; font-weight: 600; text-align: right; white-space: nowrap; }
.ptr-chevron { font-size: 14px; color: var(--text-3); text-align: center; line-height: 1; transition: transform .18s; }
.pga-nat-group[open] .ptr-chevron { transform: rotate(90deg); }

.pga-var-pos { color: #16a34a; }
.pga-var-neg { color: var(--red); }
.pga-ext-hi  { color: var(--red);   font-weight: 700; }
.pga-ext-mid { color: var(--amber); font-weight: 600; }

.pga-ext-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
}
.pga-ext-pill b { font-family: var(--mono); font-size: 10px; color: var(--amber); }

.pga-ent-nat { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 8px; }
.pga-ent-nat-item { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; font-size: 12px; }
.pga-ent-nat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pga-ent-nat-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 4px 0 12px; gap: 1px; }
.pga-ent-nat-bar > div { border-radius: 0; }
.pga-ent-nat-bar > div:first-child { border-radius: 4px 0 0 4px; }
.pga-ent-nat-bar > div:last-child  { border-radius: 0 4px 4px 0; }

/* ══════════════════════════════════════════════════════════
   RELACIONAMENTOS MODULE
   ══════════════════════════════════════════════════════════ */

.rel-search-wrap { position: relative; max-width: 640px; margin-bottom: 16px; }
.rel-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  transition: border-color .12s;
}
.rel-search-inner:focus-within { border-color: var(--blue-mid); }
.rel-search-icon { font-size: 18px; color: var(--text-3); line-height: 1; }
.rel-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: transparent;
  padding: 10px 0;
}
.rel-search-input::placeholder { color: var(--text-3); }
.rel-search-clear {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.rel-search-clear:hover { background: var(--off); color: var(--text); }

.rel-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(26,32,48,.10);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.rel-dd-item {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-2);
  font-size: 12px;
  transition: background .1s;
}
.rel-dd-item:last-child { border-bottom: none; }
.rel-dd-item:hover { background: var(--off); }
.rel-dd-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-mid); background: var(--blue-wash); padding: 2px 6px; border-radius: 10px; white-space: nowrap; }
.rel-dd-sg { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-dd-nome { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

.rel-mode-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rel-mode-pill {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all .12s;
}
.rel-mode-pill:hover  { border-color: var(--blue-mid); color: var(--blue-mid); }
.rel-mode-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.rel-count { display: inline-block; margin-left: 4px; background: rgba(255,255,255,.18); border-radius: 8px; padding: 0 5px; font-size: 10px; }
.rel-mode-pill:not(.active) .rel-count { background: var(--off); color: var(--text-3); }

.rel-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; min-height: 600px; }
@media (max-width: 860px) { .rel-layout { grid-template-columns: 1fr; } }

.rel-list-panel { display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rel-list-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-2); background: var(--off); }
.rel-list-filter { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-family: var(--font); font-size: 12px; color: var(--text); background: var(--surface); outline: none; }
.rel-list-filter:focus { border-color: var(--blue-mid); }
.rel-list-count { font-size: 10px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.rel-list { overflow-y: auto; flex: 1; max-height: 680px; }

.rel-list-item { padding: 10px 14px; border-bottom: 1px solid var(--border-2); cursor: pointer; transition: background .1s; }
.rel-list-item:hover  { background: var(--off); }
.rel-list-item.active { background: var(--blue-wash); border-left: 3px solid var(--blue-mid); }
.rel-list-item:last-child { border-bottom: none; }

.rel-li-main { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.rel-li-sg   { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.rel-li-sub  { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.rel-li-stats{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rel-li-stat  { font-size: 10px; color: var(--text-3); }
.rel-li-stat b{ color: var(--text); }
.rel-li-dot   { font-size: 10px; color: var(--border); }

.rel-badge-pub  { background: var(--blue-wash); color: var(--blue);  border-radius: 10px; padding: 1px 6px; font-size: 9px; font-weight: 700; }
.rel-badge-priv { background: rgba(45,125,70,.1); color: var(--green);border-radius: 10px; padding: 1px 6px; font-size: 9px; font-weight: 700; }
.rel-badge-inst { background: var(--amber-lt);   color: var(--amber); border-radius: 10px; padding: 1px 6px; font-size: 9px; font-weight: 700; }

.rel-detail-panel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 22px; overflow-y: auto; max-height: 780px; }
.rel-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 200px; color: var(--text-3); font-size: 13px; }
.rel-detail-empty-icon { font-size: 32px; opacity: .3; }

.rel-detail-header { margin-bottom: 4px; }
.rel-detail-sg { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.rel-detail-nome { font-size: 13px; color: var(--text-2); margin: 2px 0 6px; }
.rel-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rel-detail-cnpj { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.rel-badge { border-radius: 10px; padding: 2px 8px; font-size: 10px; font-weight: 700; }

.rel-plano-header-row { display: grid; grid-template-columns: 110px 1fr 80px 100px 120px 20px; gap: 8px; padding: 5px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border-2); margin-bottom: 4px; }

.rel-planos-list { display: flex; flex-direction: column; gap: 2px; }
.rel-plano-group { border-radius: var(--radius-sm); overflow: hidden; }
.rel-plano-row { display: grid; grid-template-columns: 110px 1fr 80px 100px 120px 20px; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; list-style: none; transition: background .1s; }
.rel-plano-row::-webkit-details-marker { display: none; }
.rel-plano-row::marker { display: none; }
.rel-plano-row:hover { background: var(--off); }
.rel-plano-group[open] .rel-plano-row { background: var(--off); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

.rel-plano-sg   { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; }
.rel-plano-nome { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-plano-pat  { font-size: 11px; color: var(--text-3); text-align: right; }
.rel-plano-val  { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }
.rel-plano-sit  { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 10px; text-align: center; }
.rel-sit-em-funcionamento  { background: #dcfce7; color: #166534; }
.rel-sit-em-extinção       { background: var(--amber-lt); color: var(--amber); }
.rel-sit-cancelado         { background: var(--red-lt); color: var(--red); }
.rel-chevron { font-size: 14px; color: var(--text-3); text-align: center; transition: transform .18s; }
.rel-plano-group[open] .rel-chevron { transform: rotate(90deg); }

.rel-pat-list { border: 1px solid var(--border-2); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--off); padding: 4px 0; }
.rel-pat-empty { padding: 10px 14px; font-size: 11px; color: var(--text-3); }
.rel-pat-row { display: grid; grid-template-columns: 155px 1fr auto; align-items: center; gap: 8px; padding: 7px 14px; font-size: 11px; cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--border-2); }
.rel-pat-row:last-child { border-bottom: none; }
.rel-pat-row:hover { background: var(--blue-wash); }
.rel-pat-cnpj  { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.rel-pat-nome  { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-pat-badge { font-size: 9px; font-weight: 600; color: var(--blue-mid); white-space: nowrap; }

.rel-efpc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.rel-efpc-group { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 4px; }
.rel-efpc-group-row { display: grid; grid-template-columns: 90px 1fr auto 20px; align-items: center; gap: 8px; padding: 9px 12px; background: var(--off); border: 1px solid var(--border-2); cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: background .1s; }
.rel-efpc-group-row::-webkit-details-marker { display: none; }
.rel-efpc-group-row::marker { display: none; }
.rel-efpc-group[open] .rel-efpc-group-row { border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--blue-wash); }
.rel-efpc-group[open] .rel-chevron { transform: rotate(90deg); }

.rel-pat-plano-row { display: grid; grid-template-columns: 28px 90px 1fr auto; align-items: center; gap: 8px; padding: 7px 14px; font-size: 11px; cursor: pointer; border-bottom: 1px solid var(--border-2); background: var(--off); transition: background .1s; }
.rel-pat-plano-row:last-child { border-bottom: none; }
.rel-pat-plano-row:hover { background: var(--blue-wash); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — ≥ 1280px full, < 1280px collapse sidebar
   ══════════════════════════════════════════════════════════ */

/* A sidebar deixou de recolher sozinha por largura de tela: o estado agora é do
   usuário (body[data-sidebar]) e o recolhimento vem com nome acessível em todos
   os itens. Ver bloco "Sidebar retrátil" no fim deste arquivo. */
@media (max-width: 1280px) {
  .section { padding: 24px 24px 48px; }
  .topbar { padding: 0 24px; }
  .grid-hero { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 5 — Transições editoriais · cubic-bezier(0.2, 0, 0, 1) · 160–200ms
   "Hover em cards: box-shadow sutil em vez de transform"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Universal easing token ─────────────────────────────────────────── */
:root {
  --ease-ed:   cubic-bezier(0.2, 0, 0, 1);
  --dur-short: 160ms;
  --dur-mid:   200ms;
}

/* ─── Cards: box-shadow hover (sem transform) ────────────────────────── */
.card {
  transition: box-shadow var(--dur-mid) var(--ease-ed),
              border-color var(--dur-short) var(--ease-ed);
}
.card:hover {
  box-shadow: 0 2px 12px rgba(10,20,40,.07), 0 1px 3px rgba(10,20,40,.04);
  border-color: var(--border-st);
}

/* hero card: mesmo padrão sutil */
.ed-hero-card {
  transition: box-shadow var(--dur-mid) var(--ease-ed);
}
.ed-hero-card:hover {
  box-shadow: 0 3px 16px rgba(10,20,40,.08);
}

/* ─── Nav items ──────────────────────────────────────────────────────── */
.nav-item {
  transition: background var(--dur-short) var(--ease-ed),
              color var(--dur-short) var(--ease-ed);
}

/* ─── Topbar actions ──────────────────────────────────────────────────── */
.topbar-search-widget,
.topbar-export-btn {
  transition: background var(--dur-short) var(--ease-ed),
              border-color var(--dur-short) var(--ease-ed),
              color var(--dur-short) var(--ease-ed);
}

/* ─── Metrics rail cells ─────────────────────────────────────────────── */
.ed-metric {
  transition: background var(--dur-short) var(--ease-ed);
}
.ed-metric:hover {
  background: var(--surface-alt);
}

/* ─── Treemap cells ──────────────────────────────────────────────────── */
.treemap-big,
.treemap-cell {
  transition: filter var(--dur-short) var(--ease-ed),
              box-shadow var(--dur-mid) var(--ease-ed);
  cursor: pointer;
}
.treemap-big:hover,
.treemap-cell:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
}

/* ─── DotRank rows ───────────────────────────────────────────────────── */
.dot-rank-row {
  transition: background var(--dur-short) var(--ease-ed);
  cursor: pointer;
}
.dot-rank-row:hover {
  background: var(--surface-alt);
}

/* ─── Composition rows ───────────────────────────────────────────────── */
.c-composition-row {
  transition: background var(--dur-short) var(--ease-ed);
  cursor: pointer;
}
.c-composition-row:hover {
  background: var(--surface-alt);
}

/* ─── Bar rows (legacy charts) ───────────────────────────────────────── */
.bar-row {
  transition: background var(--dur-short) var(--ease-ed);
}
.bar-row:hover {
  background: var(--surface-alt);
}

/* ─── Topbar period (date-picker trigger) ────────────────────────────── */
.topbar-period {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
  transition: background var(--dur-short) var(--ease-ed),
              color var(--dur-short) var(--ease-ed);
}
.topbar-period:hover {
  background: var(--surface-alt);
  color: var(--blue);
}

/* ─── Segment group (investimentos) ─────────────────────────────────── */
.seg-group summary.seg-row {
  transition: background var(--dur-short) var(--ease-ed);
}
.seg-group summary.seg-row:hover {
  background: var(--surface-alt);
}

/* ─── PGA tree rows ──────────────────────────────────────────────────── */
.pga-nat-group summary.pga-tree-row,
.pga-tree-row {
  transition: background var(--dur-short) var(--ease-ed);
}
.pga-nat-group summary.pga-tree-row:hover {
  background: var(--surface-alt);
}

/* ─── Responsive: ≤768px — empilha grid-3, oculta sparklines hero ────── */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .ed-sparkline-header,
  .ed-sparkline-header + div { display: none; }
  .ed-hero-number { font-size: 44px; }
  .topbar-search-widget span:first-of-type { display: none; }
}

/* ======================================================================
   DNA DA EFPC
   ====================================================================== */
.dna-search-wrap{position:relative;margin:0 0 24px 0;z-index:50}
.dna-search-inner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;transition:border-color .15s}
.dna-search-inner:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.10)}
.dna-search-icon{color:var(--text-3);flex-shrink:0}
.dna-search-input{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--text-1);outline:none}
.dna-search-input::placeholder{color:var(--text-3)}
.dna-search-clear{border:none;background:none;color:var(--text-3);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:4px}
.dna-search-clear:hover{background:var(--surface-alt);color:var(--text-1)}
.dna-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;z-index:100}
.dna-dd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s}
.dna-dd-item:hover{background:var(--surface-alt)}
.dna-dd-sg{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--blue);min-width:80px}
.dna-dd-nome{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dna-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 24px;text-align:center}
.dna-empty-icon{opacity:.45}
.dna-empty-title{font-size:15px;font-weight:600;color:var(--text-2)}
.dna-empty-sub{font-size:12px;color:var(--text-3)}
.dna-empty-tab{padding:20px;font-size:12px;color:var(--text-3)}
.dna-hero{display:grid;grid-template-columns:1fr auto;gap:24px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 28px 24px;margin-bottom:24px}
.dna-hero-sg-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dna-hero-sg{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--blue);letter-spacing:-.01em}
.dna-hero-status-sub{font-size:11px;color:var(--text-3);background:var(--surface-alt);border-radius:4px;padding:2px 7px}
.dna-hero-nome{font-size:13px;font-weight:500;color:var(--text-2);line-height:1.4;margin-bottom:12px;text-transform:uppercase;letter-spacing:.03em}
.dna-hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dna-chip{font-size:11px;color:var(--text-2);background:var(--surface-alt);border:1px solid var(--border);border-radius:5px;padding:3px 8px}
.dna-chip-label{font-weight:600;color:var(--text-3);margin-right:4px}
.dna-hero-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.dna-link,.dna-link-plain{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--blue);text-decoration:none}
.dna-link:hover{text-decoration:underline}
.dna-link-plain{color:var(--text-3)}
/* KPIs do DNA: 3 colunas quando cabe, menos quando não cabe. O min-width fixo
   de 340px estourava a largura da tela em janela estreita. */
.dna-hero-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:12px;min-width:0}
.dna-kpi{min-width:0}
.dna-kpi-value{overflow-wrap:anywhere}
.dna-kpi{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.dna-kpi-label{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.dna-kpi-value{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text-1);line-height:1.2}
.dna-kpi-pos{color:#059669}
.dna-kpi-neg{color:#dc2626}
.dna-kpi-sub{font-size:10px;color:var(--text-3);margin-top:3px}
.dna-gov-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dna-gov-chip{font-size:12px;color:var(--text-2);background:var(--surface-alt);border:1px solid var(--border);border-radius:6px;padding:6px 12px}
.dna-gov-chip-n{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--blue)}
.dna-gov-chip-max{font-size:11px;color:var(--text-3);margin-left:2px}
.dna-tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--border);margin-bottom:16px}
.dna-tab{border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text-3);padding:7px 14px;border-bottom:2px solid transparent;margin-bottom:-1.5px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.dna-tab:hover{color:var(--text-1)}
.dna-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.dna-tab-n{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-alt);color:var(--text-3);font-size:10px;font-weight:600;border-radius:10px;padding:1px 6px;margin-left:5px}
.dna-tab.active .dna-tab-n{background:rgba(24,95,165,.12);color:var(--blue)}
.dna-table-wrap{overflow-x:auto}
.dna-table{width:100%;border-collapse:collapse;font-size:12px}
.dna-table th{padding:7px 10px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1.5px solid var(--border);white-space:nowrap}
.dna-table th.num{text-align:right}
.dna-table td{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.04);color:var(--text-2);vertical-align:middle}
.dna-table td.num{text-align:right}
.dna-table tr:last-child td{border-bottom:none}
.dna-table tr:hover td{background:var(--surface-alt)}
.rep-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:700;cursor:default}
.rep-part{background:rgba(24,95,165,.12);color:var(--blue)}
.rep-patro{background:rgba(217,119,6,.12);color:#b45309}
.rep-other{background:var(--surface-alt);color:var(--text-3)}
.mod-badge{font-family:var(--mono);font-size:10px;font-weight:700;border-radius:4px;padding:2px 6px}
.mod-bd{background:rgba(124,58,237,.12);color:#6d28d9}
.mod-cd{background:rgba(5,150,105,.12);color:#047857}
.mod-cv{background:rgba(217,119,6,.12);color:#b45309}
.status-badge{font-size:10px;font-weight:600;border-radius:4px;padding:2px 7px;letter-spacing:.04em}
.status-ok{background:rgba(5,150,105,.12);color:#047857}
.status-extinc{background:rgba(220,38,38,.10);color:#b91c1c}
.status-other{background:var(--surface-alt);color:var(--text-3)}
.pat-badge{font-size:10px;font-weight:600;border-radius:4px;padding:3px 8px;letter-spacing:.04em}
.pat-priv{background:rgba(24,95,165,.10);color:var(--blue)}
.pat-fed{background:rgba(124,58,237,.10);color:#6d28d9}
.pat-est{background:rgba(217,119,6,.10);color:#b45309}
.pat-mun{background:rgba(5,150,105,.10);color:#047857}
.pat-inst{background:rgba(220,38,38,.08);color:#b91c1c}
.dna-pres-badge{display:inline-flex;align-items:center;background:rgba(24,95,165,.12);color:var(--blue);font-size:9px;font-weight:700;letter-spacing:.06em;border-radius:3px;padding:1px 5px;margin-left:5px}

/* ── Compact modal comparison bars ─────────────────────────────────────── */
.mod-compare-wrap{display:flex;flex-direction:column;gap:8px;margin:16px 0 0}
.mod-cbar-row{display:flex;align-items:center;gap:10px}
.mod-cbar-label{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.03em;width:80px;flex-shrink:0;text-transform:uppercase}
.mod-cbar-track{flex:1;display:flex;height:26px;border-radius:4px;overflow:hidden;gap:1px}
.mod-cbar-seg{display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;min-width:0;transition:flex .3s ease}
.mod-cbar-seg span{padding:0 6px;pointer-events:none}
.mod-cbar-total{font-size:11.5px;font-family:var(--mono);color:var(--text);width:90px;text-align:right;flex-shrink:0}

/* ── Modal comparison table ─────────────────────────────────────────────── */
.mod-compare-table td,.mod-compare-table th{padding:7px 10px;line-height:1.3}
.mod-compare-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.mod-ct-label{font-size:12px;font-weight:600;color:var(--text-1)}
.mod-ct-pct{font-size:10px;color:var(--text-3);font-family:var(--mono)}
.mod-ct-total{font-weight:700;color:var(--text-1) !important}
.mod-ct-na{font-size:10.5px;color:var(--text-4);font-style:italic;text-align:center !important}

/* ── Inteligência Comercial ─────────────────────────────────────────────── */
.intel-radar{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.intel-radar-row{display:flex;align-items:center;gap:10px}
.intel-radar-sem{font-size:11px;font-weight:600;font-family:var(--mono);color:var(--text-2);width:78px;flex-shrink:0}
.intel-radar-track{flex:1;display:flex;height:22px;border-radius:3px;overflow:hidden;gap:1px;background:var(--bg-2)}
.intel-radar-seg{height:100%;min-width:2px;transition:width .3s ease}
.intel-radar-tot{font-size:11.5px;font-family:var(--mono);color:var(--text-1);width:150px;text-align:right;flex-shrink:0}
.intel-radar-tot small{color:var(--text-4);font-size:9.5px}
.intel-legend{display:flex;gap:16px;margin-top:14px;padding-top:10px;border-top:1px solid var(--border)}
.intel-legend span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-3)}
.intel-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

.intel-pares{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.intel-par{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-1)}
.intel-par-side{min-width:0}
.intel-par-side.caro{border-left:3px solid var(--red);padding-left:10px}
.intel-par-side.barato{border-left:3px solid var(--green);padding-left:10px}
.intel-par-sg{font-size:12.5px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-par-num{font-size:14px;font-family:var(--mono);color:var(--text);margin-top:2px}
.intel-par-num small{font-size:9.5px;color:var(--text-4);font-family:var(--sans)}
.intel-par-meta{font-size:10px;color:var(--text-4);margin-top:2px}
.intel-par-mid{text-align:center;flex-shrink:0}
.intel-par-ratio{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--red)}
.intel-par-exc{font-size:9.5px;color:var(--text-3);white-space:nowrap}

.intel-score-wrap{position:relative;width:110px;height:18px;background:var(--bg-2);border-radius:3px;overflow:hidden}
.intel-score-bar{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--blue),#7C5CBF);border-radius:3px}
.intel-score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;font-family:var(--mono);color:var(--text-1)}
.intel-tag{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:10px;white-space:nowrap;margin:1px 0}

/* ── Estratégia ─────────────────────────────────────────────────────────── */
.card-footnote{font-size:10.5px;line-height:1.5;color:var(--text-3);padding-top:10px;border-top:1px solid var(--border-2)}
.card-footnote b{color:var(--text-2);font-weight:600}
.footnote-block{font-size:10.5px;line-height:1.6;color:var(--text-4);margin:20px 0 0;padding:14px 16px;background:var(--off);border-radius:6px}

/* Scatter ciclo de vida */
.ciclo-scatter{width:100%;height:auto;display:block;margin:8px 0 4px;overflow:visible}
.scat-pt circle{transition:fill-opacity .15s}
.scat-pt:hover circle{fill-opacity:.8}
.ciclo-quad-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-2)}
.ciclo-quad-legend>div{font-size:11.5px;color:var(--text-2);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ciclo-quad-legend b{font-family:var(--mono);font-weight:700;color:var(--text-1)}
.ciclo-quad-legend small{color:var(--text-4);font-size:10px}
.cq-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;align-self:center}

/* IGov */
.igov-table td{vertical-align:middle}
.igov-score{display:inline-flex;align-items:center;justify-content:center;width:34px;height:24px;border-radius:5px;font-family:var(--mono);font-weight:700;font-size:13px}
.igov-score-low{background:var(--red-lt);color:var(--red)}
.igov-score-mid{background:var(--amber-lt);color:var(--amber)}
.igov-score-ok{background:var(--green-lt);color:var(--green)}
.igov-mini{position:relative;width:64px;height:15px;background:var(--off);border-radius:3px;overflow:hidden}
.igov-mini-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;opacity:.65}
.igov-mini span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;font-family:var(--mono);color:var(--text-2)}
.igov-na{display:flex;align-items:center;justify-content:center;color:var(--text-4);font-size:11px}

/* Consolidação */
.consol-list{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.consol-chip{padding:9px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-1);display:flex;flex-direction:column;gap:1px}
.consol-chip b{font-size:12.5px;color:var(--text-1)}
.consol-chip span{font-size:10px;color:var(--text-4);font-family:var(--mono)}

/* Produto */
.prod-list{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.prod-item{padding:9px 4px;border-bottom:1px solid var(--border-2)}
.prod-item:last-child{border-bottom:none}
.prod-sg{font-size:12.5px;font-weight:700;color:var(--text-1)}
.prod-meta{font-size:10.5px;color:var(--text-4);font-family:var(--mono);margin-top:1px}

/* Leads v2 */
.lead2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0}
.lead2-card{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.lead2-rank{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text-4);flex-shrink:0;padding-top:1px}
.lead2-body{flex:1;min-width:0}
.lead2-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lead2-sg{font-size:13.5px;font-weight:700;color:var(--text-1)}
.lead2-porte{font-size:10px;color:var(--text-3);background:var(--off);padding:1px 7px;border-radius:9px}
.lead2-score{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--blue);background:var(--blue-wash);padding:2px 9px;border-radius:5px}
.lead2-sinais{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.lead2-sinal{font-size:9px;font-weight:600;padding:1px 7px;border:1px solid;border-radius:9px;text-transform:capitalize}
.lead2-pitch{font-size:11px;color:var(--text-2);margin-top:9px;line-height:1.45}
.lead2-pitch-label{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-right:4px}

/* ── Dossiê de abordagem ────────────────────────────────────────────────── */
.dossie{max-width:1000px}
.dos-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:4px 0 20px;border-bottom:2px solid var(--navy);margin-bottom:20px}
.dos-head-left{min-width:0}
.dos-sg{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1}
.dos-nome{font-size:14px;color:var(--text-2);margin-top:4px;font-weight:500}
.dos-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
.dos-tag{font-size:10.5px;font-weight:600;color:var(--text-2);background:var(--off);padding:2px 9px;border-radius:10px}
.dos-tag-soft{font-size:10.5px;color:var(--text-3);padding:2px 4px}
.dos-head-score{flex-shrink:0;text-align:right;min-width:170px}
.dos-score-label{font-size:8.5px;font-weight:700;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.dos-score-num{font-size:54px;font-weight:800;line-height:1;font-family:var(--mono);margin:2px 0 6px}
.dos-score-sinais{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.dos-sinal{font-size:9px;font-weight:600;padding:1px 7px;border:1px solid;border-radius:9px;text-transform:capitalize}

.dos-retrato{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border-2);border:1px solid var(--border-2);border-radius:8px;overflow:hidden;margin-bottom:8px}
.dos-kpi{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dos-kpi-v{font-size:16px;font-weight:700;color:var(--text-1);font-family:var(--mono)}
.dos-kpi-l{font-size:9.5px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}

.dos-eixos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dos-eixo{border:1px solid var(--border);border-radius:8px;padding:14px;background:var(--surface)}
.dos-eixo-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dos-eixo-titulo{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.dos-eixo-sub{font-size:9px;color:var(--amber);font-weight:600}
.dos-eixo-valor{font-size:22px;font-weight:800;margin:6px 0 8px;line-height:1.1}
.dos-eixo-leitura{font-size:11px;line-height:1.5;color:var(--text-2)}

.dos-cart-bar{display:flex;height:26px;border-radius:5px;overflow:hidden;gap:1px;margin-bottom:12px}
.dos-cart-seg{min-width:2px;transition:flex .3s}
.dos-cart-leg{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}
.dos-cart-leg span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2)}
.dos-cart-leg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.dos-cart-leg b{font-family:var(--mono);color:var(--text-1)}
.dos-cart-foot{font-size:10.5px;color:var(--text-4);font-family:var(--mono);padding-top:8px;border-top:1px solid var(--border-2)}

.dos-plano{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.dos-oferta{display:flex;gap:14px;padding:14px 16px;border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px;background:var(--surface)}
.dos-oferta-n{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text-4);flex-shrink:0}
.dos-oferta-body{flex:1;min-width:0}
.dos-oferta-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dos-oferta-prod{font-size:14px;font-weight:700;color:var(--text-1)}
.dos-oferta-urg{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:9px}
.dos-oferta-gat{font-size:11.5px;line-height:1.55;color:var(--text-2);margin-top:5px}

@media (max-width:900px){
  .lead2-grid,.ciclo-quad-legend{grid-template-columns:1fr}
  .dos-retrato{grid-template-columns:repeat(3,1fr)}
  .dos-eixos{grid-template-columns:1fr}
  .dos-header{flex-direction:column}
  .dos-head-score{text-align:left;min-width:0}
  .dos-score-sinais{justify-content:flex-start}
}

/* Garante que o atributo hidden realmente esconde (nav usa display:grid/flex) */
.nav-item[hidden], .nav-group-label[hidden] { display: none !important; }

/* ── Tooltip flutuante p/ gráficos (hover em barras da timeline) ─────────────── */
.tl-tip{position:fixed;transform:translate(-50%,-100%);background:#16283C;color:#fff;
  font-family:var(--mono);font-size:11.5px;line-height:1.55;padding:8px 11px;border-radius:8px;
  box-shadow:0 8px 24px rgba(15,39,66,.22);pointer-events:none;z-index:9999;white-space:nowrap;display:none}
.tl-tip b{color:#8CC0F0;font-weight:800}
.tl-hit{cursor:pointer;transition:fill-opacity .12s}
.tl-hit:hover{fill-opacity:.06 !important}


/* ── Refino 2026-08 · escala, competência e composição ──────────────────────── */

/* Aviso de escala relativa (barras que NÃO usam escala percentual 0–100%) */
.bar-scale-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--text-4);
  margin-top: 6px;
  text-align: right;
}

/* Selo discreto de competência por bloco */
.ref-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.5;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--off);
  border: 1px solid var(--border);
  color: var(--text-3);
  white-space: nowrap;
  cursor: help;
  vertical-align: 1px;
}

/* Barra empilhada de 100% (composição fechada) */
.st100-wrap { padding: 6px 0 2px; }
.st100-bar {
  display: flex;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  gap: 1px;
}
.st100-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.94);
  font-feature-settings: "tnum";
  transition: flex .3s ease;
}
.st100-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
}
.st100-leg-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; }
.st100-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; transform: translateY(1px); }
.st100-leg-label { color: var(--text); font-weight: 600; }
.st100-leg-val   { color: var(--text-2); font-family: var(--mono); font-size: 11.5px; }
.st100-leg-pct   { color: var(--text-3); font-family: var(--mono); font-size: 11.5px; font-feature-settings: "tnum"; }

/* Pirâmide etária: escala absoluta simétrica + eixo visível */
.pyr-row { grid-template-columns: 1fr 96px 1fr; }
.pyr-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pyr-side.left  { justify-content: flex-end; }
.pyr-side.right { justify-content: flex-start; }
.pyr-side .pyr-bar-left, .pyr-side .pyr-bar-right { flex: 1 1 auto; min-width: 0; }
.pyr-num {
  flex: 0 0 56px; width: 56px;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  font-feature-settings: "tnum";
}
.pyr-side.left  .pyr-num { text-align: left; }
.pyr-side.right .pyr-num { text-align: right; }
.pyr-axis { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 5px; }
.pyr-ax-track { position: relative; height: 12px; flex: 1 1 auto; min-width: 0; }
.pyr-tick {
  position: absolute; top: 0;
  font-family: var(--mono); font-size: 9px; color: var(--text-4);
  transform: translateX(-50%); white-space: nowrap;
}
.pyr-unit { font-family: var(--mono); font-size: 9.5px; color: var(--text-4); }

/* Ranking atuarial: nominal + relativo na mesma linha */
.atu-def-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.atu-def-hi {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--red); font-feature-settings: "tnum";
}
.atu-def-lo {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  font-feature-settings: "tnum";
}

/* Ranking PGA — cabeçalho e linhas herdam a MESMA grade de .data-table.
   Nenhum alinhamento por margem/padding inline. */
.pga-rank-scroll { overflow-x: auto; }
.pga-rank { font-size: 12px; }
.pga-rank th, .pga-rank td { padding: 8px 10px; }
.pga-rank td { max-width: none; }
.pga-rank tbody tr { cursor: pointer; }
.pga-rank td.pga-rk-pos, .pga-rank th.pga-rk-pos { width: 34px; color: var(--text-3); font-size: 11px; }
.pga-rank td.pga-rk-sg { font-weight: 600; }
.pga-rank td.pga-rk-na { color: var(--text-3); }
.pga-rank .pga-rk-sub  { font-size: 10px; color: var(--text-3); }
.pga-rank th.pga-rk-comp { text-align: center; }
.pga-rank td.pga-rk-comp { width: 96px; text-align: center; }
.pga-rank .pga-rk-bar { display: flex; border-radius: 3px; overflow: hidden; height: 7px; gap: 1px; }
.pga-rank .pga-rk-origem { text-align: left; max-width: 300px; white-space: normal; }

/* Grade: itens de grid podem encolher (sem min-width:0 um nome longo estica a
   coluna e a página inteira passa a rolar na horizontal). Os nomes já têm
   reticências — só faltava permitir que a coluna respeitasse o container. */
.grid-2 > *, .grid-3 > *, .grid-composition > * { min-width: 0; }
.dot-rank-row, .dot-rank-left, .dot-rank-left > div { min-width: 0; }
.dot-rank-name { max-width: 100%; display: block; }
/* Conteúdo largo (tabelas) rola dentro do próprio bloco — a página nunca. */
.table-scroll { overflow-x: auto; }

/* Treemap — células estreitas: a tag em caixa-alta repetia o rótulo, quebrava em
   duas linhas e empurrava o conteúdo, e o par valor/percentual era cortado na
   borda. Nas células pequenas fica só o rótulo (legível, podendo quebrar) e os
   valores passam a quebrar em vez de vazar. A célula grande segue como estava. */
.treemap-cell .treemap-tag { display: none; }
.treemap-cell .treemap-label {
  white-space: normal;
  overflow: visible;
  font-size: 12.5px;
  line-height: 1.25;
}
.treemap-cell { padding: 12px 13px; }
.treemap-vals { flex-wrap: wrap; gap: 2px 6px; }
.treemap-cell .treemap-val { font-size: 19px; }

/* Cards lado a lado: o de menor conteúdo esticava até a altura do vizinho e
   sobrava um vazio embaixo. O treemap passa a ocupar a altura disponível. */
.grid-composition > .card { display: flex; flex-direction: column; }
.grid-composition > .card > .treemap-wrap { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   RODADA 2 — sidebar retrátil, ajuda contextual, benchmark e filtros
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar retrátil ──────────────────────────────────────────────────── */
:root { --sidebar-w-collapsed: 60px; }
body[data-sidebar="collapsed"] { --sidebar-w: var(--sidebar-w-collapsed); }

.sidebar-toggle {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 14px 0; padding: 7px 10px;
  width: calc(100% - 28px);
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: #6E809A;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .02em;
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.05); color: #C7D6EA; }
.sidebar-toggle:focus-visible { outline: 2px solid #6FA8DC; outline-offset: 2px; }
.sidebar-toggle-icon { display: flex; flex-shrink: 0; }

/* estado recolhido — só ícones, mas sempre com nome acessível */
body[data-sidebar="collapsed"] .brand-text,
body[data-sidebar="collapsed"] .nav-group-label,
body[data-sidebar="collapsed"] .nav-badge,
body[data-sidebar="collapsed"] .sidebar-footer,
body[data-sidebar="collapsed"] .sidebar-toggle-label { display: none; }
body[data-sidebar="collapsed"] .brand { padding: 14px 10px; justify-content: center; }
body[data-sidebar="collapsed"] .brand-mark { width: 28px; height: 28px; }
body[data-sidebar="collapsed"] .nav { padding: 10px 8px 8px; }
body[data-sidebar="collapsed"] .nav-item {
  justify-content: center; padding: 10px 0; grid-template-columns: 16px;
}
body[data-sidebar="collapsed"] .nav-item span:not(.nav-icon) { display: none; }
body[data-sidebar="collapsed"] .sidebar-toggle {
  justify-content: center; margin: 10px 8px 0; width: calc(100% - 16px);
}

/* item ativo continua identificável nos dois estados */
body[data-sidebar="collapsed"] .nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 2px 2px 0; background: #6FA8DC;
}

/* tooltip do estado recolhido — hover E foco de teclado */
body[data-sidebar="collapsed"] .nav-item::after {
  content: attr(data-nav-label);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: #16283C; color: #EAF2FB;
  font-size: 12px; font-family: var(--sans); white-space: nowrap;
  padding: 5px 10px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15,39,66,.28);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .12s;
}
body[data-sidebar="collapsed"] .nav-item:hover::after,
body[data-sidebar="collapsed"] .nav-item:focus-visible::after { opacity: 1; }
.nav-item:focus-visible { outline: 2px solid #6FA8DC; outline-offset: -2px; }

/* botão de menu do topbar — só aparece quando a sidebar vira gaveta */
.topbar-menu {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: -8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.topbar-menu:hover { background: var(--off); color: var(--text); }
.topbar-menu:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(15,39,66,.42);
}

/* telas pequenas: gaveta em vez de coluna fixa */
@media (max-width: 860px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--dur-mid) var(--ease-ed);
    width: 220px;
  }
  body[data-sidebar="drawer"] .sidebar { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar-menu { display: inline-flex; }
  /* na gaveta o menu é sempre por extenso */
  body[data-sidebar="collapsed"] .brand-text,
  body[data-sidebar="collapsed"] .nav-group-label,
  body[data-sidebar="collapsed"] .sidebar-toggle-label { display: revert; }
  body[data-sidebar="collapsed"] .nav-item {
    justify-content: flex-start; padding: 8px 10px; grid-template-columns: 14px 1fr auto;
  }
  body[data-sidebar="collapsed"] .nav-item span:not(.nav-icon) { display: revert; }
  body[data-sidebar="collapsed"] .nav-item::after { display: none; }
  .sidebar-toggle { display: none; }
}
@media (min-width: 861px) { .sidebar-backdrop { display: none; } }

/* ─── Ajuda contextual ──────────────────────────────────────────────────── */
.dg-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; padding: 0; margin-left: 5px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-3);
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: 1px; flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.dg-help:hover, .dg-help[aria-expanded="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.dg-help:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dg-help-pop {
  position: fixed; display: none; z-index: 9998;
  max-width: 290px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15,39,66,.18);
}
.dg-help-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 5px;
}
.dg-help-body { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.dg-help-more { margin-top: 9px; border-top: 1px dashed var(--border); padding-top: 8px; }
.dg-help-more summary {
  font-size: 11.5px; color: var(--blue-mid); cursor: pointer; list-style: none;
  font-weight: 600;
}
.dg-help-more summary::-webkit-details-marker { display: none; }
.dg-help-more summary::before { content: "\25B8  "; }
.dg-help-more[open] summary::before { content: "\25BE  "; }
.dg-help-more div { font-size: 12px; line-height: 1.55; color: var(--text-2); margin-top: 6px; }

/* ─── Benchmark da taxa de administração ────────────────────────────────── */
.bm-card { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 14px; }
.bm-lead { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.bm-lead strong { font-weight: 600; }
.bm-taxa { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--text);
  font-feature-settings: "tnum"; letter-spacing: -.01em; }
.bm-scale { margin: 16px 0 6px; }
.bm-track { position: relative; height: 30px; border-radius: 6px; background: var(--border-2); }
.bm-band { position: absolute; top: 0; bottom: 0; background: rgba(24,95,165,.16); }
.bm-median { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--blue); }
.bm-you { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--text); }
.bm-axis { display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--mono); font-size: 9.5px; color: var(--text-4); }
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11.5px; color: var(--text-2); }
.bm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px;
  vertical-align: -1px; font-style: normal; }
.bm-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }
.bm-stat-l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.bm-stat-v { font-family: var(--mono); font-size: 14px; color: var(--text); font-feature-settings: "tnum"; }
.bm-disclaimer { font-size: 11px; color: var(--text-3); line-height: 1.5; margin-top: 12px; }
.bm-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px dashed var(--border); background: var(--off);
  font-size: 11.5px; color: var(--text-2); cursor: default;
}
.bm-cta b { color: var(--blue); font-weight: 600; }
.bm-seg-pill {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; background: var(--blue-wash); color: var(--blue);
}

/* ─── Filtro com busca (listas nominais) ────────────────────────────────── */
.dg-filter { position: relative; }
.dg-filter-input {
  width: 100%; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font-family: var(--sans); font-size: 13px; color: var(--text);
}
.dg-filter-input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.dg-filter-list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; z-index: 300;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15,39,66,.16);
}
.dg-filter.open .dg-filter-list { display: block; }
.dg-filter-opt {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 7px 11px; border: none; background: none; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 13px; color: var(--text);
}
.dg-filter-opt:hover, .dg-filter-opt.active { background: var(--off); }
.dg-filter-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dg-filter-sg { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--blue); min-width: 92px; }
.dg-filter-nome { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-filter-empty { padding: 10px 12px; font-size: 12px; color: var(--text-3); }
.dg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px; border-radius: 999px;
  background: var(--blue-wash); color: var(--blue);
  font-size: 11.5px; font-weight: 600;
}
.dg-chip button {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; opacity: .7;
}
.dg-chip button:hover { opacity: 1; }
.dg-chip button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 3px; }
.dg-chips-clear {
  border: none; background: none; color: var(--text-3); cursor: pointer;
  font-size: 11.5px; text-decoration: underline; padding: 3px 4px;
}

/* Régua do benchmark: valores marcados diretamente sobre a trilha e
   distribuição agregada do segmento abaixo dela. */
.bm-track { margin-top: 26px; margin-bottom: 20px; overflow: visible; }
.bm-tag {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  font-feature-settings: "tnum";
  white-space: nowrap;
  pointer-events: none;
}
.bm-tag-you {
  top: -21px;
  color: var(--text);
  font-weight: 700;
}
.bm-tag-med {
  bottom: -19px;
  color: var(--blue);
  font-weight: 600;
}
.bm-tag-band {
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--blue);
  font-size: 10px;
  opacity: .85;
}
.bm-dist {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.bm-dist-n {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}

/* ─── Carteira por plano de benefícios (DNA) ────────────────────────────── */
.aloc-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 4px 0 14px; border-bottom: 1px dashed var(--border); margin-bottom: 14px;
}
.aloc-leg { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.aloc-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; transform: translateY(1px); }
.aloc-leg b { font-family: var(--mono); font-size: 11px; color: var(--text); font-feature-settings: "tnum"; }

.aloc-lista { display: flex; flex-direction: column; gap: 16px; }
.aloc-plano { display: flex; flex-direction: column; gap: 6px; }
.aloc-plano-head { display: flex; align-items: baseline; gap: 9px; }
.aloc-plano-nome {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aloc-plano-val {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  color: var(--text); font-feature-settings: "tnum";
}
.aloc-bar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 1px; }
.aloc-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,.95);
}
.aloc-plano-top { font-size: 11px; color: var(--text-3); font-family: var(--mono); }

/* ─── Leitura ponto a ponto de séries ────────────────────────────────────────
   Toda série real (sparkline de cartão ou gráfico de série) responde a mouse,
   toque e teclado: o ponto sob o cursor aparece e o balão traz número +
   competência. Nada de leitura depende só de hover. */
.spk-pt { opacity: 0; pointer-events: none; transition: opacity .12s; }
.spk-hit { cursor: crosshair; outline: none; }
.spk-hit:hover + .spk-pt,
.spk-hit:focus + .spk-pt { opacity: 1; }
.spk-hit:focus-visible + .spk-pt { opacity: 1; stroke: var(--blue); stroke-width: 2.6; }
.serie-wrap { margin-top: 8px; }
.serie-nota {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.55;
  letter-spacing: .02em; color: var(--text-4); margin-top: 9px;
}
.tl-tip.below { transform: translate(-50%, 0); }

.tl-tip.wrap { white-space: normal; max-width: 320px; line-height: 1.5; }

/* ─── Telas estreitas: nada de rolagem horizontal na página ──────────────────
   Conteúdo largo (tabela, gráfico) rola dentro do próprio cartão; a moldura —
   topbar, trilha de indicadores e selo flutuante — se ajusta à largura. */
@media (max-width: 860px) {
  /* trilha de indicadores vira grade: cinco células não cabem lado a lado */
  .ed-metrics-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ed-metric { border-right: none; border-bottom: 1px solid var(--border-2); min-width: 0; }
  .ed-metric-body { flex-wrap: wrap; gap: 8px; }
  .ed-metric-value { overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .topbar { gap: 8px; padding: 0 14px; }
  .topbar-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .search-wrap { flex: 1 1 110px; min-width: 0; }
  .topbar .search-input { width: 100%; min-width: 0; }
  /* o widget "Buscar ⌘K" só dá foco ao campo — que já está visível aqui */
  .topbar-search-widget, .topbar-sep { display: none; }
  .topbar-period { font-size: 10px; white-space: nowrap; }

  #db-selo { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  #db-selo .pill { max-width: calc(100vw - 20px); padding: 8px 12px; font-size: 12px; }
  #db-selo .pill #db-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #db-selo .card { width: min(330px, calc(100vw - 20px)); }
}

@media (max-width: 700px) {
  /* título de seção pode quebrar linha quando o rótulo é longo */
  .ed-section-header { flex-wrap: wrap; }
  .ed-section-label { flex-shrink: 1; min-width: 0; letter-spacing: .14em; }
  .ed-section-line { min-width: 24px; }

  /* alocação por segmento: colunas fixas não cabem em 375px */
  .seg-row { grid-template-columns: 1fr 62px 64px 18px; grid-template-areas: "nome pct lim chev" "barra barra barra barra"; gap: 6px 8px; }
  .seg-nome { grid-area: nome; min-width: 0; }
  .seg-bar-wrap { grid-area: barra; }
  .seg-pct-val { grid-area: pct; }
  .seg-limite-badge { grid-area: lim; }
  .seg-chevron { grid-area: chev; }
  .seg-detail-header { display: none; }
  .seg-detail-item { grid-template-columns: 20px 1fr 64px; gap: 6px; }
  .seg-detail-item .sdi-bar-wrap, .seg-detail-item .sdi-seg-pct { display: none; }
}
.spk-pt.on { opacity: 1; }
svg[data-serie]:focus { outline: none; }
svg[data-serie]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ─── Foco de teclado ────────────────────────────────────────────────────────
   Todo controle mostra onde o foco está. Sem isso, navegar por Tab é navegar
   às cegas — e parte da leitura do site (séries, definições) começa no foco. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.data-table th.sortable:focus-visible { outline-offset: -2px; }
/* parcela a constituir sob as provisões matemáticas (ficha da EFPC) */
.dna-atu-sub { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }

/* ─── Premissas atuariais ────────────────────────────────────────────────── */
.prem-destaque {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; padding: 4px 0 2px;
}
.prem-num { min-width: 0; }
.prem-num-v {
  font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--text);
  letter-spacing: -.02em; line-height: 1.1; font-feature-settings: "tnum";
  overflow-wrap: anywhere;
}
.prem-num-l { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.35; }
.prem-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.prem-mod {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.prem-mod-item { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 6px; }
.prem-mod-item b { font-weight: 600; color: var(--text); }
.prem-mod-item small { font-size: 10.5px; color: var(--text-3); }
.prem-cat-pct { color: var(--text-3); font-size: 11px; }
.prem-flag {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 3px;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 9px; color: var(--text-3); cursor: help;
}
.ed-hero-sub-note {
  font-size: 11px; line-height: 1.5; color: var(--text-3);
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
}

/* cruzamento taxa × duração */
.prem-quad { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.prem-quad-tit {
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.prem-quad-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.prem-quad-cel {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 13px; min-width: 0;
}
.prem-quad-n { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--text); }
.prem-quad-l { font-size: 11px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }
.prem-quad-s { font-size: 10.5px; color: var(--text-3); margin-top: 2px; font-family: var(--mono); }
.prem-quad-nota { font-size: 11.5px; line-height: 1.55; color: var(--text-2); margin-top: 11px; }
.sq-pt { cursor: crosshair; transition: fill-opacity .1s, stroke-opacity .1s; }
.sq-pt:hover { fill-opacity: .95 !important; stroke-opacity: 1 !important; }


/* ─── Árvore de despesa por conta (PGA · entidade) ───────────────────────────
   Totalizador e conta-filha nunca na mesma lista plana: a filha entra
   indentada sob o pai, e o percentual é sempre relativo ao grupo. */
.dte { margin-top: 4px; }
.dte-linha {
  display: grid; grid-template-columns: minmax(0,1.6fr) minmax(60px,1fr) 52px 88px;
  align-items: center; gap: 10px; padding: 5px 6px; border-radius: 5px;
  font-size: 12.5px; color: var(--text); list-style: none; cursor: default;
}
.dte-linha::-webkit-details-marker { display: none; }
.dte-linha:hover { background: var(--off); }
.dte-tem-filhos { cursor: pointer; font-weight: 600; }
.dte-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dte-chev {
  display: inline-block; font-style: normal; color: var(--text-3);
  margin-right: 5px; transition: transform .15s;
}
.dte-grupo[open] > .dte-linha > .dte-nome > .dte-chev { transform: rotate(90deg); }
.dte-barra { height: 7px; background: var(--off); border-radius: 4px; overflow: hidden; }
.dte-barra i { display: block; height: 100%; background: var(--blue); opacity: .8; }
.dte-grupo .dte-grupo .dte-barra i, .dte-grupo > .dte-linha + .dte-linha .dte-barra i { opacity: .55; }
.dte-pct { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); text-align: right; font-feature-settings: "tnum"; white-space: nowrap; }
.dte-val { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text); text-align: right; font-feature-settings: "tnum"; white-space: nowrap; }
.dte-resto .dte-nome, .dte-resto .dte-pct, .dte-resto .dte-val { color: var(--text-3); }
.dte-resto .dte-barra i { background: var(--text-4); }
@media (max-width: 760px) {
  /* sem espaço para a barra: fica só nome, percentual e valor — e o valor
     precisa caber numa linha, senão "R$ 951,0 mil" quebra no meio */
  .dte-linha { grid-template-columns: minmax(0,1fr) 48px 92px; gap: 8px; }
  .dte-barra { display: none; }
}
.atu-miba {
  display: inline-block; margin-top: 3px; padding: 1px 5px; border-radius: 3px;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 9px; color: var(--text-3); cursor: help; white-space: nowrap;
}
.pga-ordem { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.pga-ordem-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 2px 10px; font-family: var(--sans); font-size: 11px; cursor: pointer;
}
.pga-ordem-btn:hover { border-color: var(--blue-mid); color: var(--blue); }
.pga-ordem-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.ptr-n { margin-left: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--text-4); font-weight: 400; }

/* o logo da sidebar virou link de volta para a landing */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: #fff; }
a.brand:focus-visible { outline: 2px solid #6FA8DC; outline-offset: 2px; border-radius: 6px; }

/* ── DNA · fatos da identidade ───────────────────────────────────────────────
   Ocupam o vazio que sobrava sob os contatos, ao lado da trilha de indicadores.
   Grade fluida: com 3 fatos ou com 6, a coluna fecha sem buraco.            */
.dna-hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:2px 18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.dna-fact{padding:6px 0}
.dna-fact[data-tip]{cursor:help}
.dna-fact[data-tip]:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.dna-fact-k{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-4);display:flex;align-items:center;gap:2px}
.dna-fact-v{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);margin-top:3px;line-height:1.2}
.dna-fact-s{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.35}

/* ── Como a taxa de administração é calculada ────────────────────────────────
   A fração fica visível; o contraste com a definição da PREVIC vem junto,
   porque os dois números circulam no mercado e não se comparam entre si.   */
.taxa-form{margin-top:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt)}
.taxa-form>summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:7px}
.taxa-form>summary::-webkit-details-marker{display:none}
.taxa-form>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--text-3);
  border-bottom:1.6px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
.taxa-form[open]>summary::before{transform:rotate(45deg)}
.taxa-form>summary:hover{color:var(--blue)}
.taxa-form>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:10px}
.taxa-form-body{padding:2px 14px 14px}
.taxa-frac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.taxa-frac-eq{font-family:var(--mono);font-size:12px;color:var(--text-2);font-weight:500}
.taxa-frac-div{flex:1 1 260px;min-width:0}
.taxa-frac-n,.taxa-frac-d{display:block;font-size:11.5px;color:var(--text);line-height:1.35;padding:3px 0}
.taxa-frac-n{border-bottom:1.5px solid var(--text-2)}
.taxa-conta{display:inline-block;font-family:var(--mono);font-size:9.5px;font-style:normal;
  color:var(--blue);background:var(--blue-soft,rgba(24,95,165,.08));border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.taxa-frac-un{font-family:var(--mono);font-size:11px;color:var(--text-3);white-space:nowrap}
.taxa-form-p{font-size:11.5px;line-height:1.55;color:var(--text-2);margin:0 0 10px}
.taxa-alerta{font-size:11.5px;line-height:1.6;color:var(--text-2);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px;padding:11px 13px}
.taxa-alerta em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text)}
@media (max-width:860px){
  .taxa-frac{gap:6px}
  .taxa-frac-un{flex-basis:100%}
}

/* Hero do DNA: a coluna de indicadores era trilho `auto` e não cedia largura —
   entre ~600 e 980px ela empurrava a ficha para fora da tela em 19 EFPCs (as de
   valores mais largos). Abaixo de 980 as duas colunas passam a empilhar.       */
@media (max-width:980px){
  .dna-hero{grid-template-columns:1fr!important;gap:20px}
  .dna-hero-facts{border-top:1px solid var(--border)}
}

/* Abas do DNA: `white-space:nowrap` + flex sem recuo faziam a linha de abas
   empurrar a página inteira a 375px — as 254 fichas rolavam na horizontal.
   A linha passa a rolar dentro de si mesma, como as tabelas largas.          */
.dna-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.dna-tabs::-webkit-scrollbar{height:4px}
.dna-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.dna-tab{flex:0 0 auto}

/* Hero do DNA: a coluna de indicadores era trilho `auto` e colapsava para uma
   única coluna de 187px, deixando 7 cartões empilhados ao lado de uma coluna de
   texto de 1.025px — a origem do vazio branco. Agora ela tem largura própria e
   os cartões se distribuem em 2–3 colunas.                                    */
@media (min-width:981px){
  .dna-hero{grid-template-columns:minmax(0,1fr) minmax(300px,36%)}
}

/* A linha sigla + status era flex sem quebra: em siglas longas ("BANRISUL/FBSS"
   + NORMAL + EM FUNCIONAMENTO) ela sozinha pedia 353px e estourava a ficha a
   375px em 46 EFPCs. Quebra de linha resolve sem mexer no desenho.            */
.dna-hero-sg-row{flex-wrap:wrap}
.dna-hero,.dna-hero-main{min-width:0}
@media (max-width:700px){
  .dna-hero{padding:20px 16px 18px}
}

/* Alguns cadastros trazem VÁRIOS e-mails num campo só, separados por ";". Sem
   ponto de quebra o link inteiro virava uma palavra de 552px e estourava a
   ficha a 375px em 22 EFPCs.                                                  */
.dna-link,.dna-link-plain{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* Contato no rodapé da sidebar. Um link, sem painel e sem convite a auditar:
   quem quiser falar, fala — não é preciso sugerir que há erro a procurar. */
.sf-contato{display:flex;align-items:center;gap:6px;margin-top:6px;padding:7px 8px;
  border:1px solid rgba(181,212,244,.22);border-radius:6px;text-decoration:none;
  font-size:10.5px;color:#B5D4F4;transition:background .15s,border-color .15s}
.sf-contato:hover{background:rgba(181,212,244,.09);border-color:rgba(181,212,244,.45)}
.sf-contato:focus-visible{outline:2px solid #6FA8DC;outline-offset:2px}
.sf-contato svg{flex:0 0 auto;opacity:.8}
/* o primeiro dos dois links respira do bloco de datas acima */
.sf-meta + .sf-contato{margin-top:12px}

/* ── Situação atuarial: repartição do universo ───────────────────────────────
   O número da tela era o déficit, em vermelho e 42px — e 17% dos planos
   passavam a representar o segmento inteiro. A resposta de "qual a situação
   atuarial" é uma distribuição, não uma cifra: as três colunas vêm primeiro e
   as duas cifras aparecem depois, do mesmo tamanho.                          */
.atu-split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.atu-split-c{text-align:left}
.atu-split-n{font-family:var(--mono);font-size:27px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.atu-split-p{font-size:11px;color:var(--text-3);margin-top:2px}
.atu-split-r{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);margin-top:5px}

.atu-cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  border-top:1px solid var(--border);padding-top:14px}
.atu-cifra-r{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-4);display:flex;align-items:center;gap:2px}
.atu-cifra-v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:4px;line-height:1.15}
.atu-cifra-s{font-size:10.5px;color:var(--text-3);margin-top:2px}
@media (max-width:560px){
  .atu-split{grid-template-columns:1fr;gap:12px}
  .atu-cifras{grid-template-columns:1fr}
}

/* Gancho da tela Atuarial: vem antes dos números e diz por que esta tela pesa
   mais que as outras. Maior e mais escuro que a lede, para ser lido primeiro;
   a lede continua sendo o lugar dos dados.                                   */
.ed-kicker{font-size:16px;line-height:1.6;color:var(--text);max-width:480px;
  margin:0 0 14px;font-weight:300;letter-spacing:-.005em}
.ed-kicker strong{font-weight:600}
@media (max-width:700px){ .ed-kicker{font-size:15px} }

/* Competência no cabeçalho da coluna: a tabela rola e a card-meta sai de
   vista, então o número precisa carregar a sua data-base junto. */
.th-ref{display:block;font-family:var(--mono);font-size:9px;font-weight:400;
  color:var(--text-4);letter-spacing:.02em;margin-top:2px;text-transform:none}