/* Barras novas (E13, P02; pedido de Darlan: "gráfico mais moderno, pode ser o mesmo formato com um design melhor").
   Valem para os dois visuais. Mesma informação; a barra fica com degradê na cor do assunto, brilho na ponta, régua de
   quartos no trilho e, no balanço, para onde vai a receita (despesas × sobra). Cores só por tokens. */

/* Trilho e preenchimento comuns às barras de <progress> do app */
:is(.balance-meter-row, .chart-row-share, .drawer-widget) progress, .center-bar, progress.crypto-alloc-bar, .crypto-target-track progress {
  --bar-c: var(--row-tone, var(--bar-tone, var(--category-color, var(--c-accent))));
}
:is(.balance-meter-row, .chart-row-share, .drawer-widget) progress::-webkit-progress-value, .center-bar::-webkit-progress-value, progress.crypto-alloc-bar::-webkit-progress-value, .crypto-target-track progress::-webkit-progress-value {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-c) 55%, transparent), var(--bar-c));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 35%, transparent);
}
:is(.balance-meter-row, .chart-row-share, .drawer-widget) progress::-moz-progress-bar, .center-bar::-moz-progress-bar, progress.crypto-alloc-bar::-moz-progress-bar, .crypto-target-track progress::-moz-progress-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar-c) 55%, transparent), var(--bar-c));
}

/* Balanço: barra grossa, régua de quartos e o brilho na ponta */
.balance-meter-row progress { height: 14px; background: color-mix(in srgb, var(--row-tone) 8%, var(--n-150)); filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--row-tone) 30%, transparent)); }
.balance-meter-row progress::-webkit-progress-bar {
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--n-600) 22%, transparent) calc(25% - 1px) 25%), color-mix(in srgb, var(--row-tone) 8%, var(--n-150));
}
.balance-meter-row progress::-webkit-progress-value { background: radial-gradient(circle at calc(100% - 7px) 50%, color-mix(in srgb, var(--c-on-color) 90%, transparent) 0 3px, transparent 4px), linear-gradient(90deg, color-mix(in srgb, var(--row-tone) 55%, transparent), var(--row-tone)); }
.balance-meter-row progress::-moz-progress-bar { background: radial-gradient(circle at calc(100% - 7px) 50%, color-mix(in srgb, var(--c-on-color) 90%, transparent) 0 3px, transparent 4px), linear-gradient(90deg, color-mix(in srgb, var(--row-tone) 55%, transparent), var(--row-tone)); }
.balance-meter-rows:has(.balance-split) .balance-meter-note { display: none; }
.balance-split { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 4px; font-size: 12px; color: var(--n-600); }
.balance-split svg { grid-column: 1 / -1; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; }
.balance-split rect.is-out { fill: color-mix(in srgb, var(--c-danger) 55%, var(--n-150)); }
.balance-split rect.is-in { fill: color-mix(in srgb, var(--c-success) 45%, var(--n-150)); }
.balance-split b { color: var(--n-900); }
.balance-split > span:last-child { text-align: right; }

/* Barras finas (categorias, centrais de contas e cartões): um pouco mais altas e com degradê */
.chart-row-share progress, .center-bar { height: 8px; }

/* Mercado e painel: a mesma luz na ponta */
.mkt-bar i { position: relative; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 35%, transparent); }
.mkt-bar i::after { content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--c-on-color) 85%, transparent); }