/* Meu Caixa: preto AMOLED, blocos por preenchimento (sem bordas), número grande como herói,
   cápsulas para ações, navegação flutuante. Escuro é o padrão; claro só se escolhido. */
:root {
  --bg: #000000;
  --surface: #0f0f11;
  --surface2: #1a1a1e;
  --surface3: #26262b;
  --line: rgba(255, 255, 255, 0.07);
  --fg: #f4f4f6;
  --muted: #8d8d96;
  --faint: #6e6e78;
  --accent: #7b6cff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(123, 108, 255, 0.16);
  /* Fundo de botão cheio: um tom mais fundo, para o texto branco ter contraste 4,9:1. */
  --accent-fill: #6a59f2;
  /* Violeta para TEXTO (links, Ver todos, resumos de detalhes): mais claro, para ler bem sobre os cartões. */
  --accent-text: #a89fff;
  --ganho: #3ddc97;
  --gasto: #ff6b81;
  --alerta: #ffb84d;
  --nav-bg: rgba(20, 20, 23, 0.82);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.55);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  /* Papéis de cor: verde = dinheiro entrando, rosa = saindo/estourou, âmbar = atenção,
     violeta = o que se toca. Barras sem alerta ficam neutras. */
  --neutro: color-mix(in srgb, var(--fg) 62%, transparent);
  --fixo: var(--fg); --variavel: var(--faint);
  /* Toque com mola: afunda rápido e volta com um leve repique. A janela sobe com a curva do iOS. */
  --afunda: 0.08s cubic-bezier(0.3, 0, 0.5, 1);
  --solta: 0.42s cubic-bezier(0.34, 1.45, 0.64, 1);
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --surface: #f3f3f6; --surface2: #e8e8ee; --surface3: #dcdce4; --line: rgba(0, 0, 0, 0.07);
    --fg: #0b0b0f; --muted: #66666f; --faint: #9a9aa3; --accent: #5b49f0; --accent-fill: #5b49f0; --accent-text: #4a38e0; --accent-ink: #ffffff; --accent-soft: rgba(91, 73, 240, 0.12);
    --ganho: #0f8a58; --gasto: #d93a55; --alerta: #b86e00; --nav-bg: rgba(250, 250, 252, 0.86); --sombra: 0 10px 30px rgba(0, 0, 0, 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff; --surface: #f3f3f6; --surface2: #e8e8ee; --surface3: #dcdce4; --line: rgba(0, 0, 0, 0.07);
  --fg: #0b0b0f; --muted: #66666f; --faint: #9a9aa3; --accent: #5b49f0; --accent-fill: #5b49f0; --accent-text: #4a38e0; --accent-ink: #ffffff; --accent-soft: rgba(91, 73, 240, 0.12);
  --ganho: #0f8a58; --gasto: #d93a55; --alerta: #b86e00; --nav-bg: rgba(250, 250, 252, 0.86); --sombra: 0 10px 30px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.45; margin: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
body.lock { overflow: hidden; }
button, label, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--ganho); } .neg { color: var(--gasto); }
.hint { color: var(--muted); font-size: 13.5px; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.app { max-width: 720px; margin: 0 auto; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 22px; }
.tela { display: flex; flex-direction: column; gap: 22px; }

/* ---------- topo ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
.topbar-dir { display: flex; gap: 8px; align-items: center; min-width: 0; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--surface2); color: var(--fg); display: grid; place-items: center; font-size: 20px; }
.icon-btn svg { width: 20px; height: 20px; }
.perfil-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 16px; border-radius: 999px; border: 0; background: var(--surface2); font-weight: 600; font-size: 14px; max-width: 46vw; }
.perfil-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-btn svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.titulo { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* seletor de mês compacto */
.mes { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--surface); border-radius: 999px; padding: 4px; }
.mes .icon-btn { background: transparent; color: var(--muted); }
.mes-nome { font-family: var(--display); font-weight: 600; font-size: 16px; text-align: center; flex: 1; letter-spacing: -0.01em; }

/* ---------- herói do Início ---------- */
.heroi { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.ola { color: var(--muted); font-size: 15px; }
.eyebrow { font-size: 14px; color: var(--muted); font-weight: 500; }
.big { font-family: var(--display); font-weight: 600; font-size: clamp(46px, 14.5vw, 68px); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.big .cent { font-size: 0.5em; letter-spacing: -0.02em; opacity: 0.75; }
.fluxo-linha { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.fluxo-linha b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.fluxo-linha .seta-in { color: var(--ganho); } .fluxo-linha .seta-out { color: var(--gasto); }
.insight { margin-top: 10px; align-self: flex-start; background: var(--surface); border-radius: var(--r-md); padding: 10px 14px; font-size: 14.5px; color: var(--fg); max-width: 46ch; }
.insight b { font-weight: 600; }

/* ---------- blocos ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 18px; min-width: 0; }
.card.hero { display: flex; flex-direction: column; gap: 4px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-head h3, .sec h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.ver { border: 0; background: transparent; color: var(--accent-text); font-weight: 600; font-size: 14px; padding: 10px 0; min-height: 44px; white-space: nowrap; }
.sec { display: flex; flex-direction: column; gap: 10px; }
.duo { display: grid; gap: 22px; }

/* Indicadores: duas colunas quando cabem, uma só em telas estreitas (o valor nunca quebra). */
.kpi, .stat { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; text-align: left; border: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; color: var(--fg); }
.card .kpi, .card .stat { background: var(--surface2); }
.kpi span, .stat span { font-size: 13px; color: var(--muted); }
.kpi b, .stat b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 5.4vw, 21px); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12.5px; color: var(--muted); }
.kpi small .up { color: var(--gasto); } .kpi small .down { color: var(--ganho); }
button.kpi { cursor: pointer; }

/* barras e medidores */
.split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface3); gap: 2px; }
.split i { display: block; height: 100%; border-radius: 99px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.legend b { color: var(--fg); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.meter { height: 6px; border-radius: 99px; background: var(--surface3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--neutro); }
.meter i.warn { background: var(--alerta); } .meter i.over { background: var(--gasto); } .meter i.ok { background: var(--neutro); }
.cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.cat .meter { grid-column: 1 / -1; }
.cat span { overflow-wrap: anywhere; font-weight: 500; }
.cat b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* gasto por recebimento */
.per { display: flex; flex-direction: column; gap: 10px; }
.per-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.per-top strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.per-top span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.per-bot { display: flex; justify-content: space-between; gap: 6px 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.per-bot b { color: var(--fg); font-weight: 600; }
.badge, .pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface3); color: var(--muted); white-space: nowrap; }
.badge { color: var(--fg); }
.pill { margin-left: 6px; }
.pill svg { width: 12px; height: 12px; margin: -2px 4px 0 -1px; vertical-align: middle; }
.pill.ok { background: var(--surface3); color: var(--fg); }
.pill.alerta { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.pill.ruim { background: color-mix(in srgb, var(--gasto) 15%, transparent); color: var(--gasto); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface3); color: var(--muted); margin-left: 6px; }

/* ---------- botões (toque físico inspirado em cssbuttons-io / uiverse.io, MIT) ---------- */
.btn { border: 0; background: var(--surface2); color: var(--fg); border-radius: 999px; padding: 0 20px; min-height: 48px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn.primary:active { filter: brightness(0.92); }
.btn:disabled { opacity: 0.55; }
.btn.danger { color: var(--gasto); background: color-mix(in srgb, var(--gasto) 12%, transparent); }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }
.btn svg { width: 18px; height: 18px; }
.link { border: 0; background: transparent; color: var(--accent-text); font-weight: 600; padding: 10px 0; min-height: 44px; text-align: left; }

/* filtros em cápsula, rolam para o lado */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 0; background: var(--surface); color: var(--fg); border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); font-weight: 600; }

/* ---------- listas ---------- */
.dia { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 14px; padding-left: 4px; }
.lista { display: flex; flex-direction: column; gap: 2px; }
.linha, .item { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; background: transparent; border: 0; border-radius: var(--r-md); padding: 10px 4px; color: var(--fg); min-height: 60px; }
.linha.com-ico, .item.com-ico { grid-template-columns: 42px minmax(0, 1fr) auto; }
.linha:hover { background: var(--surface); }
.linha:active { background: var(--surface2); }
.linha strong, .item strong { font-weight: 600; overflow-wrap: anywhere; }
.linha small, .item small { color: var(--muted); font-size: 13px; }
.linha .val, .item .val { grid-row: 1 / span 2; grid-column: -2; font-family: var(--display); font-weight: 600; font-size: 16.5px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.com-ico strong, .com-ico small { grid-column: 2; }
.ico { grid-row: 1 / span 2; grid-column: 1; width: 42px; height: 42px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--fg); }
.card .ico { background: var(--surface3); }
/* Ícone de categoria/cartão: círculo no tom do ícone, bem apagado; o traço leva a cor. */
.ico svg { width: 20px; height: 20px; }
.ico.tinta, .card .ico.tinta { background: color-mix(in srgb, var(--cor) 14%, var(--surface2)); color: var(--cor); }
.ico-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; color: var(--cor); font-style: normal; }
.ico-mini svg { width: 17px; height: 17px; }
.card .item { padding-inline: 0; min-height: 56px; }

/* ---------- metas, contas, cartões ---------- */
.meta { display: flex; flex-direction: column; gap: 12px; }
.meta-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.meta-head h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.meta-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.conta-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.conta-linha .nome { border: 0; background: transparent; padding: 0; text-align: left; min-height: 44px; display: flex; flex-direction: column; justify-content: center; color: var(--fg); }
.conta-linha .nome strong { font-weight: 600; overflow-wrap: anywhere; }
.conta-linha .nome small { color: var(--muted); font-size: 13px; }
.conta-linha .dir { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.conta-linha .dir b { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cartao-topo h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent-text); font-weight: 600; font-size: 14px; }

.vazio { text-align: center; padding: 30px 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.vazio h3 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.vazio p { color: var(--muted); max-width: 38ch; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes .primary { flex: 1; }
.aviso { background: color-mix(in srgb, var(--alerta) 13%, transparent); color: var(--fg); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; }
.carregando { text-align: center; color: var(--muted); padding: 60px 0; }

/* menu "Mais" */
.menu-mais { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-radius: var(--r-lg); padding: 6px; }
.menu-mais button { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; background: transparent; border: 0; border-radius: var(--r-md); padding: 10px 10px; min-height: 64px; color: var(--fg); }
.menu-mais button:active { background: var(--surface2); }
.menu-mais button > svg, .menu-mais .bola { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--surface2); color: var(--fg); display: grid; place-items: center; }
.menu-mais strong { display: block; font-weight: 600; }
.menu-mais small { display: block; color: var(--muted); font-size: 13px; }
.menu-mais .seta, .aviso-item .seta, .seta-mini { color: var(--muted); display: grid; place-items: center; }
.seta svg, .seta-mini svg { width: 18px; height: 18px; }

/* ---------- barra de lançamento rápido ---------- */
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; background: var(--surface); border-radius: 999px; padding: 6px 6px 6px 20px; align-items: center; }
.barra:has(.mic) { grid-template-columns: minmax(0, 1fr) auto auto; }
.barra:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.barra input { border: 0; background: transparent; font-size: 16px; min-height: 44px; min-width: 0; outline: none; }
.barra input::placeholder { color: var(--muted); }
.enviar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-fill); color: var(--accent-ink); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.enviar svg { width: 20px; height: 20px; }
.experimente { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.experimente::-webkit-scrollbar { display: none; }
.experimente .chip { min-height: 36px; padding: 0 14px; font-size: 13px; color: var(--muted); }
.mic { background: transparent; color: var(--muted); }

/* boas-vindas */
.boas { display: flex; flex-direction: column; gap: 12px; }
.boas-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.boas-head h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.passos { display: grid; gap: 8px; }
.passo { background: var(--surface2); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; color: var(--muted); }
.passo b { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: 14.5px; margin-bottom: 3px; font-weight: 600; }
.passo b i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 12px; flex: none; }
.passo em { font-style: normal; color: var(--fg); font-weight: 600; }

/* ---------- gráfico ---------- */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .eixo { fill: var(--muted); font-size: 11px; font-family: var(--body); }
.grafico .grade { stroke: var(--line); stroke-width: 1; }
.grafico .hit { fill: transparent; cursor: pointer; }
.grafico .hit:hover, .grafico .hit.on { fill: color-mix(in srgb, var(--fg) 6%, transparent); }
.dica { position: absolute; z-index: 5; pointer-events: none; background: var(--fg); color: var(--bg); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12.5px; line-height: 1.45; min-width: 150px; box-shadow: var(--sombra); }
.dica .l { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- navegação flutuante ---------- */
.nav { position: fixed; z-index: 20; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; background: var(--nav-bg); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); border-radius: 30px; padding: 6px; box-shadow: var(--sombra); }
.nav-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: center; }
.nav button { position: relative; border: 0; background: transparent; border-radius: 24px; padding: 6px 2px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; min-width: 0; }
.nav button svg { width: 22px; height: 22px; }
.nav button[aria-current="page"] { color: var(--fg); background: var(--surface2); }
.nav .mais { width: 54px; height: 54px; min-height: 0; padding: 0; margin: 0 auto; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.5); }
.nav .mais svg { width: 26px; height: 26px; }
/* Número de avisos: texto escuro no rosa (o branco ficava ilegível). */
.qtd { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gasto); color: #1a0006; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.nav .qtd { position: absolute; top: 2px; left: calc(50% + 6px); }

/* ---------- folha que sobe de baixo ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.72); display: flex; align-items: flex-end; justify-content: center; }
.sheet-panel { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overscroll-behavior: contain; overflow-y: auto; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.sheet-panel::before { content: ""; width: 38px; height: 5px; border-radius: 99px; background: var(--surface3); align-self: center; flex: none; }
@media (min-width: 760px) { .sheet { align-items: center; } .sheet-panel { border-radius: var(--r-xl); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-head h2 { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .lbl { font-size: 13px; color: var(--muted); font-weight: 600; }
.in { width: 100%; min-width: 0; font-size: 16px; min-height: 50px; background: var(--surface2); border: 0; border-radius: var(--r-md); padding: 12px 14px; color: var(--fg); }
.in:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.in::placeholder { color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface2); border-radius: 999px; padding: 4px; gap: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 10px 6px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg input:checked + label { background: var(--fg); color: var(--bg); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rapido { background: var(--surface2); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.rapido .in { background: var(--surface3); }
.rapido .mic { background: var(--surface3); }
.rapido-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rapido .enviar { width: 50px; height: 50px; }
.rapido-row:has(.mic) { grid-template-columns: minmax(0, 1fr) auto auto; }
.foto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foto-row .btn { background: var(--surface3); }
.status { font-size: 13.5px; color: var(--muted); }
.status:empty { display: none; }
.status.erro { color: var(--gasto); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cats .chip { background: var(--surface2); }
.cats .chip button { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 15px; line-height: 1; min-width: 24px; min-height: 24px; }
.conta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.conta span { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }

.toast { position: fixed; z-index: 60; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; max-width: calc(100% - 32px); box-shadow: var(--sombra); }

.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 0 24px; }
.login .card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.login h1 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; }

@media (prefers-reduced-motion: no-preference) {
  /* Sobe de baixo com a curva do iOS; o fundo escurece junto. Ao fechar, desce de onde estiver. */
  .sheet { animation: escurece 0.3s ease-out; }
  .sheet-panel { animation: sobe 0.46s var(--mola); transition: transform 0.4s var(--mola); }
  .sheet-panel.arrastando { transition: none; }
  .sheet.saindo { animation: clareia 0.22s ease-in forwards; }
  .sheet.saindo .sheet-panel { animation: desce 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
  @keyframes sobe { from { transform: translateY(100%); } }
  @keyframes desce { to { transform: translateY(100%); } }
  @keyframes escurece { from { background-color: transparent; } }
  @keyframes clareia { to { background-color: transparent; } }
  @media (min-width: 760px) {
    @keyframes sobe { from { transform: translateY(24px) scale(0.97); opacity: 0; } }
    @keyframes desce { to { transform: translateY(16px) scale(0.98); opacity: 0; } }
  }
}

/* ---------- computador: menu lateral ---------- */
.lateral { display: none; }
@media (min-width: 960px) {
  body { padding-left: 0; padding-right: 0; }
  .nav { display: none; }
  .lateral { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; left: 0; width: 248px; padding: 22px 14px; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto; z-index: 10; }
  .lateral .brand { padding: 0 10px 16px; }
  .lateral .grupo { font-size: 12px; color: var(--faint); font-weight: 600; padding: 16px 12px 6px; }
  .lateral button.ir { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; border-radius: 999px; padding: 0 14px; min-height: 44px; font-weight: 600; color: var(--muted); text-align: left; }
  .lateral button.ir svg { width: 20px; height: 20px; flex: none; }
  .lateral button.ir .qtd { margin-left: auto; }
  .lateral button.ir:hover { background: var(--surface); color: var(--fg); }
  .lateral button.ir[aria-current="page"] { background: var(--surface2); color: var(--fg); }
  .lateral .novo { margin: 0 0 10px; }
  .lateral .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
  .app { margin-left: 248px; max-width: 1040px; padding: 26px 36px 60px; }
  .topbar .brand { visibility: hidden; }
  .duo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .kpis.quatro { grid-template-columns: repeat(4, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .toast { bottom: 32px; }
}

/* ---------- avisos (fatura fechando/vencendo, conta perto de vencer) ---------- */
.avisos { display: flex; flex-direction: column; gap: 8px; }
.aviso-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: var(--r-md); padding: 10px 12px; min-height: 60px; background: color-mix(in srgb, var(--alerta) 12%, var(--surface)); color: var(--fg); }
.aviso-item.ruim { background: color-mix(in srgb, var(--gasto) 13%, var(--surface)); }
.aviso-item .sino { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--alerta) 22%, transparent); color: var(--alerta); }
.aviso-item.ruim .sino { background: color-mix(in srgb, var(--gasto) 22%, transparent); color: var(--gasto); }
.aviso-item .sino svg { width: 20px; height: 20px; }
.aviso-item strong { display: block; font-weight: 600; }
.aviso-item small { display: block; color: var(--muted); font-size: 13px; }

/* abas internas (Próximos dias / Contas fixas) */
.seg button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; min-height: 44px; font-weight: 600; font-size: 14px; }
.seg button[aria-selected="true"] { background: var(--fg); color: var(--bg); }

/* escolha da forma de pagamento: tudo visível, quebra linha */
.chips.formas { flex-wrap: wrap; overflow: visible; }
.sheet .chips .chip { background: var(--surface2); }
.sheet .chips .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* chave liga/desliga (Repetir todo mês) */
.troca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface2); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; min-height: 60px; }
.troca strong { display: block; font-weight: 600; }
.troca small { display: block; color: var(--muted); font-size: 12.5px; }
.troca input { position: absolute; opacity: 0; pointer-events: none; }
.troca i { width: 52px; height: 32px; border-radius: 99px; background: var(--surface3); position: relative; transition: background 0.18s; flex: none; }
.troca i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform var(--solta); }
.troca input:checked + i { background: var(--accent); }
.troca input:checked + i::after { transform: translateX(20px); }
.troca input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

.stat small { font-size: 12.5px; }
button.item { cursor: pointer; }
button.item:active { background: var(--surface2); }

/* ---------- revisão para celular ---------- */
/* Salvar sempre à vista no pé da janela, mesmo com formulário comprido ou teclado aberto. */
.sheet-panel > .acoes { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); margin: 0 -2px calc(-22px - env(safe-area-inset-bottom, 0px)); padding: 12px 2px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--surface) 14px); z-index: 2; }
/* Alvos de toque de pelo menos 44 px. */
.experimente .chip { min-height: 44px; }
.cats .chip button { min-width: 36px; min-height: 36px; margin-right: -10px; display: inline-grid; place-items: center; }
.cats .chip button svg { width: 15px; height: 15px; }
.cats .chip .cat-editar { display: inline-flex; align-items: center; }
.seg label { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.mes .icon-btn { width: 48px; height: 48px; }
/* ---------- rodada 4: topo compacto, lápis do Início, emojis, cartões ---------- */
.topo-esq { min-width: 0; display: flex; align-items: center; }
.topo-esq .mes { display: inline-flex; align-items: center; gap: 0; background: var(--surface2); border-radius: 999px; padding: 0; height: 44px; }
.seta-mes { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; border-radius: 50%; }
.seta-mes svg { width: 18px; height: 18px; }
.seta-mes:active { background: var(--surface3); }
.topo-esq .mes-nome { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; min-width: 62px; text-align: center; flex: none; }
.ola-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lapis { background: transparent; color: var(--muted); }
.lapis svg { width: 19px; height: 19px; }

.inicio-blocos { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 960px) {
  .inicio-blocos { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .bloco-avisos, .bloco-recebimento { grid-column: 1 / -1; }
}

/* lista para arrumar o Início */
.ordem { display: flex; flex-direction: column; gap: 6px; }
.ordem-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px 44px; gap: 8px; align-items: center; background: var(--surface2); border-radius: var(--r-md); padding: 6px 8px 6px 12px; }
.ordem-item span { font-weight: 600; }
.ordem-item.oculto span { color: var(--faint); }
.ordem-item .icon-btn { background: var(--surface3); }
.ordem-item .icon-btn[disabled] { opacity: 0.3; }
.troca.mini { background: transparent; padding: 0; min-height: 44px; grid-template-columns: auto; }

/* escolher ícone e cor */
.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.emoji-op { height: 46px; border: 0; border-radius: var(--r-sm); background: var(--surface2); color: var(--cor, var(--fg)); display: grid; place-items: center; }
.emoji-op svg { width: 21px; height: 21px; }
.emoji-op[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); background: color-mix(in srgb, var(--cor, var(--fg)) 16%, var(--surface2)); }
.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cor-op { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cor); }
.cor-op[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--fg); }
.cats .cat-editar { border: 0; background: transparent; color: var(--fg); font: inherit; padding: 0; min-height: 44px; }

/* cartões */
.nome-cartao { color: color-mix(in srgb, var(--cor, var(--fg)) 80%, var(--fg)); font-weight: 600; }
.cartao .cartao-topo { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.ico.cartao-emoji { width: 44px; height: 44px; grid-row: auto; grid-column: auto; }
.cartao .cartao-topo h3 { font-size: 20px; }
.cartao .cartao-topo .icon-btn { background: transparent; color: var(--muted); }
.cartao .cartao-topo .icon-btn svg { width: 19px; height: 19px; }
.cartao-fatura { display: flex; flex-direction: column; gap: 4px; }
.valor-medio { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.035em; line-height: 1.05; }
.valor-medio .cent { font-size: 0.55em; opacity: 0.75; }
.cartao-datas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cartao-datas .pill { margin-left: 0; font-size: 12.5px; padding: 5px 11px; }
.cartao .meter i { background: var(--cor, var(--accent)); }
.cartao .meter i.warn { background: var(--alerta); } .cartao .meter i.over { background: var(--gasto); }
/* ---------- parcelas ---------- */
.tag.parcela { background: var(--surface3); color: var(--fg); font-variant-numeric: tabular-nums; }
.parcela-info { font-size: 13.5px; }
#l-parc-info { margin-top: 8px; color: var(--fg); font-weight: 600; }
.campo-cartao { display: flex; flex-direction: column; }
/* Itens da janela nunca encolhem (a janela rola); antes, a caixa da chave cortava o texto. */
.sheet-panel > * { flex-shrink: 0; }
/* ---------- quinzenas ---------- */
.quinzena { display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%; border: 0; color: var(--fg); }
.quinzena.agora { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 24%, transparent); }
.quinzena-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quinzena-cab h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.quinzena-cab .pill { margin-left: auto; }
.q-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-numeros div { background: var(--surface2); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.q-numeros span { display: block; font-size: 12.5px; color: var(--muted); }
.q-numeros b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-lista .item { padding-inline: 0; }
.quinzena-mini { cursor: pointer; }
.seta-mini { margin-left: auto; align-self: center; }
.dica-entradas { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }.q-resumo span { display: block; font-size: 13px; color: var(--muted); }
.q-resumo b { display: block; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.q-linha { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.q-linha b { color: var(--fg); font-weight: 600; }
/* ---------- lembretes ---------- */
.lembretes { display: flex; flex-direction: column; }
.card.lembretes { padding: 4px 16px; }
.lembrete { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 56px; position: relative; }
.lembrete + .lembrete::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--line); }
.check { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.check::before { content: ""; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--faint); transition: background 0.2s, box-shadow 0.2s, transform var(--solta); }
.check.on::before { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); transform: scale(1.08); }
.check:active::before { transform: scale(0.85); transition-duration: 0.08s; }
.lembrete.atrasado .check::before { box-shadow: inset 0 0 0 2px var(--gasto); }
.lembrete.hoje .check::before { box-shadow: inset 0 0 0 2px var(--alerta); }
.lembrete-txt { border: 0; background: transparent; color: var(--fg); text-align: left; padding: 8px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lembrete-txt strong { font-weight: 600; overflow-wrap: anywhere; }
.lembrete-txt small { color: var(--muted); font-size: 13px; }
.lembrete.atrasado .lembrete-txt small { color: var(--gasto); }
.lembrete.feito .lembrete-txt strong { color: var(--faint); text-decoration: line-through; font-weight: 500; }
.feitos { display: flex; flex-direction: column; gap: 10px; }
#btn-mais { position: relative; }
#btn-mais .qtd { position: absolute; top: -2px; right: -2px; }.bloco { display: flex; flex-direction: column; gap: 10px; }
.bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; }
.bloco-cab h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.bloco-cab small { color: var(--muted); font-size: 13.5px; }
/* ---------- frequentes, filtro por cartão, metas no Início ---------- */
.subfiltro .chip { min-height: 40px; font-size: 13.5px; }
.total-filtro { font-size: 13.5px; color: var(--muted); padding: 0 4px; }
.total-filtro b { color: var(--fg); font-weight: 600; }
.total-filtro b.pos { color: var(--ganho); }
.metas-mini { display: flex; flex-direction: column; gap: 14px; }
.meta-mini { display: flex; flex-direction: column; gap: 6px; }
.meta-mini-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.meta-mini-top strong { font-weight: 600; overflow-wrap: anywhere; }
.meta-mini-top span { color: var(--muted); font-size: 13px; }
.meta-mini-bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meta-mini-bot small { color: var(--muted); font-size: 13px; min-width: 0; }
/* ---------- base visual: toque com mola, ícones no tema claro ---------- */
/* Tudo que se toca afunda rápido e volta com um leve repique, como nos apps do iPhone.
   Botões grandes (linhas da lista) afundam menos que os pequenos. */
.btn, .chip, .icon-btn, .enviar, .seta-mes, .emoji-op, .cor-op, .nav button, .ver, .link, .check,
.linha, button.item, .aviso-item, button.kpi, .menu-mais button, .quinzena-mini, .lateral button, .conta-linha .nome, .lembrete-txt {
  transition: transform var(--solta), background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
.btn:active, .chip:active, .enviar:active, .emoji-op:active, .cor-op:active, .ver:active, .link:active { transform: scale(0.95); transition: transform var(--afunda), background-color 0.08s, filter 0.08s; }
.icon-btn:active, .seta-mes:active, .nav button:active { transform: scale(0.9); transition: transform var(--afunda), background-color 0.08s; }
.linha:active, button.item:active, .aviso-item:active, button.kpi:active, .menu-mais button:active, .quinzena-mini:active, .lateral button:active, .conta-linha .nome:active, .lembrete-txt:active { transform: scale(0.982); transition: transform var(--afunda), background-color 0.08s; }
.btn:disabled:active, .icon-btn[disabled]:active { transform: none; }
.icon-btn svg, .nav button svg { transition: transform var(--solta); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn:active, .chip:active, .icon-btn:active, .enviar:active, .linha:active, button.item:active, .aviso-item:active, .nav button:active { transform: none; }
}
/* No tema claro os tons pastel somem no branco: o traço escurece. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ico.tinta, :root:not([data-theme="dark"]) .ico-mini, :root:not([data-theme="dark"]) .emoji-op { color: color-mix(in srgb, var(--cor, var(--fg)) 50%, #000); }
  :root:not([data-theme="dark"]) .qtd { color: #fff; }
}
:root[data-theme="light"] .ico.tinta, :root[data-theme="light"] .ico-mini, :root[data-theme="light"] .emoji-op { color: color-mix(in srgb, var(--cor, var(--fg)) 50%, #000); }
:root[data-theme="light"] .qtd { color: #fff; }
/* Seleção de texto e cursor no tom do app. */
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--fg); }
input, textarea { caret-color: var(--accent); }
/* ---------- régua do recebimento (topo do Início) ---------- */
/* Um pedaço por recebimento do mês; o preenchimento é quanto já saiu dele. É a marca do app. */
.heroi { position: relative; isolation: isolate; }
.heroi::before { content: ""; position: absolute; inset: -60px -16px auto; height: 300px; background: radial-gradient(55% 50% at 30% 45%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%); pointer-events: none; z-index: -1; }
:root[data-theme="light"] .heroi::before { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .heroi::before { display: none; } }
.regua { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; color: var(--fg); border-radius: var(--r-sm); transition: transform var(--solta); }
.regua:active { transform: scale(0.985); transition: transform var(--afunda); }
.r-trilha { display: flex; gap: 3px; height: 32px; }
.r-seg { position: relative; min-width: 0; border-radius: 9px; background: var(--surface2); overflow: hidden; display: flex; align-items: flex-end; padding: 0 8px 6px; font-size: 11.5px; font-weight: 600; color: var(--fg); }
.r-seg > span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-seg i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: color-mix(in srgb, var(--accent) 52%, var(--surface2)); transform-origin: left; }
.r-seg i.warn { background: color-mix(in srgb, var(--alerta) 50%, var(--surface2)); }
.r-seg i.over { background: color-mix(in srgb, var(--gasto) 50%, var(--surface2)); }
.r-seg.agora { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 55%, transparent); color: var(--fg); }
.r-texto { font-size: 14.5px; color: var(--muted); }
.r-texto b { color: var(--fg); font-weight: 600; }
.r-texto b.neg { color: var(--gasto); }
@media (prefers-reduced-motion: no-preference) {
  .regua.anima .r-seg i { animation: encher 0.9s var(--mola) both; }
  @keyframes encher { from { transform: scaleX(0); } }
}
/* ---------- Para pagar (Início) ---------- */
/* Data em quadradinho de calendário; rosa = atrasada, âmbar = vence em até 3 dias. */
.cal { grid-row: 1 / span 2; grid-column: 1; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--surface3); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cal b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.cal em { font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.cal.ruim { background: color-mix(in srgb, var(--gasto) 16%, var(--surface2)); }
.cal.ruim b, .cal.ruim em { color: var(--gasto); }
.cal.perto { background: color-mix(in srgb, var(--alerta) 15%, var(--surface2)); }
.cal.perto b, .cal.perto em { color: var(--alerta); }
.tag.ruim { background: color-mix(in srgb, var(--gasto) 16%, transparent); color: var(--gasto); }
.tag.perto { background: color-mix(in srgb, var(--alerta) 15%, transparent); color: var(--alerta); }
.pagar .lista { margin-inline: -4px; }
.pagar-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pagar-resumo div { background: var(--surface2); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.pagar-resumo span { display: block; font-size: 12.5px; color: var(--muted); }
.pagar-resumo b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.pagar-saldo { margin-top: 10px; }
.pagar-saldo b { color: var(--fg); font-weight: 600; }
/* ---------- lista agrupada (Lançamentos) e barra dividida (Para onde foi) ---------- */
/* Cada dia é um bloco só, com linhas finas entre os itens; o saldo do dia fica no cabeçalho. */
.dia-grupo { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dia-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; }
.dia-cab .dia { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; }
.dia-cab .num { font-size: 13px; font-weight: 600; color: var(--muted); }
.grupo { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; gap: 0; }
.grupo .linha, .grupo-card .linha { position: relative; border-radius: 0; }
.grupo .linha { padding: 11px 14px; }
.grupo .linha:hover { background: var(--surface2); }
.grupo .linha + .linha::before, .grupo-card .linha + .linha::before, .card .lista > .linha + .linha::before {
  content: ""; position: absolute; top: 0; right: 0; left: 68px; height: 1px; background: var(--line);
}
.grupo .linha + .linha::before { left: 70px; right: 14px; }
.card .lista > .linha { position: relative; }
.card .lista > .linha + .linha::before { left: 58px; }
.linha .val small { display: block; font: 500 12px var(--body); color: var(--muted); letter-spacing: 0; }
/* Barra dividida: cada categoria um pedaço, na cor do ícone; o resto em cinza. */
.partes { display: flex; height: 12px; gap: 3px; margin: 4px 0 8px; }
.partes i { min-width: 4px; border-radius: 99px; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .partes.anima i { animation: encher 0.8s var(--mola) both; }
  @keyframes encher { from { transform: scaleX(0); } }
}
.grupo-card { gap: 0; margin-inline: -4px; }
.grupo-card .linha { min-height: 58px; }
/* ---------- animações de salvar ---------- */
/* Aviso no pé: sobe com mola; com Desfazer vira uma cápsula com botão. */
.toast { display: flex; align-items: center; gap: 14px; }
.toast .desfazer, .toast .editar { border: 0; background: transparent; color: #5b49f0; font-weight: 700; font-size: 14px; padding: 0 4px; min-height: 36px; margin: -8px -6px -8px 0; }
/* No tema claro o aviso é escuro: o violeta clareia. */
:root[data-theme="light"] .toast .desfazer, :root[data-theme="light"] .toast .editar { color: #b4a7ff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .toast .desfazer, :root:not([data-theme="dark"]) .toast .editar { color: #b4a7ff; } }
.toast:has(.desfazer) { padding-right: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .toast.entra { animation: toast-sobe 0.45s var(--mola); }
  @keyframes toast-sobe { from { transform: translateY(16px) scale(0.96); opacity: 0; } }
  /* Linha recém-salva: entra de cima e fica um instante com fundo violeta. */
  .linha.nova { animation: linha-nova 1.4s var(--mola); }
  @keyframes linha-nova { 0% { background: var(--accent-soft); transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; transform: none; background: var(--accent-soft); } 100% { background: transparent; } }
}
/* Linha do total em Lançamentos: quebra entre as partes, não no meio delas. */
.total-filtro b { white-space: nowrap; }

/* ---------- contas fixas à parte no gasto por recebimento ---------- */
/* A parte fixa (aluguel, contas) fica num cinza escuro por cima; só o dia a dia ganha cor de alerta. */
.meter.duplo { position: relative; }
.meter.duplo i { position: absolute; inset: 0 auto 0 0; }
.meter i.fixo, .r-seg i.fixo { background: color-mix(in srgb, var(--fg) 24%, var(--surface2)); }
.per-partes { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.per-partes b { color: var(--fg); font-weight: 600; }
.per-partes .dot { background: var(--neutro); }
.per-partes .dot.fixo { background: color-mix(in srgb, var(--fg) 24%, var(--surface2)); }
/* Aviso da barra rápida: o resumo do que foi salvo pode ocupar duas linhas, com Editar e Desfazer ao lado. */
.toast:has(.editar) { border-radius: 20px; padding: 10px 14px 10px 18px; gap: 4px 12px; width: calc(100% - 32px); max-width: 480px; }
.toast:has(.editar) > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.toast .editar { margin: -8px 0; padding: 0 6px; min-height: 44px; }
.toast:has(.editar) .desfazer { min-height: 44px; margin: -8px -4px -8px 0; }
/* Linha abaixo do número principal: desde qual recebimento e quando vem o próximo. */
.heroi-sub { font-size: 14px; color: var(--muted); margin-top: 2px; }

/* ---------- revisão mobile (out/2026) ---------- */
/* Dinheiro nunca quebra no meio ("R$ 20.750,0 / 0"): o valor fica inteiro e o que está em volta é que se ajusta. */
.val, b.num, .num b, .valor-medio, .q-resumo b, .pagar-conta b, .heroi-conta b { white-space: nowrap; }
/* Número grande: diminui um pouco em telas de 320 px em vez de quebrar. */
.big { font-size: clamp(40px, 13.5vw, 68px); }
/* Conta do número grande: recebido − gasto, linha a linha, com o valor inteiro à direita. */
.heroi-conta { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; background: var(--surface); border-radius: var(--r-md); padding: 8px 14px; }
.heroi-conta div, .pagar-conta div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 4px 0; }
.heroi-conta span, .pagar-conta span { color: var(--muted); font-size: 14px; min-width: 0; }
.heroi-conta b, .pagar-conta b { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; margin-left: auto; }
.heroi-nota { font-size: 14px; color: var(--muted); margin-top: 8px; }
.heroi-nota b { color: var(--fg); font-weight: 600; }
.mes-linha { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mes-rot { flex-basis: 100%; color: var(--fg); font-weight: 600; font-size: 13.5px; }
/* Para pagar: saldo − contas = fica. */
.pagar-conta { margin-top: 12px; background: var(--surface2); border-radius: var(--r-md); padding: 6px 14px; }
.pagar-conta small { display: block; font-size: 12.5px; color: var(--muted); }
.pagar-conta .total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px; }
.pagar-conta .total span { color: var(--fg); font-weight: 600; }
.pagar-conta .total b { font-size: 19px; }
/* Comece por aqui compacto: uma linha que abre. */
.card.boas { padding: 6px 16px 14px; gap: 6px; }
.boas summary { color: var(--fg); font-size: 15px; }
.boas summary span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); margin-right: 10px; vertical-align: 1px; }
.boas details[open] .passos { margin: 4px 0 6px; }
.boas > .btn { align-self: flex-start; }

/* Filtros que rolam para o lado: um esmaecido na borda avisa que há mais opções. */
.chips.rola { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chips.rola.fim { mask-image: none; -webkit-mask-image: none; }
.chips.rola.meio { mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.chips.rola.fim.meio { mask-image: linear-gradient(90deg, transparent, #000 32px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); }

/* Janelas com o teclado aberto: a altura segue a área visível (--vvh vem do JS). */
.sheet-panel { max-height: calc(var(--vvh, 100dvh) * 0.94); }
.sheet { top: var(--vvt, 0px); height: var(--vvh, 100%); bottom: auto; }
.status.erro { scroll-margin: 80px; }
.in:focus-visible, select.in:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }/* Nota de pendências do topo: vira atalho para o A pagar. */
button.heroi-nota { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; text-align: left; background: color-mix(in srgb, var(--alerta) 11%, var(--surface)); color: var(--muted); border-radius: var(--r-md); padding: 10px 12px 10px 14px; min-height: 48px; font: inherit; font-size: 14px; }
button.heroi-nota .seta { color: var(--muted); flex: none; display: grid; }
button.heroi-nota .seta svg { width: 18px; height: 18px; }
.mes-rot small { font-weight: 500; color: var(--muted); font-size: 13px; }
.heroi-conta { padding: 6px 14px; }
.heroi-conta div { padding: 3px 0; }
.regua { margin-top: 10px; }
.r-texto { font-size: 13px; }.heroi-nota b.neg { color: var(--gasto); }
/* Rótulo quebra na própria coluna; o valor fica sempre à direita, inteiro. */
.heroi-conta div, .pagar-conta div { flex-wrap: nowrap; align-items: center; }
.heroi-conta span, .pagar-conta span { flex: 1 1 0; }
.heroi-conta b, .pagar-conta b { flex: none; }
/* 320 px: os nomes da barra de baixo cabem inteiros. */
@media (max-width: 359px) { .nav button { font-size: 10px; letter-spacing: -0.02em; } .nav { left: 8px; right: 8px; } }
@media (max-width: 359px) { .nav { padding: 5px; } .nav-in { grid-template-columns: 1fr 1fr 56px 1fr 1fr; gap: 0; } .nav button { padding-inline: 0; } }

/* ---------- planejamento: períodos, previsto x realizado, dívidas, custo de vida, simuladores ---------- */
.periodo { display: flex; flex-direction: column; gap: 12px; }
.periodo-cab { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: start; }
.periodo-cab h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.periodo-cab small { display: block; color: var(--muted); font-size: 13px; }
.periodo-cab .pill { margin: 6px 0 0; display: inline-block; }
.periodo-cab .icon-btn { background: var(--surface2); }
/* Tabela previsto x realizado: três colunas, valor sempre inteiro. */
.pr-tab { background: var(--surface2); border-radius: var(--r-md); padding: 4px 12px; }
.pr-linha { display: grid; grid-template-columns: minmax(48px, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; }
.pr-linha + .pr-linha { border-top: 1px solid var(--line); }
.pr-linha > span { color: var(--muted); font-size: 14px; }
.pr-linha b { font-family: var(--display); font-weight: 600; font-size: 15.5px; text-align: right; white-space: nowrap; min-width: 0; }
.pr-cab { padding: 6px 0 2px; }
.pr-cab span { font-size: 12.5px; font-weight: 600; text-align: right; }
.pr-cab span:first-child { text-align: left; }
.pr-total > span { color: var(--fg); font-weight: 600; }
.pr-total b { font-size: 17px; }
@media (max-width: 359px) { .pr-linha { gap: 4px 8px; } .pr-linha b { font-size: 14px; } .pr-total b { font-size: 15px; } .pr-linha > span { font-size: 13px; } }
.origem { font-size: 13px; color: var(--muted); }
.origem b { color: var(--fg); font-weight: 600; }
.tag.previsto { background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); color: var(--accent-text); }
.card details > summary, details.card > summary { gap: 8px; }
details.card > summary .tag { margin-left: 0; }
details.card > summary b { margin-left: auto; font-family: var(--display); color: var(--fg); white-space: nowrap; }
details.card { padding-top: 4px; padding-bottom: 6px; display: flex; flex-direction: column; gap: 8px; }
/* Dívidas */
.dividas details.card summary { color: var(--fg); font-size: 15px; }
.conta-linha.divida { padding: 6px 0; }
.conta-linha.divida + .conta-linha.divida { border-top: 1px solid var(--line); }
/* Simulação: rótulo que nunca se confunde com dado real. */
.aviso-sim { font-size: 13px; font-weight: 600; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--r-md); padding: 9px 12px; }
.tag.sim { font-style: normal; background: color-mix(in srgb, var(--accent) 18%, var(--surface2)); color: var(--accent-text); margin-left: 6px; }
.pagar-conta.sim { background: var(--surface2); }
.op-check { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 4px 0; font-size: 15px; cursor: pointer; }
.op-check + .op-check { border-top: 1px solid var(--line); }
.op-check input { width: 22px; height: 22px; accent-color: var(--accent-fill); flex: none; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.sim-res { display: flex; flex-direction: column; gap: 10px; }
.sim-parcela b { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.sim-parcela small { color: var(--muted); }
.sim-tit { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.sim-periodos .item { padding-inline: 0; }
.sim-juros summary { color: var(--accent-text); }
.simular-chamada { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; color: var(--fg); }
.simular-chamada > span:first-child { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); color: var(--accent-text); display: grid; place-items: center; }
.simular-chamada svg { width: 20px; height: 20px; }
.simular-chamada strong { display: block; font-weight: 600; }
.simular-chamada small { display: block; color: var(--muted); font-size: 13px; }
.simular-chamada .seta { color: var(--muted); display: grid; }
.simular-chamada .seta svg { width: 18px; height: 18px; }
/* Custo de vida: barra + legenda com números (as cores só ajudam). */
.cv { display: flex; flex-direction: column; gap: 6px; }
.cv-base { font-size: 13.5px; color: var(--muted); }
.cv-base b { color: var(--fg); }
.custo-barra { height: 14px; margin: 6px 0; }
.custo-barra i { min-width: 6px; }
.cv-c, .dot.cv-c { background: #8fb8ff; }
.cv-o, .dot.cv-o { background: #d4a9f0; }
.cv-n, .dot.cv-n { background: var(--muted); }
.cv-d, .dot.cv-d { background: var(--surface3); box-shadow: inset 0 0 0 1.5px var(--faint); }
.custo-barra.deficit { box-shadow: 0 0 0 1.5px var(--gasto); border-radius: 99px; }
.cv-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 3px 0; font-size: 14px; }
.cv-linha > span { color: var(--muted); }
.cv-linha b { font-family: var(--display); font-weight: 600; font-size: 15.5px; white-space: nowrap; margin-left: auto; }
.cv-linha b small { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cv-total { border-top: 1px solid var(--line); padding-top: 7px; }
.cv-total > span { color: var(--fg); font-weight: 600; }
.cv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; }
.cv-item + .cv-item { border-top: 1px solid var(--line); }
.cv-item strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cv-item small { display: block; color: var(--muted); font-size: 12.5px; }
.cv-item > b { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.cv-op { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--muted); cursor: pointer; justify-self: start; }
.cv-op input { width: 22px; height: 22px; accent-color: var(--accent-fill); }
.card-head > b.num { font-family: var(--display); font-weight: 600; }
/* Relatórios: consultar um gasto. */
.busca-gasto { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.busca-gasto label { font-size: 13px; font-weight: 600; color: var(--muted); }
.busca-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hist-meses { display: flex; flex-direction: column; gap: 12px; }
/* Mês passado no Início. */
.aviso-mes { font-size: 13.5px; color: var(--muted); background: var(--surface); border-radius: var(--r-md); padding: 10px 14px; margin-top: 8px; }
.aviso-mes b { color: var(--fg); }
.aviso-mes .link { min-height: 36px; padding: 4px 0 0; display: block; }.heroi-nota-txt { font-size: 13px; color: var(--muted); margin-top: 6px; }
.heroi-conta em.tag { font-style: normal; margin-left: 4px; }
.heroi .heroi-nota { margin-top: 8px; }

/* Início compacto: captura primeiro, explicação sob demanda. */
.app:has(.inicio-detalhes) { gap: 12px; }
.heroi { padding-top: 0; }
.inicio-detalhes { margin-top: 2px; }
.inicio-detalhes > summary { color: var(--accent); min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; list-style: none; }
.inicio-detalhes > summary::-webkit-details-marker { display: none; }
.inicio-detalhes > summary::after { content: '+'; font-size: 20px; }
.inicio-detalhes[open] > summary::after { content: '−'; }
.inicio-detalhes-corpo { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.inicio-detalhes-corpo .heroi-conta { margin-top: 0; }
.heroi .big { letter-spacing: -0.04em; }