/* v227 — hierarquia do gráfico financeiro: valor, comparação e evidência. */
#financeiro .financeChartControls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:0 0 16px!important;
  border-bottom:1px solid var(--cc-border-subtle);
  border-radius:0!important;
  background:transparent!important;
}
#financeiro .financeChartSummary{
  display:grid;
  grid-template-columns:auto auto minmax(180px,1fr);
  align-items:baseline;
  column-gap:12px;
  row-gap:4px;
  min-width:0;
}
#financeiro .financeChartSummaryLabel{
  grid-column:1/-1;
  color:var(--cc-text-tertiary);
  font:600 11px/1.25 var(--cc-font-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
#financeiro .financeChartSummaryValue{
  color:var(--cc-text-primary);
  font:650 clamp(20px,2.2vw,28px)/1.08 var(--cc-font-mono);
  letter-spacing:-.035em;
  white-space:nowrap;
}
#financeiro .financeChartSummaryDelta{
  color:var(--cc-text-secondary);
  font:600 13px/1.35 var(--cc-font-sans);
}
#financeiro .financeChartSummaryDelta[data-direction="up"]{color:var(--cc-status-success-fg)}
#financeiro .financeChartSummaryDelta[data-direction="down"]{color:var(--cc-status-warning-fg)}
#financeiro .financeChartSummaryEvidence{
  grid-column:1/-1;
  color:var(--cc-text-tertiary);
  font:500 12px/1.4 var(--cc-font-sans);
}
#financeiro .financeChartLegend{
  gap:22px;
  margin:14px 0 8px;
  color:var(--cc-text-secondary);
  font-size:13px;
}
#financeiro .financeChartLegend span:nth-child(2){color:var(--cc-text-primary);font-weight:650}
#financeiro .financeChartLegend .financeLegendPrior{
  width:20px;
  height:0;
  border:0;
  border-top:3px solid color-mix(in srgb,var(--cc-text-primary) 78%,var(--cc-data-revenue));
  background:none;
}
#financeiro .financePreviousMarkerOutline{stroke:var(--cc-surface-1);stroke-width:5;stroke-linecap:round}
#financeiro .financePreviousMarker{
  stroke:color-mix(in srgb,var(--cc-text-primary) 78%,var(--cc-data-revenue));
  stroke-width:3;
  stroke-linecap:round;
}
#financeiro .financeTotalLabel{display:none}
#financeiro .financeChartTip{min-width:230px;padding:12px 13px}
#financeiro .financeChartTipDate{
  display:block;
  margin-bottom:8px;
  color:var(--cc-text-primary);
  font:700 13px/1.2 var(--cc-font-mono);
}
#financeiro .financeChartTipRow{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  color:var(--cc-text-secondary);
  font:600 12px/1.45 var(--cc-font-sans);
}
#financeiro .financeChartTipRow + .financeChartTipRow{margin-top:5px}
#financeiro .financeChartTipRow i{display:block;width:12px}
#financeiro .financeChartTipRow.isCurrent i{height:8px;background:var(--cc-data-revenue)}
#financeiro .financeChartTipRow.isPrevious i{height:0;border-top:3px solid color-mix(in srgb,var(--cc-text-primary) 78%,var(--cc-data-revenue))}
#financeiro .financeChartTipRow strong{color:var(--cc-text-primary);font:700 12px/1.45 var(--cc-font-mono);white-space:nowrap}

@media(max-width:620px){
  #financeiro .financeChartControls{grid-template-columns:minmax(0,1fr);gap:12px}
  #financeiro .financeChartSummary{grid-template-columns:minmax(0,1fr)}
  #financeiro .financeChartSummaryLabel,#financeiro .financeChartSummaryEvidence{grid-column:auto}
  #financeiro .financeChartToggle{justify-self:start}
}