.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Cabeçalho do Início — igual à maquete: título + subtítulo antes do hero. */
.dash-header { margin-bottom: var(--space-4); }
.dash-header__title { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; letter-spacing: -0.01em; }
.dash-header__sub { color: var(--color-text-soft); font-size: var(--fs-sm); margin-top: 4px; max-width: 62ch; }

/* Pares lado a lado no PC (Gastos x Cartões, Assistente x Metas/Pró-labore,
   Relatório x Auditoria) — cada .row-split tem exatamente 2 filhos diretos,
   então o auto-placement do grid já os coloca um do lado do outro sem
   precisar de grid-column/grid-row explícitos. No celular cada par
   simplesmente empilha na ordem em que está no HTML. */
.row-split { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-5); }
.row-split > .section { margin-bottom: 0; }
.col-stack { display: flex; flex-direction: column; gap: var(--space-4); }

@media (min-width: 900px) {
  main.view.view-dashboard { max-width: 1040px; }

  .row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Hero do Início — patrimônio consolidado (bancos + investimentos),
   sempre visível independente do mês em navegação ao lado. */
.hero-patrimonio {
  background: linear-gradient(155deg, var(--color-brand-600) 0%, color-mix(in srgb, var(--color-brand-600) 78%, black) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
}
.hero-patrimonio__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.78; }
.hero-patrimonio__valor {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 6vw, 38px); line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.hero-patrimonio__delta {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.16); border-radius: var(--radius-pill);
  padding: 4px 11px; font-size: 12.5px; font-weight: 700; margin-top: 8px;
}
.hero-patrimonio__split { display: flex; gap: var(--space-5); margin-top: var(--space-4); flex-wrap: wrap; }
.hero-patrimonio__split div { font-size: 12px; opacity: 0.85; }
.hero-patrimonio__split strong { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }

.donut-layout {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.donut-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.donut-wrap svg { display: block; width: 100%; height: 100%; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-center__label { font-size: var(--fs-xs); color: var(--color-text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.donut-center__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }

.donut-legend { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; min-width: 0; }
.donut-legend__item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.donut-legend__nome { color: var(--color-text-soft); flex: 1; }

.previsto-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.previsto-linha strong { color: var(--color-text); }
.previsto-linha .previsto-pct {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.previsto-linha.is-income .previsto-pct { background: var(--color-success-50); color: var(--color-success-600); }
.previsto-linha.is-expense .previsto-pct { background: var(--color-danger-50); color: var(--color-danger-600); }

/* O reset global `svg { width: 24px; height: 24px }` (pensado pros ícones
   inline) vence os atributos width/height="100%" dos gráficos SVG puros
   (charts.js) — sem isso eles renderizam minúsculos, 24x24. */
#chart-fluxo-meses svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin-bottom: var(--space-2);
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }

.month-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.month-switcher button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center;
}
.month-switcher button svg { width: 16px; height: 16px; }
.month-switcher .label { font-weight: 700; min-width: 140px; text-align: center; }

.bar-row { margin-bottom: var(--space-3); }
.bar-row:last-child { margin-bottom: 0; }
.bar-row__top {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  margin-bottom: 6px;
}
.bar-row__top .nome { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bar-row__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bar-row__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  overflow: hidden;
}
/* Cor sempre calculada e passada explícita via inline style por quem
   desenha a barra — um style="background:" vazio no HTML não é ignorado
   pelo navegador (vence a regra da classe mesmo sem valor), então esse
   fallback aqui é só rede de segurança pra quem esquecer de definir. */
.bar-row__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-brand-500); }

.mini-list .list-item { cursor: pointer; }

/* Leitura automática do mês — substitui o antigo botão "Gerar análise"
   (a IA de verdade, com contexto completo, agora é o Assistente/chat).
   Isso aqui é uma leitura simples calculada na hora, sem chamar IA. */
.insight-mes {
  background: var(--color-brand-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.insight-mes__ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--color-brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.insight-mes__ic svg { width: 16px; height: 16px; }
.insight-mes p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-soft); }
.insight-mes strong { color: var(--color-text); }
.insight-mes__tag {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-brand-600); margin-bottom: 4px;
}

.prolabore-mini__top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-soft); margin-bottom: var(--space-2);
}