/* Binanca y Vitu — componentes (03/11/2026). Os nomes das classes vêm do
   design system antigo (od-) e ficam iguais: o JS usa-os. As cores vêm só dos
   tokens (tokens.css). Planos, arredondados, sem "teclas" nem pixel art. */
.od-raiz, body { font-family: var(--font-texto); color: var(--ink); background-color: var(--ground); }
.od-raiz {
  background-image: var(--spotlight);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
.od-pixel, .od-svg, .od-spark { display: block; }
.od-linha-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.od-coluna { display: flex; flex-direction: column; gap: 12px; }

/* .od-degrau: era o canto em degrau / a tecla; agora é só o raio grande do cartão */
.od-degrau { border-radius: var(--radius-lg); }

/* ---------- letras ---------- */
.od-titulo { font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
.od-titulo--xl, .od-titulo--l, .od-titulo--m {
  background: linear-gradient(180deg, var(--ink) 32%, var(--muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.od-titulo--xl { font-size: 40px; letter-spacing: -0.035em; } .od-titulo--l { font-size: 30px; letter-spacing: -0.03em; } .od-titulo--m { font-size: 22px; line-height: 1.2; }
.od-num { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; letter-spacing: -0.03em; }
.od-num--xl { font-size: 44px; letter-spacing: -0.035em; } .od-num--l { font-size: 28px; } .od-num--m { font-size: 24px; } .od-num--s { font-size: 15px; letter-spacing: 0; }
.od-num small, .od-num .od-cent { font-size: 0.6em; letter-spacing: 0; }   /* os cêntimos mais pequenos */
.od-moeda { font-size: 0.6em; font-weight: 600; margin-right: 3px; letter-spacing: 0; }
.od-rotulo { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.od-texto { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.od-legenda-txt { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ---------- botões: bordas suaves estilo Lousas OS ---------- */
.od-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); height: var(--toque); padding: 0 18px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: var(--font-texto); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; cursor: pointer; background: var(--surface-2); color: var(--ink); box-shadow: none; transition: background-color 140ms ease, border-color 140ms ease, transform 120ms ease, opacity 140ms ease; text-decoration: none; white-space: nowrap; }
.od-btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
.od-btn:active, .od-btn[aria-pressed="true"] { transform: scale(0.98); }
.od-btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.od-btn:focus-visible, .od-chip:focus-visible, .od-seg button:focus-visible, .od-tecla:focus-visible, .od-campo input:focus-visible, .od-campo select:focus-visible, .od-switch input:focus-visible + span, .od-marca input:focus-visible + span, .od-nav a:focus-visible, .od-link:focus-visible, .od-acao:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.od-btn--primario, .od-btn--primario:hover { background: var(--ui-primary); color: var(--ui-primary-ink); border-color: var(--ui-primary); font-weight: 500; }
.od-btn--primario:hover { opacity: 0.9; }
.od-btn--perigo, .od-btn--perigo:hover { background: var(--neg-soft); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 32%, transparent); }
.od-btn--fantasma { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.od-btn--fantasma:hover { background: var(--surface-3); border-color: var(--line-strong); }
.od-btn--fantasma:active { border-color: var(--line-strong); }
.od-btn--icone { width: var(--toque); padding: 0; }
.od-btn--pequeno { height: 36px; min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.od-btn--largo { width: 100%; }
.od-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- novo: a fila de ações redondas (ícone num círculo, rótulo por baixo) ---------- */
.od-acoes { display: flex; justify-content: center; gap: 20px; }
.od-acao { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 56px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 500 12px/1.2 var(--font-texto); cursor: pointer; text-decoration: none; }
.od-acao__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink); transition: transform 120ms ease; }
.od-acao:active .od-acao__ic { transform: scale(0.94); }
.od-acao--primario .od-acao__ic { background: var(--ui-primary); color: var(--ui-primary-ink); }
.od-acao__ic svg, .od-acao__ic .tl-icone { width: 22px; height: 22px; }

/* ---------- novo: o saldo grande no topo (rótulo, número, pílula) ---------- */
.od-saldo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 0 8px; }
.od-saldo .od-num { font-size: 48px; letter-spacing: -0.04em; }
.od-pilula { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--vidro); color: var(--ink); font: 600 13px/1 var(--font-texto); cursor: pointer; text-decoration: none; }

/* ---------- novo: o ícone num círculo (lista, contas, categorias) ---------- */
.od-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink); font: 600 15px/1 var(--font-texto); overflow: hidden; }
.od-avatar--cor { background: color-mix(in srgb, var(--cor, var(--ink)) 18%, var(--surface)); color: var(--cor, var(--ink)); }
.od-avatar svg, .od-avatar .tl-icone { width: 20px; height: 20px; }

/* ---------- segmentado (meu / dela / nosso) ---------- */
.od-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-btn); box-shadow: none; }
.od-seg button { min-height: 34px; height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 13px var(--font-texto); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; white-space: nowrap; }
.od-seg button:hover { color: var(--ink); }
.od-seg button[aria-pressed="true"] { background: var(--chip-claro); color: var(--ink); box-shadow: var(--sombra); }
[data-theme="amanhecer"] .od-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(25,25,25,0.08); }

/* ---------- chip (categoria, filtro) ---------- */
.od-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font: 500 13px/1 var(--font-texto); cursor: pointer; white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.od-chip:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }
.od-chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.od-chip[aria-pressed="true"] svg rect { fill: var(--ground) !important; }

/* ---------- barra de baixo: 5 itens iguais, ícone em cima e rótulo pequeno ---------- */
.od-nav { display: flex; gap: 0; padding: 6px 0; background: color-mix(in srgb, var(--ground) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); }
.od-nav a { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 2px; border-radius: var(--radius-btn); background: transparent; color: var(--muted); text-decoration: none; font: 500 11.5px/1.1 var(--font-texto); letter-spacing: -0.02em; box-shadow: none; white-space: nowrap; overflow: hidden; }
.od-nav a svg, .od-nav a .tl-icone, .od-nav a i[data-ico] { width: 22px; height: 22px; flex: none; }
.od-nav a[aria-current="page"] { color: var(--ink); background: transparent; box-shadow: none; font-weight: 600; }
.od-nav a.od-nav__lancar { display: none; } /* o + Lançar saiu do dock (03/11/2026) */

/* ---------- campos ---------- */
.od-campo { display: flex; flex-direction: column; gap: 6px; }
.od-campo label { font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.od-campo__caixa { display: flex; align-items: center; gap: 8px; min-height: 46px; height: 46px; padding: 0 14px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-btn); box-shadow: none; transition: border-color 140ms ease, background-color 140ms ease; }
.od-campo__caixa:hover { border-color: var(--line-strong); }
.od-campo input, .od-campo select, .od-campo textarea { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--font-texto); }
.od-campo select { cursor: pointer; }
.od-campo input::placeholder, .od-campo textarea::placeholder { color: var(--muted); }
.od-campo input:focus-visible, .od-campo select:focus-visible { outline: none; }
.od-campo__caixa:focus-within { border-color: var(--focus); outline: none; }
.od-campo__moeda { font: 600 15px/1 var(--font-texto); color: var(--muted); }
.od-campo--valor .od-campo__caixa { height: 68px; }
.od-campo--valor input { font: 600 32px var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.od-campo__ajuda { font-size: 12px; color: var(--muted); }
.od-campo--erro .od-campo__caixa { border-color: var(--neg); }
.od-campo--erro .od-campo__ajuda { color: var(--neg); font-weight: 600; }

/* ---------- teclado ---------- */
.od-teclado { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.od-teclado__visor { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 16px; background: transparent; border-radius: var(--radius-md); box-shadow: none; }
.od-teclado__visor b { font: 600 48px/1 var(--font-num); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.od-teclado__teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.od-tecla { height: 56px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 500 26px/1 var(--font-num); font-variant-numeric: tabular-nums; box-shadow: none; cursor: pointer; transition: background-color 100ms ease; }
.od-tecla:hover { background: var(--surface-2); }
.od-tecla:active { background: var(--surface-3); }
.od-tecla--fn { font: 600 14px var(--font-texto); color: var(--muted); }

/* ---------- interruptor, caixa, rádio ---------- */
.od-switch, .od-marca { display: inline-flex; align-items: center; gap: 12px; min-height: var(--toque); cursor: pointer; font: 500 15px var(--font-texto); }
.od-switch input, .od-marca input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.od-switch span { position: relative; width: 50px; height: 30px; background: var(--surface-3); border: 0; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 150ms ease; }
.od-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 150ms ease, background-color 150ms ease; }
.od-switch input:checked + span { background: var(--accent); box-shadow: none; }
.od-switch input:checked + span::after { left: 23px; background: #ffffff; } /* o botão branco: cor fixa do controle, como no sistema */
.od-marca span { width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--line-campo); border-radius: 6px; background: transparent; flex: none; position: relative; }
.od-marca--radio span { border-radius: 50%; }
.od-marca input:checked + span { border-color: var(--accent); background: var(--accent); }
.od-marca input:checked + span::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #ffffff; }

/* ---------- cartões e bento ---------- */
.od-cartao { background: var(--surface); border: 1px solid var(--line); padding: 18px; border-radius: var(--radius-lg); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; }
.od-cartao--elevado { box-shadow: var(--sombra); }
a.od-cartao, button.od-cartao, .od-cartao[data-cartao] { transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease; }
a.od-cartao:hover, button.od-cartao:hover, .od-cartao[data-cartao]:hover { background: var(--surface-2); border-color: var(--line-strong); }
a.od-cartao:active, button.od-cartao:active { transform: scale(0.99); }
.od-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.od-span-2 { grid-column: span 2; } .od-span-4 { grid-column: 1 / -1; } .od-alto { grid-row: span 2; }
@media (max-width: 560px) { .od-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .od-span-4 { grid-column: 1 / -1; } }
.od-pote { border-top: 1px solid var(--line); }
.od-pote .od-num { color: var(--ink); }
.od-pote .od-rotulo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--cor, var(--accent)); vertical-align: 1px; }
.od-cartao__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.od-link { display: flex; align-items: center; gap: 12px; min-height: var(--toque); text-decoration: none; color: var(--ink); }
.od-link__seta { margin-left: auto; font: 500 18px/1 var(--font-texto); color: var(--muted); }

/* ---------- linha de lançamento (como a lista de um banco digital) ---------- */
.od-lanc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; min-height: 44px; border-bottom: 0; }
.od-lanc__ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; flex: none; }
.od-lanc__nome { font: 500 15px/1.3 var(--font-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-lanc__meta { font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.od-lanc__valor { font: 600 15px/1 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ---------- estado ---------- */
.od-estado { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; box-sizing: border-box; font: 500 11px/1 var(--font-mono); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.od-estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.od-estado--conferir { color: var(--res); background: var(--res-soft); border-color: color-mix(in srgb, var(--res) 28%, transparent); }
.od-estado--conferido { color: var(--pos); background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 28%, transparent); }
.od-estado--previsto { color: var(--muted); background: transparent; border: 1px dashed var(--line-strong); box-shadow: none; }
.od-estado--combinado { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.od-estado--recebido { color: var(--pos); background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 28%, transparent); }
.od-estado--atrasado { color: var(--neg); background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 28%, transparent); }

/* ---------- quadradinhos (barra de progresso em pedaços) ---------- */
.od-quad { display: flex; gap: 3px; }
.od-quad i { flex: 1 1 0; height: 8px; border-radius: 999px; }

/* ---------- viagem (ficam por compatibilidade, sem papel nem carimbo) ---------- */
.od-embarque { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sombra); min-width: 0; overflow: hidden; }
.od-embarque__corpo { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-width: 0; }
.od-embarque__rota { display: flex; align-items: center; gap: 10px; }
.od-embarque__picote { width: 0; border-left: 1px solid var(--line); }
.od-embarque__lado { padding: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 88px; }
.od-barcode { display: flex; gap: 2px; align-items: flex-end; height: 8px; }
.od-barcode i { flex: 1 1 0; width: auto; height: 100%; border-radius: 999px; background: var(--ink); }
.od-barcode i.futuro { background: var(--surface-3); }
.od-carimbo { position: relative; flex-shrink: 0; }
.od-carimbo__texto { position: absolute; text-align: center; }
.od-carimbo__texto b { display: block; font: 600 13px/1 var(--font-texto); }
.od-carimbo__texto span { display: block; margin-top: 4px; font: 500 12px/1 var(--font-texto); color: var(--muted); }
.od-polaroide { background: var(--surface); border: 1px solid var(--line); padding: 8px; border-radius: var(--radius-md); box-shadow: var(--sombra); display: inline-flex; flex-direction: column; gap: 6px; }
.od-polaroide figcaption { font: 500 13px/1.2 var(--font-texto); text-align: center; color: var(--ink-2); }
.od-retrato { display: inline-flex; padding: 0; border-radius: 50%; overflow: hidden; background: transparent; }

/* ---------- aviso, vazio, folha ---------- */
.od-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: var(--radius-md); background: var(--ink); color: var(--ground); font: 500 15px var(--font-texto); max-width: 420px; box-shadow: var(--sombra-alta); }
.od-aviso .od-btn { margin-left: auto; background: transparent; color: var(--ground); border-color: color-mix(in srgb, var(--ground) 35%, transparent); }
.od-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-2); }
.od-folha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-alta); max-width: 420px; }
.od-folha__puxador { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); align-self: center; }

/* ---------- categorias ---------- */
.od-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.od-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 76px; padding: 10px 4px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-2); font: 500 12px/1.2 var(--font-texto); cursor: pointer; text-align: center; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.od-cat:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--ink); }
.od-cat[aria-pressed="true"] { border-color: var(--accent); box-shadow: none; background: var(--accent-soft); color: var(--ink); }

/* ---------- gráficos ---------- */
.od-grafico { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; min-width: 0; }
.od-eixo { font: 500 12px var(--font-texto); fill: var(--muted); font-variant-numeric: tabular-nums; }
.od-valor { font: 600 13px var(--font-texto); fill: var(--ink); font-variant-numeric: tabular-nums; }
.od-grelha { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.od-grelha--base { stroke: var(--line-strong); stroke-dasharray: none; }
.od-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.od-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); }
.od-legenda i { width: 10px; height: 10px; border-radius: 50%; }
.od-legenda b { font: 600 14px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-legenda em { font-style: normal; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.od-legenda--linha { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; min-width: 0; width: 100%; }
.od-legenda--linha li { display: flex; gap: 6px; font-size: 13px; }
.od-legenda__previsto { background: transparent !important; border: 1.5px dashed var(--muted); box-sizing: border-box; }
.od-legenda__nota { color: var(--muted); font-size: 12px; }
.od-pizza__disco { position: relative; flex: none; }
.od-pizza__miolo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.od-empilhada { display: flex; gap: 3px; width: 100%; }
.od-empilhada i { height: 10px; border-radius: 999px; }
.od-cal { display: grid; grid-template-columns: repeat(7, 32px); gap: 4px; }
.od-cal b { font: 500 12px/1 var(--font-texto); color: var(--muted); text-align: center; padding-bottom: 4px; }
.od-cal__dia { height: 32px; display: grid; place-items: center; border-radius: 50%; font: 500 12px var(--font-texto); font-variant-numeric: tabular-nums; color: var(--ink); }
.od-cal--0 { background: var(--surface-2); }
.od-cal--1 { background: color-mix(in srgb, var(--neg) 22%, var(--surface)); }
.od-cal--2 { background: color-mix(in srgb, var(--neg) 45%, var(--surface)); }
.od-cal--3 { background: color-mix(in srgb, var(--neg) 70%, var(--surface)); color: var(--ground); }
.od-cal--4 { background: var(--neg); color: var(--ground); }
.od-cal__escala { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); width: 100%; }
.od-cal__escala i { width: 12px; height: 12px; border-radius: 50%; }
.od-orc { position: relative; width: 100%; max-width: 420px; height: 8px; border-radius: 999px; background: var(--surface-2); }
.od-orc__cheio { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.od-orc__marca { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.od-orc__marca--max { background: var(--neg); }
.od-orc__legenda { display: flex; justify-content: space-between; width: 100%; max-width: 420px; font-size: 12px; color: var(--muted); }
.od-orc__legenda b { font: 600 14px var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.od-orc__msg { margin: 0; font: 500 13px var(--font-texto); }

/* ---------- novo: barra de progresso simples (metas, orçamento) ---------- */
.od-barra { position: relative; width: 100%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.od-barra > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--cor, var(--ui-primary)); }

/* ---------- novo: lista dentro de um cartão (linhas separadas só pelo espaço) ---------- */
.od-lista { display: flex; flex-direction: column; }
.od-lista__mais { align-self: center; min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 16px; font: 500 12px var(--font-mono); color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color 140ms ease; }
.od-lista__mais:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .od-btn, .od-switch span, .od-switch span::after, .od-acao__ic, .od-seg button, .od-tecla, .od-cartao { transition: none !important; } }