/* ============================================================
   Chilean Pension Funds Investments — refined institutional UI
   Palette + fonts aligned to the GWS module (AzimutSuite CI).
   Direction: quiet, precise, data-first. Navy + slate on near-white,
   hairline structure, tabular figures, restrained motion.
   ============================================================ */
:root {
  /* GWS-aligned tokens (HSL channels so hsl(var(--x) / a) works) */
  --primary: 210 29% 24%;            /* #2C3E50 navy accent */
  --primary-deep: 210 30% 17%;       /* #1a2836 */
  --primary-foreground: 0 0% 100%;
  --ink: 217 33% 17%;                /* #1e293b body text */
  --chart-1: 210 29% 24%;
  --chart-2: 160 84% 39%;            /* #10B981 positive */
  --chart-3: 0 84% 60%;              /* #EF4444 negative */
  --muted-foreground: 215 16% 47%;   /* #64748b */
  --border: 214 32% 91%;             /* #e2e8f0 */
  --border-strong: 213 27% 84%;      /* #cbd5e1 */
  --card: 0 0% 100%;
  --background: 210 20% 98%;         /* #f8f9fa */
  --pos-bg: 160 70% 95%;
  --neg-bg: 0 86% 97%;
  --elevate-1: rgba(15, 23, 42, 0.03);

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.afp-dashboard {
  /* Transparent so the platform's soft body gradient shows through —
     no flat near-white slab standing out behind the cards. */
  background: transparent;
  color: hsl(var(--ink));
  font-feature-settings: "cv05", "ss01";
  /* Contain the horizontal slide so it never spawns a scrollbar */
  overflow-x: hidden;
  /* Pull the AFP page closer to the platform nav. #main-content uses
     Bootstrap's `my-5` (3rem top), which leaves a huge gap above the
     command bar; this negative margin reclaims most of it. */
  margin-top: -2.25rem;
}

/* Tab-switch motion REMOVED — the 300ms slide-in caused oversized-icon
   flashes during the AJAX submodule swap (SVGs briefly render at the
   browser default before scoped CSS applies a width). Now the new content
   appears instantly with no transform.
   The companion rule below ALSO disables the platform's #main-content
   fade-in/out so AFP submodule swaps stay instantaneous. */
.afp-dashboard > main {
  animation: none !important;
}

/* Seamless AJAX swap between AFP pages: the platform fades #main-content to
   opacity 0, swaps innerHTML, then fades back in — which reads as a flicker.
   When ANY AFP page is in the DOM (.afp-dashboard present), pin opacity to 1
   and disable transitions on #main-content so navigating Dashboard ↔ Funds ↔
   Compare ↔ Asset Class etc. is instant. The :has() match is on `body` so it
   survives the brief window when innerHTML is being replaced (the old content
   still has .afp-dashboard until the moment of swap). Other modules keep
   their normal transition. */
#main-content.content-loading:has(.afp-dashboard),
#main-content.content-visible:has(.afp-dashboard),
body:has(.afp-dashboard) #main-content {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* Cap only ICON SVGs (the ones relying on CSS class sizing) at a sane size
   so a missing width on a future icon can't flash huge during the swap.
   SVGs that declare an explicit ``width`` attribute — the pie chart's
   ``width="280"`` and any 100% width SVG — are excluded so they keep their
   intended size. */
.afp-dashboard svg:not([width]):not([style*="width"]) {
  max-width: 1.6rem;
  max-height: 1.6rem;
}

/* ============================================================
   Command bar (title + segmented tabs + as-of)
   ============================================================ */
.afp-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-deep)) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}

.afp-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 0.3rem;
  min-width: 0;
}

.afp-topbar-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.afp-topbar-mark svg { width: 1.2rem; height: 1.2rem; }

.afp-topbar-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afp-tabs {
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.18);
  padding: 0.25rem;
  border-radius: 8px;
}

.afp-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.afp-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.afp-tab:active { transform: scale(0.97); }
.afp-tab.active {
  background: #fff;
  color: hsl(var(--primary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.afp-tab.disabled { color: rgba(255, 255, 255, 0.4); cursor: not-allowed; }
.afp-tab.disabled:hover { background: transparent; color: rgba(255, 255, 255, 0.4); }

.afp-asof {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  padding-right: 0.5rem;
  white-space: nowrap;
}
.afp-asof svg { width: 0.95rem; height: 0.95rem; opacity: 0.85; }
.afp-asof strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   Mobile (Celular, <768px — ver _breakpoints.css):
   stack the topbar items and wrap the section tabs into a 2-column
   grid so 4 tabs never overflow / scroll horizontally.
   ============================================================ */
@media (max-width: 767.98px) {
  .afp-topbar {
    gap: 0.5rem;
  }
  .afp-tabs {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
    order: 99;          /* keep brand on top, tabs below */
    padding: 0.2rem;
  }
  .afp-tab {
    flex: 1 1 calc(50% - 0.3rem);
    justify-content: center;
    padding: 0.42rem 0.4rem;
    font-size: 0.8rem;
  }
  .afp-asof {
    margin-left: 0;
    font-size: 0.72rem;
  }
}

/* ============================================================
   Metric cards
   ============================================================ */
.afp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.afp-metric-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.2rem;
  box-shadow: var(--shadow-sm);
}

.afp-metric-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.afp-metric-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: hsl(210 29% 95%);
  color: hsl(var(--primary));
}
.afp-metric-icon svg { width: 1.15rem; height: 1.15rem; }
.afp-metric-icon.inflow { color: hsl(var(--chart-2)); background: hsl(var(--pos-bg)); }
.afp-metric-icon.outflow { color: hsl(var(--chart-3)); background: hsl(var(--neg-bg)); }
.afp-metric-icon.neutral { color: hsl(var(--primary)); background: hsl(210 29% 95%); }

.afp-metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.afp-metric-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.08;
  color: hsl(var(--ink));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.afp-metric-value.text-inflow { color: hsl(var(--chart-2)); }
.afp-metric-value.text-outflow { color: hsl(var(--chart-3)); }

.afp-metric-sublabel {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Delta pills */
.afp-delta {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.5rem;
  border-radius: 1rem;
  letter-spacing: 0.01em;
}
.afp-delta.up { color: hsl(160 84% 30%); background: hsl(var(--pos-bg)); }
.afp-delta.down { color: hsl(0 74% 48%); background: hsl(var(--neg-bg)); }

/* ============================================================
   Generic cards
   ============================================================ */
.afp-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
  /* Card is a vertical flex container so .afp-card-content can stretch
     to fill the card height. This is what lets the Equity Style Box
     center its matrix vertically when its sibling card (pie) is taller. */
  display: flex;
  flex-direction: column;
}

.afp-card-header {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-deep)) 100%);
  color: hsl(var(--primary-foreground));
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.afp-card-header h6 { font-size: 0.85rem; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.afp-card-header svg { opacity: 0.9; }

.afp-card-content {
  padding: 1.4rem;
  overflow: hidden;
  position: relative;
  flex: 1;  /* fills the remaining card height after the header */
}

#chart-aum-trend,
#chart-monthly-aum {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Trend card header controls */
.afp-card-header-flex { justify-content: space-between; }
.afp-card-header-title { display: flex; align-items: center; gap: 0.5rem; }

.afp-trend-controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.afp-trend-group { display: inline-flex; gap: 0.35rem; align-items: center; }
.afp-trend-group + .afp-trend-group { padding-left: 0.9rem; border-left: 1px solid hsl(var(--border)); }

/* Style box header controls (mirror the trend chart's toggle style) */
.afp-style-box-controls { font-size: 0.78rem; }
.style-box-mode, .style-box-allrow {
  font-size: 0.72rem; padding: 0.28rem 0.6rem;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.style-box-mode.active, .style-box-allrow.active {
  background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary));
}
.style-box-mode:hover, .style-box-allrow:hover {
  color: hsl(var(--primary)); border-color: hsl(var(--primary));
}
.style-box-mode.active:hover, .style-box-allrow.active:hover { color: #fff; }

/* Pie composition date label — shows current/hover/pinned month */
.afp-pie-date {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  font-variant-numeric: tabular-nums;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
  cursor: help;
}
.afp-pie-date[data-state="hover"] {
  background: hsl(210 36% 96%); color: hsl(var(--primary));
}
.afp-pie-date[data-state="pinned"] {
  background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary));
}
.afp-pie-date[data-state="pinned"]::before {
  content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #fff;
}

/* Inline legend rendered below any chart. Used by the Total AUM Trend
   today; reusable for future charts in the dashboard. */
.afp-chart-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-top: 0.85rem;
  padding-top: 0.5rem;
  border-top: 1px dashed hsl(var(--border));
  font-size: 0.78rem; color: hsl(var(--ink));
  font-variant-numeric: tabular-nums;
}
.afp-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.afp-chart-legend-swatch {
  width: 0.7rem; height: 0.7rem; border-radius: 2px;
  display: inline-block;
}
.afp-trend-custom { display: none; align-items: center; gap: 0.35rem; margin-left: 0.25rem; }
.afp-trend-custom.show { display: inline-flex; }
.afp-trend-input {
  width: 4rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: hsl(var(--primary));
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.afp-trend-input:focus { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }
.afp-trend-input-label { font-size: 0.74rem; color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Pill badges (period selectors, trend ranges, apply)
   ============================================================ */
.afp-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.afp-nav-badge:hover { background: rgba(255, 255, 255, 0.25); color: #fff; text-decoration: none; }
.afp-nav-badge:active { transform: scale(0.96); }

.period-selector-badge.afp-nav-badge { min-width: 3.2rem; }

/* Badges live on navy bars (section heads + card headers) */
.afp-section-head .period-selector-badge.afp-nav-badge,
.afp-card-header .period-selector-badge.afp-nav-badge,
.afp-card-header #aum-trend-apply {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.afp-section-head .period-selector-badge.afp-nav-badge:hover,
.afp-card-header .period-selector-badge.afp-nav-badge:hover,
.afp-card-header #aum-trend-apply:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
}
.afp-section-head .period-selector-badge.afp-nav-badge.active,
.afp-card-header .period-selector-badge.afp-nav-badge.active {
  background: #fff;
  color: hsl(var(--primary));
  border-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Section headers (Top Movers, Portfolio Changes)
   ============================================================ */
.afp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-deep)) 100%);
  color: hsl(var(--primary-foreground));
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin: 0 0 1rem;
}
.afp-section-title { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.afp-section-title svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; opacity: 0.92; }
.afp-section-head h5 { margin: 0; font-weight: 600; font-size: 1rem; color: #fff; letter-spacing: 0.01em; }

.afp-section-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  vertical-align: middle;
}
.afp-section-controls { display: flex; align-items: center; gap: 0.4rem; }

/* ============================================================
   Charts row + composition
   ============================================================ */
.afp-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Equity Style Box — 3x3 Morningstar-style matrix
   (rows: Large/Mid/Small  |  cols: Value/Blend/Growth)
   ============================================================ */
.afp-style-box-card {
  display: flex; flex-direction: column;
  align-items: center;       /* horizontal */
  justify-content: center;   /* vertical — matrix + footer sit as a centered block */
  gap: 1.1rem; padding: 1.5rem 1.25rem;
  min-height: 100%;          /* fill the card height so the centering has room */
}

/* 5-column grid: [row-label] [cell] [cell] [cell] [balance].
   The balance column mirrors the row-label column so the cells sit at the
   exact horizontal center of the matrix instead of being pushed right.
   The grid has TWO shapes — 3 rows (cap×style + col labels) and 4 rows
   (All + cap×style + col labels). We swap the entire grid-template when
   the All row is toggled, otherwise the inter-row gap leaks a visible
   strip above the matrix when r0 is collapsed. */
.afp-style-box {
  display: grid;
  grid-template-columns: 3.4rem repeat(3, 78px) 3.4rem;
  grid-template-rows: repeat(3, 70px) 1.55rem;
  grid-template-areas:
    "r1 c11 c12 c13 ."
    "r2 c21 c22 c23 ."
    "r3 c31 c32 c33 ."
    ".  cv  cb  cg  .";
  gap: 7px;
  margin: 0 auto;
}
/* Two animated states share the 5-row layout:
     - "on": cells settled, no animation.
     - "leaving": grid still has 5 rows so the matrix doesn't snap upward
       while the All cells fade out; once the animation ends, JS switches
       to "off" which collapses to 4 rows. */
.afp-style-box[data-allrow="on"],
.afp-style-box[data-allrow="leaving"] {
  grid-template-rows: 56px repeat(3, 70px) 1.55rem;
  grid-template-areas:
    "r0 c01 c02 c03 ."
    "r1 c11 c12 c13 ."
    "r2 c21 c22 c23 ."
    "r3 c31 c32 c33 ."
    ".  cv  cb  cg  .";
}
/* Off by default: pulled out of the layout entirely. Their grid-area
   targets ("r0", "c01"…) don't exist in the off-state template, so the
   browser would auto-place them in the balance column otherwise.
   Specificity must beat `.afp-style-box-cell { display: flex }` further
   down — that's why we chain both classes here. */
.afp-style-box-cell.afp-style-box-allrow-el,
.afp-style-box-row-label.afp-style-box-allrow-el { display: none; }
.afp-style-box[data-allrow="on"] .afp-style-box-cell.afp-style-box-allrow-el,
.afp-style-box[data-allrow="on"] .afp-style-box-row-label.afp-style-box-allrow-el {
  display: flex;
  animation: none;  /* was afp-style-allrow-in — removed to stop flicker on submodule swap */
}
.afp-style-box[data-allrow="leaving"] .afp-style-box-cell.afp-style-box-allrow-el,
.afp-style-box[data-allrow="leaving"] .afp-style-box-row-label.afp-style-box-allrow-el {
  display: flex;
  animation: none;
}

@keyframes afp-style-allrow-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes afp-style-allrow-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.94); }
}

.afp-style-box-cell--all {
  /* Slightly deeper navy + subtle accent line below to distinguish the
     aggregated row from the cap-by-style data. */
  background: hsl(210 30% 32%);
  box-shadow: inset 0 -2px 0 hsl(210 36% 22%);
  font-weight: 700;
}

.afp-style-box-row-label,
.afp-style-box-col-label {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: hsl(var(--muted-foreground));
}
.afp-style-box-row-label { justify-content: flex-end; padding-right: 0.55rem; }
.afp-style-box-col-label { padding-top: 0.15rem; }

.afp-style-box-cell {
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: #fff;
  /* Navy ramp from light slate (low %) to the platform's primary navy
     (#2C3E50 = hsl(210 29% 24%)) at full weight. Hue 210 keeps every cell
     in the AzimutSuite blue family. Clamped at 60% so anything above
     reaches the deep navy. */
  background: hsl(
    210
    calc(20% + 14% * min(var(--p, 0), 60) / 60)
    calc(72% - 48% * min(var(--p, 0), 60) / 60)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  cursor: default;
  animation: none;  /* was afp-style-cell-in — removed to stop flicker on submodule swap */
}
.afp-style-box-cell:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.afp-style-box-val {
  font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.afp-style-box[data-mode="usd"] .afp-style-box-val { font-size: 0.78rem; }
/* Stagger the cell entrance row-by-row */
.afp-style-box-cell:nth-child(2)  { animation-delay: 40ms; }
.afp-style-box-cell:nth-child(3)  { animation-delay: 80ms; }
.afp-style-box-cell:nth-child(4)  { animation-delay: 120ms; }
.afp-style-box-cell:nth-child(5)  { animation-delay: 160ms; }
.afp-style-box-cell:nth-child(6)  { animation-delay: 200ms; }
.afp-style-box-cell:nth-child(7)  { animation-delay: 240ms; }
.afp-style-box-cell:nth-child(8)  { animation-delay: 280ms; }
.afp-style-box-cell:nth-child(9)  { animation-delay: 320ms; }
.afp-style-box-cell:nth-child(10) { animation-delay: 360ms; }
.afp-style-box-cell:nth-child(11) { animation-delay: 400ms; }
.afp-style-box-cell:nth-child(12) { animation-delay: 440ms; }

@keyframes afp-style-cell-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cells render in row-major order:
   1=Large/Value 2=Large/Blend 3=Large/Growth
   4=Mid/Value   5=Mid/Blend   6=Mid/Growth
   7=Small/Value 8=Small/Blend 9=Small/Growth  */
/* DOM order: 3 "All" cells, then 9 cap×style cells. */
.afp-style-box-cell:nth-of-type(1)  { grid-area: c01; }
.afp-style-box-cell:nth-of-type(2)  { grid-area: c02; }
.afp-style-box-cell:nth-of-type(3)  { grid-area: c03; }
.afp-style-box-cell:nth-of-type(4)  { grid-area: c11; }
.afp-style-box-cell:nth-of-type(5)  { grid-area: c12; }
.afp-style-box-cell:nth-of-type(6)  { grid-area: c13; }
.afp-style-box-cell:nth-of-type(7)  { grid-area: c21; }
.afp-style-box-cell:nth-of-type(8)  { grid-area: c22; }
.afp-style-box-cell:nth-of-type(9)  { grid-area: c23; }
.afp-style-box-cell:nth-of-type(10) { grid-area: c31; }
.afp-style-box-cell:nth-of-type(11) { grid-area: c32; }
.afp-style-box-cell:nth-of-type(12) { grid-area: c33; }

.afp-style-box-footer {
  text-align: center; font-size: 0.74rem; line-height: 1.45;
  color: hsl(var(--ink));
  max-width: 360px;
}
.afp-style-box-footer strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.afp-style-box-foot-muted {
  display: block; margin-top: 0.25rem;
  color: hsl(var(--muted-foreground));
}

.afp-pie-chart { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.afp-pie-legend { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.afp-pie-legend-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
  transition: background-color 150ms var(--ease);
}
.afp-pie-legend-item:hover { background: hsl(var(--background)); }
.afp-pie-legend-label { display: flex; align-items: center; gap: 0.55rem; }
.afp-pie-color { width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; }
.afp-pie-legend-label span { font-size: 0.85rem; color: hsl(var(--ink)); }
.afp-pie-legend-value { font-size: 0.85rem; font-weight: 600; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }

.afp-no-data { padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.875rem; }

/* ============================================================
   Elegant list cards (Top Movers / Portfolio Changes)
   ============================================================ */
.afp-fund-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.afp-elegant-card {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.afp-elegant-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid hsl(var(--border));
  background: #fafbfc;
}

.afp-head-icon {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.afp-head-icon svg { width: 1.05rem; height: 1.05rem; }
.afp-head-icon.up { background: hsl(var(--pos-bg)); color: hsl(var(--chart-2)); }
.afp-head-icon.down { background: hsl(var(--neg-bg)); color: hsl(var(--chart-3)); }

.afp-elegant-head h6 { margin: 0; font-size: 0.9rem; font-weight: 600; color: hsl(var(--ink)); letter-spacing: 0.01em; }

.afp-head-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  background: hsl(210 24% 94%);
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-variant-numeric: tabular-nums;
}

.afp-mover-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
/* Only the "flat" variant (New Positions: up to 25 rows) keeps a max-height
   + scroll. Top Movers shows top 5 and should never scroll. */
.afp-mover-list--flat {
  max-height: 28rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(213 20% 78%) transparent;
}
.afp-mover-list--flat::-webkit-scrollbar { width: 7px; }
.afp-mover-list--flat::-webkit-scrollbar-thumb { background: hsl(213 20% 82%); border-radius: 4px; }
.afp-mover-list--flat::-webkit-scrollbar-thumb:hover { background: hsl(213 20% 68%); }

.afp-mover { position: relative; }
.afp-mover + .afp-mover { border-top: 1px solid hsl(var(--border)); }
.afp-mover:hover { background: hsl(var(--background)); }

/* The whole row is one <a>; it IS the flex container so any click on any
   child (rank, name, ISIN, figures) navigates. Previous stretched-link
   pattern lost most clicks to z-indexed children. */
.afp-mover-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.2rem;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: background-color 150ms var(--ease);
}
.afp-mover-link:hover,
.afp-mover-link:focus { color: inherit; text-decoration: none; }
.afp-mover-link:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: -2px;
}

.afp-mover-rank {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: hsl(210 24% 94%);
  color: hsl(var(--muted-foreground));
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* Podium emphasis for the top 3 */
.afp-mover:nth-child(1) .afp-mover-rank { background: hsl(var(--primary)); color: #fff; }
.afp-mover:nth-child(2) .afp-mover-rank { background: hsl(210 24% 88%); color: hsl(var(--primary)); }
.afp-mover:nth-child(3) .afp-mover-rank { background: hsl(210 24% 91%); color: hsl(var(--primary)); }
/* Flat variant (New funds / Exited): plain numbered list, no podium emphasis */
.afp-mover-list--flat .afp-mover:nth-child(1) .afp-mover-rank,
.afp-mover-list--flat .afp-mover:nth-child(2) .afp-mover-rank,
.afp-mover-list--flat .afp-mover:nth-child(3) .afp-mover-rank {
  background: hsl(210 24% 94%);
  color: hsl(var(--muted-foreground));
}

.afp-mover-dot {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.afp-mover-dot svg { width: 0.9rem; height: 0.9rem; }
.afp-mover-dot.up { background: hsl(var(--pos-bg)); color: hsl(var(--chart-2)); }
.afp-mover-dot.down { background: hsl(var(--neg-bg)); color: hsl(var(--chart-3)); }

.afp-mover-main { flex: 1; min-width: 0; }
.afp-mover-name {
  font-size: 0.85rem; font-weight: 600; color: hsl(var(--ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afp-mover-meta {
  font-size: 0.72rem; color: hsl(var(--muted-foreground)); margin-top: 0.15rem;
  display: flex; align-items: center; gap: 0.4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.afp-chip {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  background: hsl(210 24% 93%); color: hsl(210 25% 38%);
  flex-shrink: 0;
}

.afp-mover-figures { text-align: right; flex-shrink: 0; }
.afp-mover-amount { display: block; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.afp-mover-amount.up { color: hsl(var(--chart-2)); }
.afp-mover-amount.down { color: hsl(var(--chart-3)); }
.afp-mover-sub { display: block; font-size: 0.68rem; color: hsl(var(--muted-foreground)); margin-top: 0.12rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   Responsive (Celular, <768px — ver _breakpoints.css) + motion preferences
   ============================================================ */
@media (max-width: 767.98px) {
  .afp-charts-row,
  .afp-fund-lists { grid-template-columns: 1fr; }
  .afp-topbar { gap: 0.6rem; }
  .afp-asof { margin-left: 0; width: 100%; padding-left: 0.3rem; }
  .afp-topbar-name { font-size: 0.92rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .afp-dashboard,
  .afp-dashboard > main,
  .afp-dashboard *,
  .afp-metrics-grid > .afp-metric-card,
  .afp-fund-lists > .afp-elegant-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .afp-metric-card:hover,
  .afp-elegant-card:hover { transform: none; }
}

/* ============================================================
   Asset Class page — toggle + distribution bars
   ============================================================ */
.afp-ac-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  /* Breathing room below the toggle now that the descriptive note has
     been removed — keeps the toggle + AUM summary from sitting flush
     against the dimension cards. */
  margin-bottom: 1.5rem;
}
/* Equity / Fixed Income tokens — platform navy + flat blue, same
   trio used in sales_view and elsewhere across the system. */
.afp-ac-head {
  --ac-equity: #2C3E50;
  --ac-equity-soft: rgba(44, 62, 80, 0.12);
  --ac-fi: #2980B9;
  --ac-fi-soft: rgba(41, 128, 185, 0.14);
}

.afp-ac-toggle {
  display: inline-flex; background: #fff; border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 0.3rem; gap: 0.3rem; box-shadow: var(--shadow-sm);
}
.afp-ac-opt {
  position: relative;
  display: inline-block; text-align: left; padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  text-decoration: none; color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 0.92rem;
  min-width: 9.5rem;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.afp-ac-opt:hover { background: hsl(var(--background)); color: hsl(var(--ink)); text-decoration: none; }
/* Active state uses the option's own accent color so the dot stays visible
   and the differentiation Equity vs Fixed Income carries through. */
.afp-ac-opt.active { color: hsl(var(--ink)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.afp-ac-opt:nth-child(1).active { background: var(--ac-equity-soft); }
.afp-ac-opt:nth-child(2).active { background: var(--ac-fi-soft); }

.afp-ac-opt-sub { display: block; font-size: 0.7rem; font-weight: 600; opacity: 0.7; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.afp-ac-opt.active .afp-ac-opt-sub { opacity: 0.95; }

.afp-ac-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: middle;
  transition: background-color 260ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.afp-ac-dot.eq { background: var(--ac-equity); }
.afp-ac-dot.fi { background: var(--ac-fi); }
/* Active dot: scale + soft ring in its own color — animation is the cue
   that the focus changed even though the page reloads with AJAX. */
.afp-ac-opt.active .afp-ac-dot.eq {
  transform: scale(1.35); box-shadow: 0 0 0 3px var(--ac-equity-soft);
}
.afp-ac-opt.active .afp-ac-dot.fi {
  transform: scale(1.35); box-shadow: 0 0 0 3px var(--ac-fi-soft);
}

.afp-ac-summary { text-align: right; }
.afp-ac-summary-aum { display: block; font-size: 1.5rem; font-weight: 700; color: hsl(var(--ink)); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.afp-ac-summary-label { font-size: 0.78rem; color: hsl(var(--muted-foreground)); }

.afp-ac-note { font-size: 0.76rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; }

.afp-ac-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem; margin-bottom: 0.5rem;
}
.afp-ac-panel { padding: 1.1rem 1.25rem; }

.afp-bar-row { margin-bottom: 0.85rem; }
.afp-bar-row:last-child { margin-bottom: 0; }
.afp-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.afp-bar-label { font-size: 0.82rem; font-weight: 600; color: hsl(var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afp-bar-label.muted { color: hsl(var(--muted-foreground)); font-weight: 500; }
.afp-bar-val { font-size: 0.8rem; font-weight: 700; color: hsl(var(--ink)); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.afp-bar-meta { font-weight: 500; color: hsl(var(--muted-foreground)); }
.afp-bar-flow, .afp-bar-ret { font-weight: 700; font-variant-numeric: tabular-nums; }
.afp-bar-flow.pos, .afp-bar-ret.pos { color: hsl(var(--chart-2, 160 84% 28%)); }
.afp-bar-flow.neg, .afp-bar-ret.neg { color: hsl(var(--chart-3, 0 84% 50%)); }
.afp-bar-track { height: 8px; background: hsl(210 24% 94%); border-radius: 5px; overflow: hidden; }
.afp-bar-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, hsl(var(--primary)) 0%, hsl(210 35% 38%) 100%);
  min-width: 3px;
  width: var(--w, 0%);
  /* Fill animation removed — bar shows at its final width instantly to
     avoid stagger-flicker when the AFP submodule swaps in via AJAX. */
  animation: none;
}
.afp-bar-fill.na { background: hsl(213 20% 78%); }

@keyframes afp-bar-grow { from { width: 0; } }

/* Stagger the fill so the bars cascade within each panel */
.afp-ac-panel .afp-bar-row:nth-child(1) .afp-bar-fill { animation-delay: 40ms; }
.afp-ac-panel .afp-bar-row:nth-child(2) .afp-bar-fill { animation-delay: 110ms; }
.afp-ac-panel .afp-bar-row:nth-child(3) .afp-bar-fill { animation-delay: 180ms; }
.afp-ac-panel .afp-bar-row:nth-child(4) .afp-bar-fill { animation-delay: 250ms; }
.afp-ac-panel .afp-bar-row:nth-child(5) .afp-bar-fill { animation-delay: 320ms; }
.afp-ac-panel .afp-bar-row:nth-child(6) .afp-bar-fill { animation-delay: 390ms; }

/* ============================================================
   Asset Class — Drill-down tree explorer
   Region -> Geography -> Market Cap -> Strategy -> Funds
   (or for FI: Region -> Credit Type -> Geography -> Strategy -> Funds)
   ============================================================ */
.afp-tree-card { margin-top: 0; }
.afp-tree-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.afp-tree-card-sub {
  margin: 0.15rem 0 0; font-size: 0.74rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); letter-spacing: 0.02em;
}
.afp-tree-card-actions { display: inline-flex; gap: 0.35rem; }
.afp-tree-card-actions .afp-nav-badge {
  background: hsl(var(--background)); color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border)); cursor: pointer;
}
.afp-tree-card-actions .afp-nav-badge:hover {
  background: #fff; color: hsl(var(--primary)); border-color: hsl(var(--primary));
}

/* Per-focus accent — same navy / flat-blue trio used in the AC toggle. */
.afp-tree-card[data-focus="Equity"]       { --tree-accent: #2C3E50; --tree-accent-soft: rgba(44,62,80,0.14); }
.afp-tree-card[data-focus="Fixed Income"] { --tree-accent: #2980B9; --tree-accent-soft: rgba(41,128,185,0.16); }
.afp-tree-card { --tree-accent: #2C3E50; --tree-accent-soft: rgba(44,62,80,0.14); }

.afp-tree-list { list-style: none; padding: 0; margin: 0; }
.afp-tree-root { padding: 0.25rem 0; }

.afp-tree-row {
  position: relative;
  border-radius: var(--radius-sm);
}
.afp-tree-row + .afp-tree-row { margin-top: 0.15rem; }

.afp-tree-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1.4fr) auto minmax(110px, 0.9fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.8rem;
  background: transparent; border: none;
  text-align: left; cursor: pointer;
  border-radius: var(--radius-sm);
  color: hsl(var(--ink));
  transition: background-color 140ms var(--ease);
}
.afp-tree-toggle:hover { background: hsl(var(--background)); }
.afp-tree-row.is-open > .afp-tree-toggle {
  background: var(--tree-accent-soft);
}

.afp-tree-chev {
  width: 0.85rem; height: 0.85rem; color: hsl(var(--muted-foreground));
  transition: transform 180ms var(--ease);
  flex-shrink: 0;
}
/* Leaf rows (no children body): hide chevron to signal end-of-branch */
.afp-tree-row:not(:has(> .afp-tree-body)) .afp-tree-chev { visibility: hidden; }
.afp-tree-row.is-open > .afp-tree-toggle .afp-tree-chev { transform: rotate(90deg); }

.afp-tree-label {
  font-size: 0.86rem; font-weight: 600; color: hsl(var(--ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.afp-tree-label.muted { color: hsl(var(--muted-foreground)); font-weight: 500; }

.afp-tree-level {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  padding: 0.1rem 0.4rem; border-radius: 999px;
  white-space: nowrap;
}

.afp-tree-bar-wrap { display: block; min-width: 0; }
.afp-tree-bar {
  display: block; height: 5px; background: hsl(210 24% 94%);
  border-radius: 999px; overflow: hidden;
}
.afp-tree-bar-fill {
  display: block; height: 100%;
  background: var(--tree-accent);
  width: var(--w, 0%);
  border-radius: 999px;
  transition: width 320ms var(--ease-out);
}

.afp-tree-figures { text-align: right; white-space: nowrap; }
.afp-tree-aum {
  display: block; font-size: 0.84rem; font-weight: 700;
  color: hsl(var(--ink)); font-variant-numeric: tabular-nums;
}
.afp-tree-meta {
  display: block; font-size: 0.7rem; color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

/* Children container — smooth grid-row collapse like the filters */
.afp-tree-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  margin-left: 1.15rem;
  border-left: 1px dashed hsl(var(--border));
  padding-left: 0.5rem;
  transition: grid-template-rows 240ms var(--ease), opacity 200ms var(--ease), margin-top 220ms var(--ease);
  margin-top: 0;
}
.afp-tree-row.is-open > .afp-tree-body {
  grid-template-rows: 1fr; opacity: 1;
  margin-top: 0.3rem;
}
.afp-tree-body > * { overflow: hidden; min-height: 0; }

/* (Level toggles trigger an AJAX swap of just #afpTreeCard, so the server
   rebuilds the tree with only active dims; same-labeled siblings across
   formerly different parents end up merged correctly. The old
   `.is-level-skip` CSS was removed — it only hid the row visually
   without aggregating, which left duplicate sibling labels visible.) */
.afp-tree-card.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 120ms var(--ease);
}

/* Leaf — list of individual funds */
.afp-tree-funds { list-style: none; padding: 0; margin: 0; }
.afp-tree-fund + .afp-tree-fund { border-top: 1px dashed hsl(var(--border)); }
.afp-tree-fund-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* Right padding matches `.afp-tree-toggle` (0.8rem) so the fund AUM
     ends at the exact same X position as the parent-group AUM total. */
  padding: 0.5rem 0.8rem;
  text-decoration: none; color: hsl(var(--ink));
  border-radius: var(--radius-sm);
  transition: background-color 140ms var(--ease);
}
.afp-tree-fund-link:hover { background: hsl(var(--background)); text-decoration: none; }
/* Fund name + ISIN sit together on the left as a single block. ISIN
   renders as a small monospace chip right next to the name. */
.afp-tree-fund-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap;
}
.afp-tree-fund-name {
  font-size: 0.82rem; font-weight: 600; color: hsl(var(--ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.afp-tree-fund-isin {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background, 210 20% 98%));
  border: 1px solid hsl(var(--border));
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Right block: AUM + 3 period flows in a single tidy row.
   Each column is anchored EXPLICITLY by `grid-column` so AUM always lives
   in column 4 (the rightmost slot) regardless of which sibling columns
   are hidden via `display: none`. Without explicit anchors, grid
   auto-placement collapses visible items to the left — that's what made
   the AUM column shift away from its parent total in the tree. */
.afp-tree-fund-flows {
  display: grid;
  grid-template-columns: 5.5rem 5.5rem 5.5rem 6.25rem;
  gap: 0.5rem;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.afp-tree-fund-flow.is-mtd { grid-column: 1; }
.afp-tree-fund-flow.is-ytd { grid-column: 2; }
.afp-tree-fund-flow.is-m12 { grid-column: 3; }
.afp-tree-fund-aum.is-aum  { grid-column: 4; }
.afp-tree-fund-aum {
  font-size: 0.82rem; font-weight: 700; color: hsl(var(--ink));
  white-space: nowrap; text-align: right;
}
.afp-tree-fund-flow {
  font-size: 0.72rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap; text-align: right;
}
.afp-tree-fund-flow.pos { color: hsl(var(--chart-2, 160 84% 28%)); }
.afp-tree-fund-flow.neg { color: hsl(var(--chart-3, 0 84% 50%)); }
/* Small inline label (MTD / YTD / 12M) shown next to each flow so the
   user knows which period each value belongs to when "All" is selected. */
.afp-tree-flow-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-right: 0.3rem;
  opacity: 0.7;
}
.afp-tree-fund-flow.pos .afp-tree-flow-label,
.afp-tree-fund-flow.neg .afp-tree-flow-label {
  color: inherit; opacity: 0.55;
}

/* Column toggle — hide whichever flow/aum cols are not in data-cols.
   data-cols is space-separated like "aum ytd". */
.afp-tree-card:not([data-cols~="aum"]) .afp-tree-fund-aum  { display: none; }
.afp-tree-card:not([data-cols~="mtd"]) .afp-tree-fund-flow.is-mtd { display: none; }
.afp-tree-card:not([data-cols~="ytd"]) .afp-tree-fund-flow.is-ytd { display: none; }
.afp-tree-card:not([data-cols~="m12"]) .afp-tree-fund-flow.is-m12 { display: none; }

/* Category filter — hide leaves whose category isn't enabled, and hide
   internal nodes whose subtree contains no enabled categories. */
.afp-tree-card[data-cats]:not([data-cats*="ETFs"])
  .afp-tree-fund[data-category="ETFs"],
.afp-tree-card[data-cats]:not([data-cats*="Funds"])
  .afp-tree-fund[data-category="Funds"],
.afp-tree-card[data-cats]:not([data-cats*="FundsLocal"])
  .afp-tree-fund[data-category="FundsLocal"] { display: none; }

/* Internal nodes: hide rows whose categories don't overlap with active set.
   data-categories on each row is a space-separated list of categories
   present in its subtree, matched with attribute-includes selectors. */
.afp-tree-card:not([data-cats*="ETFs"]) .afp-tree-row[data-categories="ETFs"],
.afp-tree-card:not([data-cats*="Funds"]) .afp-tree-row[data-categories="Funds"],
.afp-tree-card:not([data-cats*="FundsLocal"]) .afp-tree-row[data-categories="FundsLocal"] {
  display: none;
}

/* Chip-style checkbox toggles (used for both columns + categories). */
.afp-tree-chips {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.18rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  margin-right: 0.4rem;
}
.afp-tree-chip {
  position: relative;
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.22rem 0.55rem;
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.afp-tree-chip input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.afp-tree-chip:hover { color: hsl(var(--primary)); background: rgba(255,255,255,0.7); }
.afp-tree-chip:has(input:checked) {
  background: hsl(var(--primary));
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Celular (<768px — ver _breakpoints.css): tree compactado */
@media (max-width: 767.98px) {
  .afp-tree-toggle {
    grid-template-columns: 1.1rem minmax(0, 1fr) auto auto;
    gap: 0.5rem;
  }
  .afp-tree-bar-wrap { display: none; }
  .afp-tree-level { display: none; }
}
.afp-ac-panel .afp-bar-row:nth-child(7) .afp-bar-fill { animation-delay: 460ms; }
.afp-ac-panel .afp-bar-row:nth-child(8) .afp-bar-fill { animation-delay: 530ms; }

/* ============================================================
   Asset Class — Celular (<768px — ver _breakpoints.css)
   ============================================================ */
@media (max-width: 767.98px) {
  /* Head: stack the Equity/FI toggle ABOVE the AUM summary; both align left */
  .afp-ac-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .afp-ac-summary { text-align: left; }
  .afp-ac-summary-aum { font-size: 1.2rem; }

  /* Equity/FI toggle: fill row, options share width equally so labels don't
     stack awkwardly and tap targets stay big enough. */
  .afp-ac-toggle {
    width: 100%;
    display: flex;
    gap: 0.25rem;
  }
  .afp-ac-opt {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.55rem;
    font-size: 0.84rem;
    text-align: center;
  }
  .afp-ac-opt-sub { font-size: 0.66rem; margin-top: 0.1rem; }

  /* Cards grid: force single column (the 360px minmax stays 1-up on phones) */
  .afp-ac-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .afp-ac-panel { padding: 0.85rem 0.95rem; }

  /* Bar row: let label + value wrap so long meta (e.g. "$33B · -$531M MTD · +16%")
     doesn't squeeze the label down to nothing or overflow horizontally. */
  .afp-bar-top {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.15rem 0.4rem;
  }
  .afp-bar-label { font-size: 0.78rem; }
  .afp-bar-val {
    font-size: 0.74rem;
    white-space: normal;
    text-align: right;
  }
  .afp-bar-meta { display: block; }

  /* Tree card header: title on its own row, action chips below — wraps so
     the AUM/MTD/YTD/12M/categories/Expand/Collapse strip never overflows. */
  .afp-tree-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .afp-tree-card-actions {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .afp-tree-chips {
    margin-right: 0;
    flex: 1 1 100%;
  }
  .afp-tree-chip {
    flex: 1 1 0;
    justify-content: center;
    font-size: 0.66rem;
    padding: 0.22rem 0.4rem;
  }

  /* Tree node row: drop the bar (already hidden at 768) AND reduce the
     figures column so AUM + count·pct stay readable on a 360px screen. */
  .afp-tree-toggle {
    grid-template-columns: 1.1rem minmax(0, 1fr) auto;
    padding: 0.45rem 0.55rem;
    gap: 0.4rem;
  }
  .afp-tree-label { font-size: 0.8rem; }
  .afp-tree-aum { font-size: 0.78rem; }
  .afp-tree-meta { font-size: 0.66rem; }

  /* Tree fund leaf: stack name+ISIN on one line, flows on next line. The
     fixed 4-column grid (5.5rem × 3 + 6.25rem) doesn't fit a phone — fall
     back to a wrap row with smaller cells. */
  .afp-tree-fund-link {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
  }
  .afp-tree-fund-main { width: 100%; gap: 0.3rem; }
  .afp-tree-fund-name { font-size: 0.78rem; }
  .afp-tree-fund-flows {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem 0.5rem;
    width: 100%;
  }
  .afp-tree-fund-flow,
  .afp-tree-fund-aum { min-width: 0; font-size: 0.72rem; }
  .afp-tree-fund-aum { font-size: 0.78rem; }

  /* Tree-body indent: phones are narrow → trim left indent / dashed border
     so deeply-nested subtrees don't push the figures off-screen. */
  .afp-tree-body {
    margin-left: 0.55rem;
    padding-left: 0.35rem;
  }
}