/* Finanças — estilo "pastel consumer": tons claros com a tinta escura do mesmo tom, um raio grande (20px)
   nos cartões, dinheiro em tinta e cor só no que precisa de atenção. Fonte única: Manrope. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --ground: #f3f5f7;
  --surface: #ffffff;
  --raised: #f2f8fd;
  --well: #f6f7f9;
  --active: #e7ecf1;
  --border: #e6e6e6;
  --rule: #f0f1f3;
  --control: #d6d9dd;
  --text: #1b1d1f;
  --muted: #5c6064;
  --faint: #686c70;
  --accent: #1d5fd6;
  --accent-soft: #dcf1ff;
  --accent-ink: #0a3a80;
  --primary: #1b1d1f;
  --primary-ink: #ffffff;
  --positive: #2f7a45;
  --negative: #c41c29;
  --warning: #92400e;
  --chart-1: #1d5fd6;
  --chart-neg: #c41c29;
  --chart-muted: #c9cfd6;
  --grid: #eceff2;
  --axis: #5c6064;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #eef1f4; --pill-neutral-ink: #3a3d40;
  --sombra-flutuante: 0 12px 32px rgba(17, 24, 39, 0.14);

  /* as sete tintas de identidade (cartões, pessoas, metas): fundo claro e tinta escura do mesmo tom */
  --t1-bg: #dcf1ff; --t1-ink: #0a3a80;
  --t2-bg: #ffecd1; --t2-ink: #7a3e00;
  --t3-bg: #d3f3ec; --t3-ink: #0b5249;
  --t4-bg: #ffe3e8; --t4-ink: #8a1636;
  --t5-bg: #e6f2d3; --t5-ink: #3a5a12;
  --t6-bg: #f3eadb; --t6-ink: #5c4425;
  --t7-bg: #eceff2; --t7-ink: #33383d;

  --font: "Manrope", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-title: 28px; --fs-section: 20px; --fs-kpi: 32px; --fs-body: 16px; --fs-small: 14px; --fs-tiny: 12px;
  --radius-card: 20px; --radius-inner: 10px; --radius-control: 10px; --radius-chip: 5px;
  --gap: 24px; --pad: 32px; --card-pad: 24px;
  --control-height: 40px; --row-height: 64px;
  --rail: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --ground: #0f1011; --surface: #18191b; --raised: #1f2226; --well: #1d1f22; --active: #26292d;
    --border: #2a2c2f; --rule: #232528; --control: #3d4045;
    --text: #f2f3f4; --muted: #b4b7bb; --faint: #9a9ea3;
    --accent: #5b9bff; --accent-soft: #13294a; --accent-ink: #b5d6ff;
    --primary: #f2f3f4; --primary-ink: #111213;
    --positive: #4fbf72; --negative: #f07a82; --warning: #e5a93b;
    --chart-1: #3987e5; --chart-neg: #e05561; --chart-muted: #4a4e53;
    --grid: #26292d; --axis: #a3a7ab;
    --pill-positive-bg: #172a1d; --pill-positive-ink: #6fd492;
    --pill-negative-bg: #2c1a1d; --pill-negative-ink: #ff9aa1;
    --pill-warning-bg: #2b2414; --pill-warning-ink: #f0bf5f;
    --pill-neutral-bg: #26292d; --pill-neutral-ink: #e3e5e7;
    --sombra-flutuante: 0 16px 40px rgba(0, 0, 0, 0.5);
    --t1-bg: #142a48; --t1-ink: #b5d6ff;
    --t2-bg: #3a2a12; --t2-ink: #ffd296;
    --t3-bg: #10322d; --t3-ink: #96e3d4;
    --t4-bg: #3d1821; --t4-ink: #ffb6c3;
    --t5-bg: #24310f; --t5-ink: #c8e39c;
    --t6-bg: #332a1e; --t6-ink: #e8d5b5;
    --t7-bg: #26292d; --t7-ink: #d7dbdf;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f1011; --surface: #18191b; --raised: #1f2226; --well: #1d1f22; --active: #26292d;
  --border: #2a2c2f; --rule: #232528; --control: #3d4045;
  --text: #f2f3f4; --muted: #b4b7bb; --faint: #9a9ea3;
  --accent: #5b9bff; --accent-soft: #13294a; --accent-ink: #b5d6ff;
  --primary: #f2f3f4; --primary-ink: #111213;
  --positive: #4fbf72; --negative: #f07a82; --warning: #e5a93b;
  --chart-1: #3987e5; --chart-neg: #e05561; --chart-muted: #4a4e53;
  --grid: #26292d; --axis: #a3a7ab;
  --pill-positive-bg: #172a1d; --pill-positive-ink: #6fd492;
  --pill-negative-bg: #2c1a1d; --pill-negative-ink: #ff9aa1;
  --pill-warning-bg: #2b2414; --pill-warning-ink: #f0bf5f;
  --pill-neutral-bg: #26292d; --pill-neutral-ink: #e3e5e7;
  --sombra-flutuante: 0 16px 40px rgba(0, 0, 0, 0.5);
  --t1-bg: #142a48; --t1-ink: #b5d6ff;
  --t2-bg: #3a2a12; --t2-ink: #ffd296;
  --t3-bg: #10322d; --t3-ink: #96e3d4;
  --t4-bg: #3d1821; --t4-ink: #ffb6c3;
  --t5-bg: #24310f; --t5-ink: #c8e39c;
  --t6-bg: #332a1e; --t6-ink: #e8d5b5;
  --t7-bg: #26292d; --t7-ink: #d7dbdf;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 400 var(--fs-body)/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.num, .valor, table { font-variant-numeric: tabular-nums; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cinza { color: var(--muted); }
.fraco { color: var(--faint); }
.neg { color: var(--negative); }
.pos { color: var(--positive); }
.aviso-sem-js { padding: 32px; }

/* ---------- moldura: trilho de ícones + tela ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.trilho {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 0; background: var(--ground); border-right: 1px solid var(--border); z-index: 5;
}
.trilho .marca { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; }
.trilho .marca img { width: 32px; height: 32px; }
.trilho .separa { width: 20px; height: 1px; margin: 8px 0; background: var(--border); }
.trilho .baixo { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.item-trilho {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.item-trilho svg { width: 20px; height: 20px; }
.item-trilho:hover { background: var(--active); color: var(--text); }
.item-trilho[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.item-trilho::after {
  content: attr(data-rotulo); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 5px 10px; border-radius: 8px; background: var(--primary); color: var(--primary-ink);
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity 120ms ease;
}
.item-trilho:hover::after, .item-trilho:focus-visible::after { opacity: 1; }

.tela { min-width: 0; padding: 28px var(--pad) 56px; }
.tela.atualizando > * { opacity: 0.55; transition: opacity 120ms ease; }

/* barra inferior do celular e a folha "Mais" */
.barra { display: none; }
.folha-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(15, 16, 17, 0.4); display: flex; align-items: flex-end; }
.folha { width: 100%; background: var(--surface); border-radius: 20px 20px 0 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-flutuante); }
.folha a, .folha button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 8px; border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer; }
.folha a:hover, .folha button:hover { background: var(--active); }
.folha svg { width: 20px; height: 20px; color: var(--muted); }

/* ---------- título da tela ---------- */
.titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.titulo h1 { font-size: var(--fs-title); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.titulo .sub { margin-top: 6px; color: var(--muted); max-width: 72ch; }
.titulo .sub strong { color: var(--text); font-weight: 600; }
.titulo .acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.titulo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seletor-mes { display: inline-flex; align-items: center; gap: 2px; }
.seletor-mes .rotulo-mes { min-width: 7.5em; text-align: center; font-weight: 500; }

/* ---------- grade e painéis ---------- */
.grade { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.lado-direito { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.grade .largo { grid-column: 1 / -1; }
.coluna { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.painel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--card-pad); min-width: 0;
}
.painel-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.painel-cabeca h2 { font-size: var(--fs-section); line-height: 1.3; font-weight: 500; }
.painel-cabeca .meta { color: var(--muted); font-size: var(--fs-small); }
.painel-cabeca .lado { display: flex; align-items: center; gap: 12px; }
.painel h3 { font-size: var(--fs-body); font-weight: 600; margin: 20px 0 6px; }
.painel h3:first-child { margin-top: 0; }
.nota { color: var(--muted); font-size: var(--fs-small); margin-top: 12px; }
.nota strong { color: var(--text); font-weight: 600; }
.link-cartao {
  display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--text);
  font-weight: 500; font-size: var(--fs-small); cursor: pointer; text-underline-offset: 3px;
}
.link-cartao:hover { text-decoration: underline; }
.link-cartao svg { width: 14px; height: 14px; }

/* painel com a coluna de resumo fixa à esquerda */
.com-resumo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.resumo { position: sticky; top: 24px; display: grid; gap: var(--gap); }
/* dois cartões lado a lado que fecham na mesma altura: o total vai para o pé */
.grade > .esticar { align-self: stretch; display: flex; flex-direction: column; }
.grade > .esticar > .pe { margin-top: auto; }

/* ---------- listas ---------- */
.linhas { display: grid; }
.linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  min-height: var(--row-height); padding: 10px 0; border-top: 1px solid var(--rule);
}
.linha:first-child { border-top: 0; }
.linha.com-marca { grid-template-columns: auto minmax(0, 1fr) auto; }
.linha.com-acao { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.linha .nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .detalhe { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); }
.linha .detalhe > span { white-space: nowrap; }
.linha .valor { text-align: right; font-weight: 500; white-space: nowrap; }
.linha .valor .sub-valor { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.linha.clicavel { cursor: pointer; border-radius: 0; }
.linha.clicavel:hover .nome { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }
.linha.pago .nome { color: var(--muted); }
.linha.total { border-top: 1px solid var(--border); font-weight: 600; min-height: 52px; }
.linha.total .valor { font-weight: 600; }
.grupo-titulo { margin: 18px 0 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 500; display: flex; justify-content: space-between; }
.grupo-titulo:first-child { margin-top: 0; }

/* árvore do resumo: grupos em tinta, folhas em cinza, valores à direita num só alinhamento */
.arvore { display: grid; margin-top: 18px; }
.arvore .no { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-small); }
.arvore .no.grupo { font-size: var(--fs-body); font-weight: 600; padding-top: 14px; }
.arvore .no.ramo { color: var(--muted); padding-left: 10px; }
.arvore .no.ramo2 { color: var(--muted); padding-left: 22px; }
.arvore .no span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.arvore .no.destaque { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 12px; font-weight: 600; font-size: var(--fs-body); }

/* números de destaque */
.figura { font-size: var(--fs-kpi); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.figura .centavos { font-size: 0.6em; font-weight: 500; color: var(--muted); }
.figura-media { font-size: 24px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.rotulo { color: var(--muted); font-size: var(--fs-small); }

/* ---------- marcas de identidade ---------- */
.t1 { --bg: var(--t1-bg); --ink: var(--t1-ink); }
.t2 { --bg: var(--t2-bg); --ink: var(--t2-ink); }
.t3 { --bg: var(--t3-bg); --ink: var(--t3-ink); }
.t4 { --bg: var(--t4-bg); --ink: var(--t4-ink); }
.t5 { --bg: var(--t5-bg); --ink: var(--t5-ink); }
.t6 { --bg: var(--t6-bg); --ink: var(--t6-ink); }
.t7 { --bg: var(--t7-bg); --ink: var(--t7-ink); }
/* cartão em miniatura na proporção de um cartão de verdade (85,6 x 54 mm) */
.mini-cartao {
  flex: none; display: grid; place-items: end start; width: 38px; height: 24px; padding: 3px 4px; border-radius: var(--radius-chip);
  background: var(--bg, var(--t7-bg)); color: var(--ink, var(--t7-ink)); font-size: 9px; font-weight: 600; line-height: 1;
}
.mini-cartao::before { content: ""; width: 7px; height: 5px; border-radius: 1.5px; background: currentColor; opacity: 0.35; align-self: start; }
.mini-cartao { grid-template-rows: 1fr; }
.avatar {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg, var(--t7-bg)); color: var(--ink, var(--t7-ink)); font-size: 11px; font-weight: 600;
}
.avatar.grande { width: 32px; height: 32px; font-size: 14px; }
.pessoa { display: inline-flex; align-items: center; gap: 6px; }
.ficha {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; white-space: nowrap; flex: none;
  background: var(--bg, var(--pill-neutral-bg)); color: var(--ink, var(--pill-neutral-ink)); font-size: var(--fs-tiny); font-weight: 600;
}
.dia {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--well);
  font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.dia small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.dia.vencido { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.dia.vencido small { color: inherit; }

/* pílulas de situação: tom claro com tinta escura do mesmo tom */
.pilula {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; flex: none;
  font-size: var(--fs-tiny); font-weight: 600; white-space: nowrap; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
}
.pilula svg { width: 13px; height: 13px; }
.pilula.pos { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pilula.neg { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pilula.alerta { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.pilula.azul { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 16px;
  border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: var(--fs-small); cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease, transform 120ms var(--ease), border-color 150ms ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--well); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.primario { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primario:hover { background: color-mix(in srgb, var(--primary) 88%, var(--surface)); }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--active); }
.btn.perigo { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 35%, var(--control)); }
.btn.pequeno { height: 32px; padding: 0 12px; }
.btn.largo { width: 100%; height: 46px; font-size: var(--fs-body); }
.btn-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--muted); cursor: pointer; transition: background-color 150ms ease, color 150ms ease;
}
.btn-icone svg { width: 20px; height: 20px; }
.btn-icone:hover { background: var(--active); color: var(--text); }
.btn-icone.pequeno { width: 32px; height: 32px; }
/* o círculo de pagar: vazio em aberto, cheio quando pago */
.marcar {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--control); background: var(--surface); color: transparent; cursor: pointer; padding: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--ease);
}
.marcar svg { width: 16px; height: 16px; }
.marcar:hover { border-color: var(--positive); color: var(--positive); }
.marcar:active { transform: scale(0.92); }
.marcar[aria-pressed="true"] { background: var(--positive); border-color: var(--positive); color: #fff; }
.marcar:disabled { cursor: default; opacity: 0.5; }

.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo > label, .campo > .rotulo-campo { font-size: var(--fs-small); font-weight: 500; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.input, .select, textarea.input {
  width: 100%; height: var(--control-height); padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); min-width: 0;
}
textarea.input { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.input::placeholder { color: var(--faint); }
.input.arquivo { padding: 7px 10px; height: auto; }
.input.dinheiro { font-variant-numeric: tabular-nums; }
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dica { color: var(--muted); font-size: var(--fs-small); }
.erro-campo { color: var(--negative); font-size: var(--fs-small); }
.prefixado { position: relative; }
.prefixado > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.prefixado > .input { padding-left: 40px; }
.segmentado { display: inline-flex; width: max-content; max-width: 100%; padding: 3px; gap: 2px; border-radius: 12px; background: var(--active); }
.segmentado button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-weight: 600; font-size: var(--fs-small); cursor: pointer; white-space: nowrap;
}
.segmentado button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.interruptor input {
  appearance: none; flex: none; width: 32px; height: 20px; border-radius: 999px; background: var(--control); position: relative; cursor: pointer; margin: 0;
  transition: background-color 200ms ease;
}
.interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease); }
.interruptor input:checked { background: var(--positive); }
.interruptor input:checked::after { transform: translateX(12px); }
.tintas { display: flex; gap: 8px; flex-wrap: wrap; }
.tintas label { cursor: pointer; }
.tintas input { position: absolute; opacity: 0; }
.tintas span { display: block; width: 32px; height: 32px; border-radius: 10px; background: var(--bg); border: 2px solid transparent; }
.tintas input:checked + span { border-color: var(--ink); }
.tintas input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.busca { position: relative; }
.busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); }
.busca .input { padding-left: 36px; width: 240px; }
.filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }

/* ---------- janela (modal) e avisos ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(15, 16, 17, 0.45); }
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra-flutuante);
}
.modal.estreito { width: min(440px, 100%); }
.modal-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.modal-cabeca h2 { font-size: var(--fs-section); font-weight: 600; }
.modal-corpo { padding: 20px 24px; display: grid; gap: 16px; }
.modal-rodape { display: flex; align-items: center; gap: 10px; padding: 0 24px 24px; }
.modal-rodape .espaco { flex: 1; }
.vinculo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-inner); background: var(--well); font-size: var(--fs-small); color: var(--muted); }
.avisos-flutuantes { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.aviso-flutuante {
  padding: 12px 18px; border-radius: 12px; background: var(--primary); color: var(--primary-ink); font-weight: 500;
  box-shadow: var(--sombra-flutuante); animation: subir 200ms var(--ease);
}
.aviso-flutuante.erro { background: var(--negative); color: #fff; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }
.aviso { padding: 12px 14px; border-radius: var(--radius-inner); font-size: var(--fs-small); }
.aviso-erro { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.aviso-ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.aviso-info { background: var(--well); color: var(--muted); }
.aviso pre { margin: 0; white-space: pre-wrap; font: inherit; }
.vazio {
  display: grid; place-items: center; min-height: 64px; padding: 16px; border: 1px dashed var(--control); border-radius: var(--radius-inner);
  color: var(--muted); text-align: center; font-size: var(--fs-small);
}
.erro-bloco { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius-inner); background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.carregando-bloco { height: 18px; border-radius: 6px; background: var(--well); }

/* ---------- gráficos ---------- */
.grafico { position: relative; min-width: 0; }
.grafico svg { overflow: visible; }
.grafico .barra-hit { cursor: default; }
.dica-grafico {
  position: absolute; z-index: 3; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sombra-flutuante); font-size: var(--fs-tiny); line-height: 1.4; white-space: nowrap;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 100ms ease;
}
.dica-grafico strong { display: block; font-size: var(--fs-small); }
.legenda { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-small); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-1); }
.legenda i.neg { background: var(--chart-neg); }
.legenda i.prev { background: var(--chart-1); opacity: 0.35; }

/* trilha do plano: o pagamento é o comprimento; pago cheio, a pagar mais claro, o que estoura em vermelho */
.trilha { position: relative; height: 10px; border-radius: 999px; background: var(--rule); }
.trilha .pago, .trilha .aberto { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--chart-1); }
.trilha .aberto { opacity: 0.35; border-radius: 0 999px 999px 0; }
.trilha .estouro { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: var(--chart-neg); }
.trilha .limite { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.trilha-rotulos { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.progresso { height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.progresso span { display: block; height: 100%; border-radius: 999px; background: var(--chart-1); }
/* lista ordenada: barra fina em cinza, a primeira em tinta */
.ranking { display: grid; gap: 12px; }
.ranking-topo { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); }
.ranking-topo .valor { font-weight: 500; }
.ranking-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-barra { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--chart-muted); min-width: 2px; }
.ranking li:first-child .ranking-barra { background: var(--text); }

/* ---------- painel: os dois pagamentos ---------- */
.faixas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.faixa { padding: 4px 24px 4px 0; min-width: 0; }
.faixa + .faixa { padding: 4px 0 4px 24px; border-left: 1px solid var(--rule); }
.faixa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.faixa-topo h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.faixa .entra { margin: 4px 0 14px; color: var(--muted); font-size: var(--fs-small); }
.faixa .sobra { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.faixa .maiores { margin-top: 12px; display: grid; gap: 4px; font-size: var(--fs-small); color: var(--muted); }
.faixa .maiores div { display: flex; justify-content: space-between; gap: 12px; }
.faixa .maiores span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- cartões ---------- */
.cartoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
.cartao-grande {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.586; min-height: 160px;
  padding: 20px 22px; border-radius: var(--radius-card); background: var(--bg); color: var(--ink); cursor: pointer;
  transition: transform 160ms var(--ease);
}
.cartao-grande:hover { transform: translateY(-2px); }
.cartao-grande .topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cartao-grande .nome-cartao { font-weight: 600; font-size: 18px; }
.cartao-grande .figura { color: inherit; }
.cartao-grande .figura .centavos { color: inherit; opacity: 0.7; }
.cartao-grande .rodape-cartao { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); opacity: 0.9; }
.cartao-grande .pilula { background: color-mix(in srgb, var(--surface) 70%, transparent); color: inherit; }
.cartao-grande.inativo { opacity: 0.55; }

/* ---------- metas ---------- */
.meta-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.meta-cabeca h2 { font-size: var(--fs-section); font-weight: 500; flex: 1; min-width: 0; }
.selo { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--ink); display: grid; place-items: center; }
.selo svg { width: 20px; height: 20px; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tabela th { height: 40px; padding: 0 12px; text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th:first-child, .tabela td:first-child { padding-left: 0; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela tr.previsto td { color: var(--muted); }
.tabela tfoot td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; }
.tabela .identidade { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tabela .identidade .nome { font-weight: 500; font-size: var(--fs-body); }
.tabela .identidade .detalhe { color: var(--muted); }
.tabela tr.clicavel { cursor: pointer; }
.tabela td.linha2 { display: none; }
.tabela .nome { font-weight: 500; font-size: var(--fs-body); }
.tabela .detalhe { color: var(--muted); }
.tabela tr.clicavel:hover .nome { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }

/* ---------- configurações ---------- */
.config { display: grid; gap: 0; max-width: 1152px; }
.config-secao { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--border); }
.config-secao:first-child { border-top: 0; padding-top: 8px; }
.config-secao > div:first-child h2 { font-size: var(--fs-body); font-weight: 600; margin-top: 6px; }
.config-secao > div:first-child p { color: var(--muted); font-size: var(--fs-small); margin-top: 6px; }
.config-painel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: grid; gap: 16px; min-width: 0; }
.config-painel .rodape { display: flex; justify-content: flex-end; gap: 10px; }

/* diagnóstico */
.achados { display: grid; gap: 14px; counter-reset: achado; }
.achado { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.achado .selo { width: 40px; height: 40px; }
.achado h3 { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; }
.achado p { color: var(--muted); font-size: var(--fs-small); }
.achado p strong { color: var(--text); font-weight: 600; }

/* ---------- telas de acesso (entrar, instalar) ---------- */
body.acesso { display: grid; place-items: start center; padding: 56px 16px; min-height: 100vh; }
.acesso-folha { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 18px; }
body.larga .acesso-folha { width: min(640px, 100%); }
.acesso-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; }
.acesso h1 { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.acesso-sub { color: var(--muted); }
.acesso .grupo { display: grid; gap: 14px; padding: 18px 0 4px; border-top: 1px solid var(--rule); }
.acesso .grupo legend { font-weight: 600; font-size: var(--fs-body); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.relatorio { display: grid; gap: 12px; }
.relatorio h2 { font-size: var(--fs-section); font-weight: 600; }
.relatorio h3 { font-size: var(--fs-body); font-weight: 600; }
.lista-avisos { display: grid; gap: 8px; padding-left: 18px; list-style: disc; color: var(--muted); font-size: var(--fs-small); }

/* ---------- larguras intermediárias ---------- */
@media (max-width: 1240px) {
  .com-resumo { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .grade.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .grade, .grade.tres, .grade.lado-direito { grid-template-columns: minmax(0, 1fr); }
  .config-secao { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- celular: o trilho vira barra inferior ---------- */
@media (max-width: 860px) {
  :root { --pad: 16px; --card-pad: 18px; --gap: 16px; --fs-title: 24px; --fs-kpi: 30px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .trilho { display: none; }
  .tela { padding: 20px var(--pad) calc(96px + env(safe-area-inset-bottom)); }
  .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border);
  }
  .barra a, .barra button {
    display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 0 2px; border: 0; background: none;
    color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 12px;
  }
  .barra svg { width: 22px; height: 22px; }
  .barra [aria-current="page"] { color: var(--accent-ink); }
  .barra [aria-current="page"] svg { color: var(--accent); }
  .titulo .acoes { width: 100%; }
  .titulo .acoes .btn.primario { flex: 1; }
  .arvore .no.ramo2 { display: none; }
  .faixas { grid-template-columns: minmax(0, 1fr); }
  .faixa { padding: 0 0 20px; }
  .faixa + .faixa { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .busca .input { width: 100%; }
  .busca { flex: 1; }
  .campos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-fundo { place-items: end center; padding: 0; }
  .modal { width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; }
  .modal-rodape { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .tabela.lista-celular thead { display: none; }
  .tabela.lista-celular tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .tabela.lista-celular td { padding: 0; border: 0; }
  .tabela.lista-celular td.so-desktop { display: none; }
  .tabela.lista-celular td.linha2 { display: block; grid-column: 1 / -1; color: var(--muted); margin-top: 4px; }
  .avisos-flutuantes { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .segmentado { display: flex; width: 100%; }
  .segmentado button { flex: 1; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* nome com marca na frente (cartão em miniatura): o texto encurta com reticências, sem invadir o valor */
.nome.com-marca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nome.com-marca > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }