:root {
  /* primitivos */
  --ink-900: #111318;
  --ink-600: #4a4f5a;
  --ink-400: #666c77;       /* 4.6:1 sobre --paper-50 */
  --paper-50: #f3f4f6;
  --paper-0: #ffffff;
  --sea-500: #127257;       /* 5.4:1 sobre --paper-50: vira texto no card */
  --coral-500: #e2573b;

  /* semânticos */
  --bg: var(--paper-50);
  --fg: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-400);
  --linha: rgba(17, 19, 24, .08);
  --calor: #a8351f;          /* 4.5:1 inclusive sobre o campo verde atrás do topo */
  --bom: var(--sea-500);
  --campo-a: rgba(31, 138, 112, .34);
  --campo-b: rgba(226, 87, 59, .26);
  --celula: rgba(255, 255, 255, .55);
  --celula-hover: rgba(255, 255, 255, .85);
  --chip-on: var(--paper-0);
  --chip-on-fg: var(--ink-900);
  --veu: rgba(17, 19, 24, .28);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --r-celula: 16px;
  --folha-w: 380px;

}

:root[data-theme="light"] { color-scheme: light; }
/* Tema escuro por atributo, não por media query: o botão de tema precisa poder
   contrariar o SO. O script no <head> resolve "automático" antes do primeiro paint. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c0e12;
    --fg: #f2f3f5;
    --fg-2: #b4b9c2;
    --fg-3: #7d838e;
    --linha: rgba(255, 255, 255, .08);
    --calor: #ff7a5c;
    --bom: #4cc9a4;
    --campo-a: rgba(76, 201, 164, .26);
    --campo-b: rgba(255, 122, 92, .22);
    --celula: rgba(255, 255, 255, .035);
    --celula-hover: rgba(255, 255, 255, .08);
    --chip-on: rgba(255, 255, 255, .16);
    --chip-on-fg: var(--fg);
    --veu: rgba(0, 0, 0, .45);
}

/* A lib troca o vidro pelo tema do SO. Aqui o botão manda: mesmos valores,
   presos ao atributo. :where() segura a especificidade no nível da lib, para os
   ajustes do app (.importar, .mes-nav) continuarem ganhando. */
:where(:root[data-theme="light"]) .lg--on-auto { color: #14161a; }
:where(:root[data-theme="light"]) .lg--on-auto .lg-glyph { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)); }
:where(:root[data-theme="light"]) .lg--frost.lg--on-auto {
  --lg-tint: rgba(255, 255, 255, .16); --lg-bright: 1.06; --lg-edge-key: .92; --lg-edge-back: .55;
}
:where(:root[data-theme="dark"]) .lg--on-auto { color: #fff; }
:where(:root[data-theme="dark"]) .lg--on-auto .lg-glyph { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
:where(:root[data-theme="dark"]) .lg--frost.lg--on-auto {
  --lg-tint: rgba(10, 12, 16, .22); --lg-bright: .92; --lg-edge-key: .55; --lg-edge-back: .22;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(48vw 42vh at 14% 6%, var(--campo-a), transparent 70%),
    radial-gradient(40vw 46vh at 92% 96%, var(--campo-b), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round; }

.app {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 24px;
}

/* ── topo ─────────────────────────────── */
/* Resumo (3 linhas fixas) à esquerda, ações no topo à direita, contexto do mês numa
   faixa de chips embaixo. Nada muda de lugar quando o mês tem ou não parcelas/reserva. */
.topo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px 24px;
  margin-bottom: 20px;
}
.contexto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; }
.exemplo {
  flex-basis: 100%; margin: 0 0 4px; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; color: var(--fg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calor) 45%, transparent);
  background: color-mix(in srgb, var(--calor) 8%, transparent);
}
.exemplo b { color: var(--fg); }
.exemplo[hidden] { display: none; }
.ctx {
  /* inline-block, não flex: flex come o espaço antes do " · " entre os trechos. */
  display: inline-block;
  line-height: 28px; padding: 0 12px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-size: 13px; color: var(--fg-2);
  white-space: nowrap;
}
.ctx b { font-weight: 650; color: var(--fg); margin-right: 6px; }
.ctx--comp { background: none; padding: 0 4px 0 0; }
/* Clicável tem cara de clicável em repouso: borda e seta, não só hover. */
.ctx--link { border: 0; font: inherit; font-size: 13px; line-height: 28px; cursor: pointer; transition: background 180ms ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); }
.ctx--link svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }
.ctx--link:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.ctx--link:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.ctx:empty, .ctx[hidden] { display: none; }
.ctx--extra { display: none; }
.ctx--mais { font-weight: 600; }
.exemplo { order: -2; }
.ctx--comp { order: 0; }
.ctx-rot { position: relative; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ctx-rot::after { content: ''; position: absolute; inset: -12px -4px; }
.ctx-rot:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.ctx .faltou { color: var(--calor); font-weight: 600; }
.ctx .sobe { color: var(--calor); font-weight: 600; }
.ctx .desce { color: var(--bom); font-weight: 600; }
.resumo p { margin: 0; }
.resumo-rotulo { font-size: 13px; color: var(--fg-2); }
.resumo-total {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 200;
  letter-spacing: -.03em;
  margin: 4px 0 !important;
}
.resumo-total small { font-size: .42em; font-weight: 300; letter-spacing: 0; color: var(--fg-2); }
.resumo-meta { font-size: 13px; color: var(--fg-2); min-height: 20px; margin-top: 2px !important; }
.resumo-meta b { color: var(--fg); font-weight: 650; }
.resumo-meta .faltou { color: var(--calor); font-weight: 600; }
/* Alvo de toque de 44px no "Meta"/"definir meta" sem mudar a linha. */
.resumo-meta .link { position: relative; }
.resumo-meta .link::after { content: ''; position: absolute; inset: -13px -6px; }
.resumo-meta .aviso-meta { color: var(--fg-3); }
.meta-campo {
  width: 140px; height: 28px; padding: 0 10px;
  border: 1px solid var(--fg-3); border-radius: 99px;
  background: var(--celula); color: var(--fg); font: inherit; font-size: 13px;
}
.meta-campo:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.meta-barra { display: inline-block; width: 72px; height: 4px; margin: 0 8px 2px; border-radius: 4px; vertical-align: middle;
  background: color-mix(in srgb, var(--fg) 14%, transparent); overflow: hidden; }
.meta-barra span { display: block; height: 100%; width: var(--p); background: var(--bom); border-radius: 4px; }
.meta-barra span.passou { background: var(--calor); }
.resumo-entrou { font-size: 15px; color: var(--fg-2); margin-bottom: 4px !important; }
.resumo-entrou b { font-weight: 600; color: var(--bom); }
.resumo-entrou .sobrou { color: var(--fg-2); }
.resumo-entrou .faltou { color: var(--calor); font-weight: 600; }

.acoes { display: flex; gap: 12px; align-items: center; }
/* Frost leve na navegação: com 14px de blur a malha some e o vidro vira chapa. */
.mes-nav, .filtros { --lg-blur: 3px; --lg-tint: rgba(255, 255, 255, .10); }
:where(:root[data-theme="dark"]) .mes-nav, :where(:root[data-theme="dark"]) .filtros { --lg-tint: rgba(12, 14, 18, .22); }
.mes-nav { padding: 0 6px; }
.mes-nav > button:hover, .filtros > button:hover { background: rgba(127, 127, 127, .16); }
.mes-nav > button { width: 44px; height: 44px; }
.mes-nav > .mes-nome {
  width: auto;
  min-width: 132px; height: 44px; padding: 0 8px;
  border: 0; border-radius: 99px; background: none;
  text-align: center; font-weight: 600; font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.mes-nav > .mes-nome:disabled { cursor: default; color: inherit; }
.mes-nav > .mes-nome:not(:disabled):hover { background: rgba(127, 127, 127, .16); }
/* Um foco só no app inteiro, igual ao da lib. */
.mes-nav > button:focus-visible, .filtros > button:focus-visible, .fechar:focus-visible, .limpar:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}
.importar svg { width: 18px; height: 18px; }
.tema svg { width: 20px; height: 20px; }
/* Ação primária: o mesmo vidro, tingido com a cor do texto. */
.importar.lg--frost { --lg-tint: color-mix(in srgb, var(--fg) 88%, transparent); }
.importar.lg--on-auto { color: var(--bg); }
.importar::before { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ── filtros ──────────────────────────── */
.filtros { padding: 0 6px; gap: 8px; }
.linha-filtros { display: flex; gap: 12px; align-items: center; }
.buscar svg { width: 20px; height: 20px; }
.busca {
  margin: 20px 16px 12px 0; height: 44px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 12px;
  background: var(--celula); color: var(--fg); font: inherit;
}
.busca::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* item 27: o X nativo ficava ao lado do X de fechar */
.busca:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.resultado {
  width: 100%; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border: 0; border-top: 1px solid var(--linha); background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.resultado:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.resultado:focus-visible { outline: 2px solid #0a84ff; outline-offset: -2px; }
.resultado-data { font-size: 12px; color: var(--fg-2); }
.resultado-desc { font-size: 15px; font-weight: 550; }
.resultado-valor { font-weight: 600; }
.resultado--entrou .resultado-valor { color: var(--bom); }
.resultado--fora .resultado-desc, .resultado--fora .resultado-valor { color: var(--fg-2); font-weight: 500; }
#resultados li { list-style: none; }
/* Ações e filtros empilhados à direita, na altura do resumo: não gastam uma linha
   própria acima da grade, que é o que fazia a 6ª semana sair da tela. */
.lado { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.filtros > button {
  width: auto;
  height: 44px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 550;
  color: var(--fg-2);
  transition: background 180ms ease, color 180ms ease;
}
.filtros > button[aria-checked="true"] {
  background: var(--chip-on);
  color: var(--chip-on-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ── calendário ───────────────────────── */
.semana, .grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.semana span {
  font-size: 13px;
  color: var(--fg-3);
  padding: 0 12px 8px;
}
.grade { position: relative; }

.dia {
  position: relative;
  /* Seis semanas têm que caber na tela: a altura vem do espaço que sobra abaixo da
     grade, medido no JS (--h-celula), porque o topo muda de altura com os chips.
     O piso (78px) é o que o conteúdo pede: número + valor + entrada + barra. */
  aspect-ratio: auto;
  min-height: 0; /* conteúdo não empurra a célula: todas têm a mesma altura */
  overflow: hidden;
  height: max(78px, var(--h-celula, 96px));
  border: 0;
  border-radius: var(--r-celula);
  background: var(--celula);
  box-shadow: inset 0 0 0 1px var(--linha);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dia:not(:disabled):hover { background: var(--celula-hover); }
}
.dia:active { transform: scale(.97); }
.dia:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.dia--vazio { visibility: hidden; }
/* Futuro = ainda não aconteceu: sem preenchimento e com borda mais leve, texto legível
   (número ≥4,5:1). Sem opacity: ela apagava o número (1,9:1). Tracejado é do "previsto". */
.dia--futuro { cursor: default; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linha) 50%, transparent); }
.dia--futuro .dia-num { color: var(--fg-3); }
@media (hover: hover) and (pointer: fine) {
  .dia--futuro:not(.dia--previsto):hover { background: none; }
}
.dia--futuro:active { transform: none; }

.dia-num { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.dia--hoje .dia-num {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin: -3px 0 0 -6px;
  border-radius: 99px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 650;
}
.dia-valor {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--calor);
}
.dia-valor small { font-size: 11px; font-weight: 500; color: var(--fg-3); margin-right: 1px; }
/* Dia futuro com previsão: clicável, valor tracejado — é aviso, não gasto. */
.dia--previsto { opacity: 1; cursor: pointer; background: none; box-shadow: inset 0 0 0 1px var(--linha); border: 1px dashed color-mix(in srgb, var(--fg) 55%, transparent); } /* ≥3:1 nos dois temas */
.dia--previsto .dia-num { color: var(--fg-3); }
.previsto { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.previsto small { font-size: 11px; font-weight: 500; }
.previsto .n { font-weight: 500; color: var(--fg-3); margin-left: 4px; }
@media (max-width: 640px) { .previsto .n { display: none; } }
.item--previsto .item-desc, .item--previsto .item-valor { color: var(--fg-2); font-weight: 500; }
.dia-entrou {
  display: block;
  min-height: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--bom);
}
.dia-entrou small { font-size: 11px; font-weight: 500; margin-right: 1px; }
.dia-entrou:empty { visibility: hidden; }
.dia-calor {
  display: block;
  height: 3px;
  border-radius: 3px;
  margin-top: 6px;
  background: var(--calor);
  transform-origin: left;
  transform: scaleX(var(--k, 0));
  opacity: calc(.35 + var(--k, 0) * .65);
}
/* Anel pequeno no canto: há movimentação que ficou fora da soma. */
.dia--fora::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px var(--fg-3);
}
.dia-valor--volta, .dia-valor--volta small { color: var(--bom); }
.dia--sem .dia-valor { color: var(--fg-3); font-weight: 400; }

/* Lente: um vidro só, que desliza até o dia escolhido. */
.lente {
  --lg-r: var(--r-celula);
  /* Parede fina: só a margem da célula refrata, o número e o valor ficam legíveis. */
  --lg-bevel: 9px;
  --lg-disp: 5px;
  --lg-r: calc(var(--r-celula) + 5px);
  position: absolute;
  top: -5px; left: -5px;
  pointer-events: none;
  opacity: 0;
  transition: transform 280ms var(--ease-out), opacity 180ms ease;
  z-index: 2;
}
.lente.on { opacity: 1; }
/* Pairando (sem dia aberto): mesma lente, mais discreta. */
.lente.on.lente--pairando { opacity: .7; }

/* ── folha lateral ────────────────────── */
.folha {
  --lg-r: 30px;
  position: fixed;
  top: 16px; right: 16px; bottom: 16px;
  width: var(--folha-w);
  padding: 24px 8px 8px 24px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateX(calc(100% + 32px));
  transition: transform 280ms var(--ease-drawer);
}
.folha.aberta { transform: none; z-index: 21; } /* a que abre passa por cima da que sai */
.folha[hidden] { display: flex; visibility: hidden; }

.folha-topo { display: flex; justify-content: space-between; align-items: flex-start; padding-right: 12px; }
.folha h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.folha-sub { margin: 2px 0 0; font-size: 13px; color: var(--fg-2); }
.fechar {
  width: 44px; height: 44px;
  margin: -10px -6px 0 0;
  border: 0; border-radius: 99px;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 180ms ease;
}
.fechar:hover { background: rgba(127, 127, 127, .16); }
.folha-total {
  margin: 20px 0 12px;
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -.03em;
}

.itens {
  list-style: none;
  margin: 0;
  padding: 0 16px 32px 0;
  overflow-y: auto;
  flex: 1;
  /* Esmaece o rodapé: sinal de que a lista continua abaixo. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
}
.item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
}
.item-banco {
  width: 36px; height: 36px;
  border-radius: 99px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: #fff;
}
.item-desc { font-size: 15px; font-weight: 550; line-height: 1.3; }
.item-meta { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.item-valor { font-size: 15px; font-weight: 600; text-align: right; }
.item-metodo {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-right: 6px;
  background: rgba(127, 127, 127, .16);
  color: var(--fg);
}
/* Entre suas contas: neutro, sem risco — não está errado, só não é gasto nem entrada. */
.item--fora .item-desc, .item--fora .item-valor { color: var(--fg-2); font-weight: 500; }
.item--entrou .item-valor { color: var(--bom); }
/* Saiu = vermelho, entrou = verde (estorno é dinheiro voltando: verde). */
.item--saiu .item-valor, .resultado-valor.saiu { color: var(--calor); }
.item--volta .item-valor, .resultado-valor.volta { color: var(--bom); }
.sal-resumo { color: var(--fg-2); font-size: .9em; }
.rotulo {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 0; border-radius: 99px;
  font: inherit; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--bom) 18%, transparent);
  color: var(--fg);
  vertical-align: 1px;
  cursor: pointer;
}
/* Alvo de toque de 44px sem aumentar o chip: a área extra é invisível. */
.rotulo { position: relative; }
.rotulo::after { content: ''; position: absolute; inset: -14px -6px; }
.sr-only { position: absolute; margin: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo--vazio { background: none; box-shadow: inset 0 0 0 1px var(--linha); color: var(--fg-2); font-weight: 500; }
.rotulo:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.rotulo-campo {
  margin-left: 6px; width: 140px; height: 24px; padding: 0 8px;
  border: 1px solid var(--fg-3); border-radius: 99px;
  background: var(--celula); color: var(--fg); font: inherit; font-size: 13px;
}
.item-motivo { font-size: 11px; color: var(--fg-2); }
.folha-fora { margin: 16px 0 6px; font-size: 12px; color: var(--fg-3); }
.item-vazio { padding: 24px 0; color: var(--fg-2); font-size: 14px; border-top: 1px solid var(--linha); }

/* ── importar ─────────────────────────── */
.soltar {
  margin: 24px 16px 0 0;
  min-height: 200px;
  border-radius: 20px;
  border: 1.5px dashed color-mix(in srgb, var(--fg) 25%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
  transition: background 180ms ease, border-color 180ms ease;
}
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar svg { width: 28px; height: 28px; margin-bottom: 8px; color: var(--fg-2); }
.soltar strong { font-weight: 600; }
.soltar span { font-size: 13px; color: var(--fg-2); }
.soltar.sobre, .soltar:hover { background: rgba(127, 127, 127, .10); border-color: var(--fg-2); }
.soltar:focus-within { outline: 2px solid #0a84ff; outline-offset: 2px; }
.link {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--fg); text-decoration: underline; cursor: pointer;
}
.cpf { margin: 24px 16px 0 0; display: grid; gap: 8px; }
.cpf label { font-size: 14px; font-weight: 600; }
.cpf label span { display: block; font-size: 12px; font-weight: 400; color: var(--fg-2); }
.cpf-linha { display: flex; gap: 8px; }
.cpf input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 12px;
  background: var(--celula); color: var(--fg); font: inherit; font-variant-numeric: tabular-nums;
}
.cpf input:focus-visible, .cpf button:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.cpf button {
  height: 44px; padding: 0 16px; border-radius: 12px;
  background: transparent; color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  font: inherit; font-weight: 550; cursor: pointer;
}
.cpf button:hover { background: rgba(127, 127, 127, .12); }
.cpf-estado { margin: 0; font-size: 12px; color: var(--fg-3); }
.backup { display: flex; gap: 20px; margin: 16px 16px 0 0; font-size: 13px; }
/* Alvo de toque de 44px nos links da folha, sem mudar o tamanho do texto. */
.backup .link, .limpar { display: inline-flex; align-items: center; min-height: 44px; }
.sem-dado { font-size: .5em; font-weight: 300; color: var(--fg-3); letter-spacing: 0; }
.backup label.link { cursor: pointer; }
.backup label.link:focus-within { outline: 2px solid #0a84ff; outline-offset: 2px; }
.ajustes { margin: 24px 16px 0 0; border-top: 1px solid var(--linha); }
.ajustes > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.ajustes > summary::-webkit-details-marker { display: none; }
.ajustes > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--fg-2); }
.ajustes[open] > summary::after { content: "\2212"; }
.ajustes > summary:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.ajustes .cpf { margin-right: 0; }
.ajustes .backup { margin-right: 0; }
.limpar {
  /* Perigo: botão de 44px, no fim da seção, longe dos links de backup. */
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin: 32px 0 16px; padding: 0 16px;
  border: 1px solid var(--calor); border-radius: 12px;
  background: none; font: inherit; font-size: 14px; color: var(--calor); cursor: pointer;
}
.limpar--confirmar { background: var(--calor); color: var(--bg); }
.limpar[hidden] { display: none; }
.limpar--confirmar { font-weight: 600; }
.aviso.erro { color: var(--calor); }
.aviso { margin: 16px 16px 0 0; font-size: 13px; color: var(--fg-2); min-height: 1.4em; }

/* Véu só no celular, onde a folha cobre o calendário. */
.veu {
  display: none;
  position: fixed; inset: 0;
  z-index: 15;
  background: var(--veu);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
body.com-folha .veu { opacity: 1; pointer-events: auto; }

/* Com a folha aberta, o topo precisa dos 920px do .app (abaixo disso o resumo encolhe para 0 e quebra).
   Desde 1332px (920 + folha 380 + 2 x 16 de borda) cabe grade e folha lado a lado: o .app mantém a
   largura e só desliza para a esquerda o quanto a folha cobriria (0 desde 1744px). Abaixo disso a folha
   sobrepõe o conteúdo com o véu (regra no fim do arquivo) e o .app não muda. */
@media (min-width: 1332px) {
  .app { transition: transform 280ms var(--ease-drawer); }
  body.com-folha .app { transform: translateX(calc(-1 * max(0px, 872px - 50vw))); }
}

/* ── celular ──────────────────────────── */
@media (max-width: 640px) {
  .app { padding: 24px 16px 48px; }
  .resumo-total { font-size: 44px; }
  .topo { grid-template-columns: 1fr; }
  .lado { align-items: stretch; }
  .linha-filtros { gap: 8px; }
  .longo { display: none; }
  .curto { display: inline; }
  .acoes { width: 100%; justify-content: space-between; }
  .ctx { white-space: normal; line-height: 20px; padding: 4px 12px; border-radius: 14px; }
  .ctx--comp { padding: 0; }
  .importar span { display: none; }
  .importar { padding: 0; width: 52px; justify-content: center; }
  .mes-nav { flex: 1; justify-content: space-between; }
  .mes-nav > .mes-nome { min-width: 0; white-space: nowrap; }
  .acoes { gap: 8px; }
  .semana, .grade { gap: 4px; }
  .semana span { padding: 0 0 6px; text-align: center; }
  .dia { padding: 6px 4px; height: 60px; aspect-ratio: auto; align-items: center; text-align: center; --r-celula: 12px; }
  .dia-valor { font-size: 11px; }
  .dia-valor small { font-size: 11px; }
  .dia--hoje .dia-num { margin: -3px 0 0; }
  .dia--fora::after { top: 6px; right: 6px; }
  /* Entrada: "+6k" de 11px numa linha própria, embaixo do gasto. O número do dia fica no mesmo
     lugar de todos os outros dias. */
  .dia-entrou { min-height: 0; font-size: 11px; line-height: 13px; font-weight: 700; }
  .dia-entrou small { display: none; }
  /* Gasto, entrada e barra em coluna justa, para caber nos 60px da célula. */
  .dia--entrou > span:nth-child(2) { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
  .dia--entrou .dia-valor { line-height: 14px; }
  .dia--entrou .dia-calor { margin-top: 3px; }
  .dia-calor { width: 100%; }
  .lente { --lg-r: 16px; top: -4px; left: -4px; }
  .veu { display: block; }
  .folha {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto;
    max-height: 72dvh;
    transform: translateY(calc(100% + 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .folha, .lente, .dia { transition-duration: 1ms; }
}

/* A folha de importar cresceu (CPF): rola dentro dela em vez de cortar. */
#folha-import { overflow-y: auto; }

/* Chips clicáveis: 28px de altura visual, 44px de toque (a área extra é invisível). */
.ctx--link { position: relative; }
.ctx--link::after { content: ''; position: absolute; inset: -8px -2px; }

/* A lib anima hover/press em 340ms; em UI de toque rápido o teto da casa é 300ms. */
.lg--interactive { transition-duration: 240ms; }

/* Para onde foi */
.onde { grid-template-columns: 72px 1fr auto; }
.onde .resultado-valor small { font-size: 12px; font-weight: 500; color: var(--fg-3); }
.onde-barra { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.onde-barra span { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--calor); }
.onde-resto { list-style: none; padding: 14px 0; border-top: 1px solid var(--linha); font-size: 14px; color: var(--fg-2); }
.onde-resto b { color: var(--fg); }
#onde-lista li { list-style: none; }

.pessoa { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.pessoa .resultado-desc { font-size: 14px; }
.pessoa-valores { display: flex; gap: 10px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.pessoa-valores .entrou { color: var(--bom); }

/* A lente pode ficar posicionada fora da grade depois de um resize (invisível, mas ocupando
   espaço): clip no .app corta a sobra sem criar barra de rolagem horizontal. */
.app { overflow-x: clip; }

/* Ranking: uma linha por item; o nome inteiro fica no title. */
.onde .resultado-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.onde .onde-barra { white-space: normal; }
.busca-mes-volta { color: var(--bom); }

@media (max-width: 640px) {
  .filtros { gap: 2px; }
  .filtros > button { padding: 0 10px; }
}

.curto { display: none; }
@media (max-width: 640px) { .curto { display: inline; } }

/* Folhas: o cabeçalho, avisos e formulários não encolhem (encolher sobrepunha o aviso ao
   "Seu CPF"); a lista é quem rola — min-height: 0 deixa o flex:1 encolher e rolar. */
.folha > * { flex-shrink: 0; }
.folha > .itens { flex-shrink: 1; min-height: 0; }
#folha-import > * { flex-shrink: 0; }


/* Parte 4: menos ruído */
.resumo-rotulo .falta { color: var(--calor); }
.total-btn { all: unset; cursor: pointer; border-radius: 12px; }
.total-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.total-btn:focus-visible { outline: 2px solid #0a84ff; outline-offset: 4px; }
.tema-linha { display: flex; align-items: center; justify-content: space-between; margin: 16px 16px 0 0; font-size: 14px; font-weight: 600; }
.tema-linha .tema { --lg-size: 44px !important; }

/* hidden vence o display:grid do .item (o grupo "Entre suas contas" fechado) */
.item[hidden] { display: none; }
/* O valor grande é clicável: seta discreta sempre visível */
.total-btn .seta-total { display: inline-block; width: 22px; height: 22px; margin-left: 6px; vertical-align: 6px; opacity: .45; }
.total-btn:hover .seta-total, .total-btn:focus-visible .seta-total { opacity: .9; }

/* Recorrência e lançamento manual */
.novo-lanc { align-self: flex-start; margin: 8px 0 4px; height: 44px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 550;
  color: var(--fg); background: transparent; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 10px; cursor: pointer; }
.novo-lanc:hover { background: rgba(127, 127, 127, .12); }
.novo-lanc:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.novo-lanc[hidden] { display: none; }
.form-lanc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 12px 16px 4px 0; }
.lanc-par { display: grid; gap: 4px; min-width: 0; align-content: start; }
.lanc-par--cheio { grid-column: 1 / -1; }
.lanc-par > label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.lanc-par .lanc-campo { width: 100%; }
/* Com o form aberto a folha cresce até o limite da tela e rola inteira; a lista guarda uma altura mínima. */
.folha:has(.form-lanc:not([hidden])) { max-height: calc(100dvh - 16px); overflow-y: auto; }
.folha:has(.form-lanc:not([hidden])) > .itens { flex: 0 1 auto; min-height: 136px; border-bottom: 1px solid var(--linha); }
.form-lanc[hidden] { display: none; }
.lanc-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lanc-campo { height: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 10px;
  background: var(--celula); color: var(--fg); font: inherit; font-size: 14px; min-width: 0; }
.lanc-linha .lanc-campo { flex: 1 1 100px; }
.lanc-campo:focus-visible, .lanc-salvar:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.lanc-rec { font-size: 14px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.lanc-rec:focus-within { outline: 2px solid #0a84ff; outline-offset: 2px; }
.lanc-rec input { width: 20px; height: 20px; margin: 0; }
.lanc-salvar { height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
.lanc-erro { margin: 0; font-size: 13px; color: var(--calor); min-height: 0; }

/* ── gate de login ───────────────────── */
/* Tela cheia antes da sessão: o app inteiro fica escondido até entrar. */
.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px;
}
.gate[hidden] { display: none; }
.gate-cartao {
  width: min(92vw, 360px);
  padding: 32px 28px;
  display: grid; gap: 14px;
  text-align: center;
}
.gate-logo { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.gate-sub { margin: -8px 0 6px; font-size: 14px; color: var(--fg-2); }
.gate-campo {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 12px;
  background: var(--paper-0); color: var(--fg); font: inherit;
}
.gate-campo:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.gate-turnstile { min-height: 0; }
.gate-entrar {
  height: 48px; border: 0; border-radius: 12px;
  background: var(--fg); color: var(--bg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.gate-entrar:disabled { opacity: .6; }
.gate-erro { margin: 0; font-size: 13px; color: var(--calor); min-height: 18px; }

/* ── vistas (Meu / parceiro / Ambos) ──── */
/* Mesma cara da barra de filtros; o seletivo vem do [aria-checked] de .filtros. */
.vistas { margin-bottom: 8px; }
/* Celular: vistas + filtros + busca não cabem numa linha; vistas ganham a linha toda. */
@media (max-width: 640px) {
  .linha-filtros { flex-wrap: wrap; }
  .vistas { width: 100%; margin-bottom: 0; }
  .vistas > button { flex: 1; }
}

/* ── marcações por item ───────────────── */
/* Mesma pílula do "↻ todo mês": privada em coral, casal em verde. */
/* Item privado: só o dono vê; o cadeado lembra por quê. */
.item--privado .item-desc::after { content: '🔒'; font-size: 11px; margin-left: 4px; }
/* Quem lançou, na vista "Ambos": etiqueta curta, cor neutra. */
.item-de {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 6px; font-size: 11px; font-weight: 600; vertical-align: 1px;
  background: rgba(127, 127, 127, .16); color: var(--fg-2);
}

/* ── folha "Do casal" ────────────────── */
/* Total grande como nas outras folhas; a divisão vai embaixo, em texto normal. */
.casal-divisao { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.casal-form { margin: 16px 16px 0 0; display: grid; gap: 10px; }
.casal-nota { margin: 0; font-size: 12px; color: var(--fg-2); }
.casal-linha { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.casal-linha label { font-weight: 600; }
.casal-linha .lanc-campo { height: 40px; flex: 1; max-width: 160px; }

/* ── troca de vista: o calendário velho fica atrás, o novo chega em arco ── */
.app { position: relative; }
.cal { position: relative; z-index: 1; transform-origin: 50% 170%; }
.cal--velho { position: absolute; margin: 0; z-index: 0; pointer-events: none; transform-origin: 50% 170%; }

/* ── topo compacto no celular (item 1 do loop) ──
   Alvo: o calendário começa mais alto. Mesmos controles, alvo de toque de 44px.
   .acoes e .linha-filtros viram "contents": os 6 controles dividem um só flex-wrap,
   e a busca sobe para a linha do mês. O --lg-size inline perde para !important. */
@media (max-width: 640px) {
  .app { padding-top: 16px; }
  .topo { gap: 10px; margin-bottom: 12px; }
  .resumo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .resumo-rotulo, .resumo-entrou { flex-basis: 100%; }
  .resumo-total { font-size: 38px; margin: 0 !important; }
  .resumo-meta { flex: 1 1 auto; margin: 0 !important; }
  .total-btn { display: inline-block; min-height: 44px; line-height: 44px; margin: -3px 0; }
  .resumo-entrou { margin-bottom: 0 !important; }
  .lado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .acoes, .linha-filtros { display: contents; }
  .topo .lg { --lg-size: 48px !important; }
  .mes-nav { flex: 1 1 0; min-width: 0; }
  .importar { width: 48px; }
  .vistas { width: 100%; margin: 0; }
  .linha-filtros > .filtros:not(.vistas) { flex: 1 1 100%; }
  .filtros > button { flex: 1; }
  .mes-nav > button:not(.mes-nome) { flex: 0 0 44px; }
  .contexto { gap: 6px; }
}

/* ── topo compacto no tablet e no desktop (item 2 do loop) ──
   Mesmo método do celular: .acoes e .linha-filtros viram "contents" e os 6 controles
   dividem um flex-wrap em 2 linhas (mês, tema, importar, busca / vistas, filtros).
   Nenhum texto de botão quebra. A seta fica no total (nowrap). */
@media (min-width: 641px) {
  .total-btn, .filtros > button, .mes-nome, .importar { white-space: nowrap; }
  .lado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
  .acoes, .linha-filtros { display: contents; }
  .mes-nav > .mes-nome { min-width: 112px; }
  .resumo-total { font-size: 48px; margin: 2px 0 !important; }
  .total-btn .seta-total { vertical-align: 4px; }
  .resumo-entrou { font-size: 13px; margin-bottom: 0 !important; }
}
/* Tablet: sem espaço para dois blocos lado a lado. Resumo em cima, controles embaixo. */
@media (min-width: 641px) and (max-width: 899px) {
  .topo { grid-template-columns: 1fr; gap: 12px; }
  .lado { justify-content: flex-start; }
  .resumo { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: end; }
  .resumo-rotulo { grid-column: 1 / -1; }
  .resumo-total { grid-column: 1; grid-row: 2 / 4; align-self: center; }
  .resumo-meta, .resumo-entrou { grid-column: 2; margin: 0 !important; }
  .resumo-meta { grid-row: 2; align-self: end; min-height: 0; }
  .resumo-entrou { grid-row: 3; align-self: start; }
}
@media (min-width: 900px) {
  .topo { grid-template-columns: minmax(0, 1fr) 632px; }
}

/* ── linha de contexto numa linha só no tablet (item 3 do loop) ──
   Aviso de dado velho, chip Casal e chip Rótulos somam ~800px; a faixa tem 720px.
   Só entre 641 e 899px o aviso fica curto: "Até 8/out" (.ctx-c) no lugar de
   "Último lançamento 8/out" (.ctx-x), e "novo" sai. */
.ctx-c { display: none; }
@media (min-width: 641px) and (max-width: 899px) {
  .ctx-x { display: none; }
  .ctx-c { display: inline; }
}

/* ── topo da grade fixo na troca de vista, no celular (item 5 do loop) ──
   A linha do aviso de dado velho (.ctx--comp) fica reservada mesmo vazia: em Parceira/Ambos o aviso
   some e a grade pulava 26px no meio do giro. Na troca de mês a grade pode mudar de lugar: reservar
   as 2 linhas de chip deixava 88px vazios em todo mês sem chip (item 12, decidido 2026-10-18). */
@media (max-width: 640px) {
  .ctx--comp { flex-basis: 100%; min-height: 20px; }
  .ctx--comp:empty { display: block; }
}

/* ── alvos de toque de 44px (item 6 do loop) ──
   Só a área clicável cresce (::after), o visual e a altura do topo ficam. Fora do celular os chips
   ficam lado a lado e cada alvo cresce 12px para cima e para baixo. No celular os 3 alvos ficam em
   pilha com 6px entre eles (importe 278-298, Casal 304-332, Rótulos 342-362): não cabe 44px em cada
   um sem sobrepor. Casal fica com 44 (298-342), Rótulos cresce só para baixo, no espaço vazio antes
   da grade (342-386), e "importe" fica com 30px (268-298: acima dele estão os botões de filtro). */
#comp-mes .link { position: relative; }
#comp-mes .link::after { content: ''; position: absolute; inset: -12px -4px; }
@media (max-width: 640px) {
  #comp-mes .link::after { inset: -10px -4px 0; }
  #casal-mes::after { inset: -6px 0 -10px; }
  .ctx-rot::after { inset: 0 -4px -24px; z-index: 2; } /* passa por cima de .cal (z-index 1), que começa 12px abaixo do topo */
}

/* ── topo no desktop (item 7 do loop) ──
   Coluna dos controles de 632 para 568px, para as frases do resumo ("só a conta, falta o
   cartão", "Entrou: extrato da conta não importado") caberem em 1 linha (~280px).
   As 2 linhas de controles usam space-between: mesma borda esquerda e direita.
   Botões dos filtros com 12px de padding (era 16) e vistas sem margem: mesma linha de base. */
@media (min-width: 900px) {
  .topo { grid-template-columns: minmax(0, 1fr) 568px; }
  .lado { justify-content: space-between; gap: 12px 8px; }
  .filtros > button { padding: 0 12px; }
  .vistas { margin-bottom: 0; }
}

/* ── item 8: folhas ───────────────────── */
/* Etiquetas do item (rótulo, todo mês, salário, privado, casal) numa linha própria,
   alinhadas com o texto do item, com o mesmo espaço entre elas. */

/* Folha do casal: rótulo e campo na mesma grade; "R$" dentro do campo do salário. */
.casal-form { grid-template-columns: auto minmax(0, 160px); justify-content: start; column-gap: 12px; align-items: center; }
.casal-form > .casal-nota, .casal-form > .lanc-linha { grid-column: 1 / -1; }
.casal-linha { display: contents; }
.casal-linha .lanc-campo { max-width: none; width: 100%; }
.casal-campo { position: relative; display: block; }
.casal-campo::before { content: attr(data-un); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--fg-2); pointer-events: none; }
.casal-campo .lanc-campo { padding-left: 38px; }

/* Folha ao lado (tela acima do celular): altura pelo conteúdo, até o limite da tela.
   A lista do dia continua rolando: .itens encolhe (flex-shrink 1) quando bate no max-height. */
@media (min-width: 641px) {
  .folha { bottom: auto; max-height: calc(100dvh - 32px); }
}
/* De 641 a 1331px a folha cobre a grade: o véu escurece o fundo.
   Desde 1332px a grade desliza para o lado (body.com-folha), então não precisa de véu. */
@media (min-width: 641px) and (max-width: 1331px) {
  .veu { display: block; }
  /* Item 23: o botão Importar é claro; o blur da folha (saturate + brightness) o transforma numa mancha
     atrás do vidro, mesmo sob o véu. Sob o véu ele some (a folha tem o foco), sem mexer no vidro. */
  .importar { transition: opacity 240ms ease; }
  body.com-folha .importar { opacity: 0; pointer-events: none; }
}

/* Celular: 16px nos campos evita o zoom automático do Safari do iPhone ao focar. */
@media (max-width: 640px) {
  .lanc-campo, .busca, .cpf input, .rotulo-campo, .gate-campo { font-size: 16px; }
  .rotulo-campo { height: 32px; }
  .casal-campo::before { font-size: 16px; }
  .casal-campo .lanc-campo { padding-left: 42px; }
}

/* Tema claro: texto das marcas ligadas mais escuro (casal 4,15:1 → ≥5:1). O escuro não muda. */
:root[data-theme="light"] .etq--casal { color: color-mix(in srgb, var(--bom) 72%, #000); }

/* Item 22: a linha mostra só etiquetas do que está ligado; as ações ficam no menu "…" (44x44).
   Sem espaço reservado para ações ocultas, em qualquer tela. */
.item-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.item-acoes:not(:has(*)) { display: none; }
.item-acoes > .rotulo, .item-acoes > .rotulo-campo { margin-left: 0; }
.etq { padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 18px;
  background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
.etq--casal { background: color-mix(in srgb, var(--bom) 18%, transparent); color: var(--bom); }
.item--menu { grid-template-columns: 36px 1fr auto 44px; gap: 12px 8px; }
.item--menu .item-banco { margin-right: 4px; }
.acoes-menu { position: relative; }
.acoes-menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; list-style: none;
  font-size: 20px; line-height: 1; color: var(--fg-2); cursor: pointer; user-select: none; }
.acoes-menu summary::-webkit-details-marker { display: none; }
.acoes-menu summary:hover, .acoes-menu[open] summary { background: rgba(127, 127, 127, .16); color: var(--fg); }
.acoes-menu summary:focus-visible, .acao:focus-visible { outline: 2px solid #0a84ff; outline-offset: -2px; }
.acoes-lista { position: absolute; z-index: 5; top: 44px; right: 0; width: min(240px, calc(100vw - 48px)); padding: 4px;
  display: grid; background: var(--bg); border: 1px solid var(--fg-3); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.acao:hover { background: rgba(127, 127, 127, .16); }
.acao-est { font-size: 12px; color: var(--fg-2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acao[aria-pressed="true"] .acao-est { color: var(--bom); font-weight: 600; }
.acao--apagar { color: var(--calor); }
.link#lanc-cancelar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

/* ── item 15: topo no tablet (641-899px) ──
   Mesmo método do item 7: as 2 linhas de controles usam space-between, com a mesma borda
   esquerda e direita da grade; vistas sem margem, na mesma linha de base dos filtros. */
@media (min-width: 641px) and (max-width: 899px) {
  /* O mês e as vistas crescem para encher a linha: com space-between os botões ficavam soltos. */
  .lado { justify-content: flex-start; }
  /* Item 26: a pílula do mês tem teto de 320px (setas perto do nome). O espaço que sobra na linha 1
     vai para o botão Importar (flex-grow), então a linha fica cheia e as vistas descem para a linha 2. */
  .mes-nav { flex: 0 1 320px; max-width: 320px; justify-content: space-between; }
  .importar { flex: 1 1 auto; justify-content: center; }
  .vistas { flex: 1 0 auto; } /* sem encolher: assim ela quebra a linha em vez de espremer */
  .vistas > button { flex: 1; }
  .vistas { margin-bottom: 0; }
}

/* ── item 20: rótulo do resumo numa linha em ≥900px ──
   "Saiu em outubro · Parceira · só a conta, falta o cartão" passa dos 280px do resumo e quebra.
   A vista ativa já aparece marcada nos botões (Meu/Parceiro/Ambos) ao lado; o sufixo some da tela
   só aqui, mas o leitor de tela continua lendo (mesmo recorte do .sr-only). */
@media (min-width: 900px) {
  .vista-suf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Item 16: com "Ajustes e dados" aberto a folha de importar cresce até a tela (a lente de vidro não rola com o conteúdo). */
@media (max-width: 640px) { #folha-import { max-height: calc(100dvh - 16px); } }

/* Item 24 (celular): a folha do casal cresce até o limite da tela antes de a lista rolar (antes o teto
   de 72dvh cortava o 3º item com tela sobrando). A 2ª coluna fica com 148px: "99.999,00" a 16px
   (~80px) + prefixo "R$" de 42px + 12px à direita + borda cabe sem cortar o último dígito. */
@media (max-width: 640px) {
  #folha-casal { max-height: calc(100dvh - 16px); }
  .casal-form { grid-template-columns: minmax(0, 1fr) 148px; }
}

/* Item 27: no toque não há arrastar; o texto vira o botão "Escolher arquivo CSV" e a área encolhe. */
.so-toque { display: none; }
@media (pointer: coarse) {
  .so-toque { display: inline; }
  .so-mouse { display: none; }
  .soltar { min-height: 120px; }
}

/* Item 28: o "R$" de 11px das células no escuro (--fg-3 dava 4,22:1) sobe para 4,5:1 ou mais. O claro não muda. */
:root[data-theme="dark"] .dia-valor small { color: #8a909b; }