/* ==========================================================================
   FinanKey 4.0 - Materiais
   Carregado DEPOIS de components.css.

   Superfícies limpas: preto fosco, borda de 1px, sombra curta. Sem borda
   brilhante, sem reflexo especular, sem refração.

   A única coisa que acende na tela é o dado — barras, anel, medidores.
   Por isso o brilho chama atenção: ele não está em todo lugar.
   ========================================================================== */

:root {
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.1);
  --elev-3: 0 16px 44px rgba(0, 0, 0, 0.18);

  --inset-1: inset 0 1px 2px rgba(0, 0, 0, 0.07);
  --inset-2: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --elev-1: 0 1px 3px rgba(0, 0, 0, 0.55);
    --elev-2: 0 4px 14px rgba(0, 0, 0, 0.6);
    --elev-3: 0 20px 56px rgba(0, 0, 0, 0.75);

    --inset-1: inset 0 1px 2px rgba(0, 0, 0, 0.55);
    --inset-2: inset 0 2px 6px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  --elev-1: 0 1px 3px rgba(0, 0, 0, 0.55);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.6);
  --elev-3: 0 20px 56px rgba(0, 0, 0, 0.75);

  --inset-1: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  --inset-2: inset 0 2px 6px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Fundo
   Preto liso. Com WebGL, o canvas do buraco negro se sobrepõe (ui/cosmos.js).
   ========================================================================== */
body {
  background-color: var(--bg);
}

/* Véu sobre o fundo animado: ele é cenário, não protagonista. */
:root[data-cosmos="live"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.4) 0%,
    rgba(10, 10, 10, 0.72) 50%,
    rgba(10, 10, 10, 0.92) 100%
  );
}

/* ==========================================================================
   Superfícies
   ========================================================================== */
.card,
.balance {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
}

.card--flat {
  background: var(--surface-2);
  box-shadow: none;
}

.card--inset {
  background: var(--surface-inset);
  border-color: transparent;
  box-shadow: none;
}

.month-switch,
.quick__item {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--elev-1);
}
.quick__item:active {
  background: var(--surface-2);
  transform: scale(0.98);
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  box-shadow: var(--elev-1);
}
.btn--primary:active:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(0.99);
  box-shadow: none;
}

.btn--secondary {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}
.btn--secondary:active:not(:disabled) {
  background: var(--surface-3);
  transform: scale(0.99);
}

.btn--danger {
  background: var(--negative);
  color: #1a0508;
  border: none;
}

/* ==========================================================================
   Segmentado
   Trilho escavado, seletor como uma peça sólida mais clara. Sem anel de luz:
   quem indica a seleção é o contraste da superfície e o peso do texto.
   ========================================================================== */
.segmented {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  box-shadow: var(--inset-1);
  padding: 4px;
}

.segmented__item {
  color: var(--text-3);
}
.segmented__item[aria-selected="true"] {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--elev-1);
  border: none;
}

/* ==========================================================================
   Campos
   ========================================================================== */
.input,
.select,
.textarea,
.money-field {
  background: var(--surface-inset);
  border-color: var(--border);
  box-shadow: none;
}
.input:focus,
.select:focus,
.textarea:focus,
.money-field:focus-within {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ==========================================================================
   Interruptor
   Trilho fundo e escuro; o botão é uma peça branca sólida que desliza.
   ========================================================================== */
.switch__track {
  width: 3rem;
  height: 1.75rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: var(--inset-1);
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.switch__track::after {
  top: 3px;
  left: 3px;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--text-3);
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.switch[aria-checked="true"] .switch__track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch[aria-checked="true"] .switch__track::after {
  background: var(--accent-contrast);
  transform: translateX(1.25rem);
}

/* Caixa de seleção segue o mesmo desenho do interruptor. */
.checkbox {
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: none;
}
.checkbox--on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

/* ==========================================================================
   Pastilhas e emblemas
   Cor chapada: o que identifica é o ícone, não o brilho.
   ========================================================================== */
.cat-icon,
.list__icon,
.quick__icon,
.empty__icon {
  background-image: none;
  box-shadow: none;
}
.cat-icon::after,
.quick__icon::after {
  display: none;
}

.chip {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--accent-soft);
  border-color: var(--border-strong);
  box-shadow: none;
}

.badge {
  box-shadow: none;
  border: 1px solid var(--border);
}

.accent-dot {
  background-image: none;
  box-shadow: none;
}

.installment-no {
  background: var(--surface-3);
  box-shadow: none;
}
.installment-no--paid {
  box-shadow: none;
}

.stepper {
  background: var(--surface-inset);
  box-shadow: var(--inset-1);
}

.month-pill {
  background: var(--surface-inset);
  box-shadow: none;
}

.budget-row {
  background: var(--surface-inset);
}

/* ==========================================================================
   Cabeçalho, navegação, sheet
   O desfoque fica só aqui, onde o conteúdo passa por baixo ao rolar.
   ========================================================================== */
.app-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}

.app-nav {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
.nav-item[aria-current="page"]::before {
  box-shadow: none;
}

.sheet {
  background: var(--surface);
  box-shadow: var(--elev-3);
}
.sheet__foot {
  background: var(--surface);
  border-top: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sheet__handle {
  background: var(--border-strong);
  box-shadow: none;
}

.fab {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--elev-2);
  text-shadow: none;
}
.fab:active {
  background: var(--accent-hover);
  transform: scale(0.97);
  box-shadow: var(--elev-1);
}

.toast {
  box-shadow: var(--elev-3);
}

/* ==========================================================================
   Neon — reservado ao dado
   ========================================================================== */
.donut > svg {
  filter: drop-shadow(0 0 5px rgba(250, 250, 250, 0.18));
}

.chart > svg rect[fill^="var(--positive"] {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--positive) 60%, transparent));
}
.chart > svg rect[fill^="var(--negative"] {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--negative) 60%, transparent));
}

.sparkline > svg path:last-of-type,
.sparkline > svg circle {
  filter: drop-shadow(0 0 4px currentColor);
}

.meter {
  background: var(--surface-inset);
  box-shadow: var(--inset-1);
}
.meter__fill {
  background-image: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.meter__fill--pos {
  box-shadow: 0 0 8px color-mix(in srgb, var(--positive) 50%, transparent);
}
.meter__fill--warn {
  box-shadow: 0 0 8px color-mix(in srgb, var(--warning) 50%, transparent);
}
.meter__fill--neg {
  box-shadow: 0 0 8px color-mix(in srgb, var(--negative) 50%, transparent);
}

.legend__swatch {
  box-shadow: 0 0 5px currentColor;
}
.share-bar {
  background: var(--surface-inset);
  box-shadow: none;
}
.share-bar__seg {
  background-image: none;
  box-shadow: 0 0 5px currentColor;
}

/* ==========================================================================
   Canvas do fundo animado
   ========================================================================== */
.cosmos-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  animation: fk-cosmos-in 900ms var(--ease-out) both;
}

@keyframes fk-cosmos-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root[data-theme="light"] .cosmos-canvas {
  display: none;
}

/* O SVG de filtros não ocupa espaço. */
.glass-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
}

/* ==========================================================================
   Degradações
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .app-header,
  .app-nav {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .card,
  .balance,
  .sheet,
  .month-switch,
  .quick__item {
    border-color: var(--border-strong);
  }
  .donut > svg,
  .chart > svg rect,
  .sparkline > svg path,
  .sparkline > svg circle {
    filter: none;
  }
  .meter__fill,
  .legend__swatch,
  .share-bar__seg {
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Alertas
   O tema é monocromático, mas alerta é significado, não decoração: ele
   precisa se destacar. A superfície continua escura; quem carrega o aviso é
   a barra lateral e o ícone.
   -------------------------------------------------------------------------- */
.alert {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  color: var(--text);
}

.alert--negative {
  border-left-color: var(--negative);
  background: color-mix(in srgb, var(--negative) 7%, var(--surface));
}
.alert--negative .alert__icon {
  background: color-mix(in srgb, var(--negative) 20%, transparent);
  color: var(--negative);
}

.alert--warning {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}
.alert--warning .alert__icon {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
}

.alert--accent {
  border-left-color: var(--accent);
  background: var(--surface);
}
.alert--accent .alert__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.alert__text {
  color: var(--text-2);
  opacity: 1;
}

/* O sparkline brilha menos: uma série quase plana com halo forte lê como
   barra acesa, não como linha. */
.sparkline > svg path:last-of-type,
.sparkline > svg circle {
  filter: drop-shadow(0 0 3px currentColor);
}

/* A linha de contexto não quebra: alturas irregulares na lista atrapalham
   mais do que um rótulo cortado. O esmaecimento na ponta faz o corte parecer
   proposital, e não conteúdo quebrado. */
.list__meta {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.list__meta > * {
  flex: none;
}

/* --------------------------------------------------------------------------
   Comparação com o mês anterior
   -------------------------------------------------------------------------- */
.compare {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.compare svg {
  flex: none;
}
.compare strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.compare--up {
  color: var(--negative-text);
}
.compare--up strong {
  color: var(--negative);
}
.compare--down {
  color: var(--positive-text);
}
.compare--down strong {
  color: var(--positive);
}

/* --------------------------------------------------------------------------
   Conta somada na calculadora: confirmação que some sozinha
   -------------------------------------------------------------------------- */
.list__add {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex: none;
  color: var(--text-3);
  background: var(--surface-3);
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.list__item--added {
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}
.list__item--added .list__add {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* A folha nunca rola de lado: uma faixa que estoura a largura vira barra
   horizontal e desalinha o formulário inteiro. */
.sheet__body {
  overflow-x: hidden;
}

/* ==========================================================================
   Acabamento de banco

   O app tinha fundo animado, lâminas de vidro e brilho de borda. Bonito de
   olhar por dez segundos, ruim de usar todo dia: o fundo competia com o
   número que a pessoa abriu o app para ver, e o vidro deixava tudo com o
   mesmo peso visual — nada se destacava.

   Banco é o oposto disso. Superfície sólida, hierarquia por tamanho e
   espaço, cor só onde ela significa alguma coisa (entrou / saiu).
   ========================================================================== */

/* O canvas do buraco negro e o véu que o acompanhava saíram do código. */
.cosmos-canvas { display: none !important; }
body::after { display: none !important; }

/* ---- Superfícies ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card--inset {
  background: var(--surface-2);
  border-color: var(--border);
}

/* ---- Respiro --------------------------------------------------------
   "Muita coisa colada" era isto: um gap de 1rem servia tanto para separar
   seções inteiras quanto para separar linhas dentro de um cartão. Seção
   pede mais ar que linha. */
.app-main { gap: var(--sp-6); }
.section { gap: var(--sp-4); }
.card { padding: var(--sp-5); }
.card--pad-sm { padding: var(--sp-4); }

/* ---- O saldo, do jeito que banco mostra ------------------------------
   Rótulo pequeno em caixa alta, número grande, e o resto abaixo de um
   traço. O olho vai ao número em vez de varrer o cartão. */
.balance {
  padding: var(--sp-6) var(--sp-5);
}
.balance__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.balance__value {
  font-size: clamp(2.25rem, 11vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: var(--sp-2);
}
.balance__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.balance__split {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  gap: var(--sp-4);
}
.balance__cell-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

/* ---- Extrato ---------------------------------------------------------
   Linhas mais altas e um filete entre elas, como fatura. O toque fica
   confortável e a lista para de parecer um bloco só. */
.list__item {
  min-height: 3.5rem;
  padding-block: var(--sp-3);
}
.list__item + .list__item {
  border-top: 1px solid var(--border);
}
.list__title {
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.list__amount {
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

/* ---- Atalhos ---------------------------------------------------------
   Eram três blocos escuros iguais; viram botões de superfície com borda,
   que é o que um banco põe embaixo do saldo. */
.quick__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* ---- Barra inferior --------------------------------------------------
   Sem desfoque: sobre fundo liso ele só embaça a borda e custa GPU. */
.app-nav {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--border);
  box-shadow: none;
}
.app-header {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- Avisos ----------------------------------------------------------
   Eram cartões altos com duas linhas de explicação cada. Empilhados, ocupavam
   mais tela que o saldo. Viram uma linha só: motivo à esquerda, valor à
   direita, e a explicação some — quem toca já vai ver o detalhe. */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  align-items: center;
}
.alert__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.alert__text {
  display: none;
}

/* ---- Seletor de mês --------------------------------------------------
   Fica como cabeçalho do extrato, não como cartão flutuante. */
.month-switch {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ---- Linha do extrato ------------------------------------------------
   O "em aberto" saía cortado ("em ab…") quando a linha já tinha o selo de
   parcela. A regra antiga proibia quebra e escondia o excesso — mas informação
   cortada é pior que linha de altura variável: a pessoa não sabe se a conta
   está paga. Agora envolve para a linha de baixo quando não couber. */
.list__meta {
  flex-wrap: wrap;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  row-gap: 2px;
}

/* O botão flutuante cobria o valor da última linha. A folga já existia
   (--sp-16, 4rem), só não bastava: o botão tem 3rem de altura e ainda se
   afasta do rodapé, então 4rem mal cobria o próprio botão e nada sobrava
   entre ele e a última linha. */
.app-main:has(.fab) {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 5.5rem);
}

/* ---- Gráficos sem neon ------------------------------------------------
   O halo em volta das barras era o que restava do tema cósmico. Sobre fundo
   liso ele borra a borda da barra e faz duas barras vizinhas parecerem uma
   mancha só — justamente onde a leitura precisa ser exata. Banco desenha
   barra chapada; quem dá a escala é a guia, não o brilho. */
.chart > svg rect[fill^="var(--positive"],
.chart > svg rect[fill^="var(--negative"],
.donut > svg,
.sparkline > svg path:last-of-type,
.sparkline > svg circle {
  filter: none;
}

/* A altura vinha do viewBox de 168 e sobrava; 148 já dá proporção de leitura
   e devolve tela para a lista de lançamentos, que é o que se olha depois. */
.chart svg {
  max-height: 168px;
}

/* ---- Barras dos meses -------------------------------------------------
   O SVG estica na largura ("preserveAspectRatio: none") e a altura fica
   fixa. Os nomes dos meses saíram de dentro dele para não esticarem junto:
   uma grade de colunas iguais alinha cada nome sob o seu par de barras. */
.chart > svg {
  width: 100%;
  height: 132px;
  max-height: none;
  display: block;
}
.chart__labels {
  display: grid;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-align: center;
}
.chart {
  display: block;
}


/* ==========================================================================
   Acabamento: sóbrio e macio

   Sai a linguagem técnica (canto vivo, monoespaçada, grade), entra um
   tratamento mais caro: canto generoso, superfície que se levanta do fundo
   por sombra em camadas em vez de borda dura, e um par tipográfico.

   O par é o que mais muda a impressão. Números e títulos ganham uma serifada
   — é o que private banking usa, e num app onde o número é o protagonista ela
   dá peso sem precisar aumentar a fonte. O resto da interface fica na sans
   do sistema, que é onde ela é melhor: rótulo, botão, texto pequeno.

   A serifada vem primeiro na lista de propósito. Numa versão anterior a
   Segoe UI Variable Display estava na frente, e no Windows ela vencia: o
   comentário prometia serifada e a tela mostrava sans.
   ========================================================================== */

:root {
  /* Nenhuma fonte externa: o CSP não permite, e baixar arquivo de fonte
     atrasaria a primeira pintura. As duas famílias já estão no aparelho. */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", Georgia, Cambria, serif;
  --font-sans: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-lg: 20px;
  --r-xl: 26px;

  /* Sombra em três camadas: contato, difusa e ambiente. Uma sombra só,
     forte, faz o cartão parecer adesivo colado; três fazem ele parecer
     apoiado. */
  --elev-lux:
    0 1px 1px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.22),
    0 20px 48px rgba(0, 0, 0, 0.26);
}

/* ---- Superfícies ------------------------------------------------------
   O fio branco no topo é o truque antigo de material caro: simula a luz
   batendo na quina de cima e separa o cartão do fundo sem borda visível. */
.card,
.balance {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-lux), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.022) 0%,
    rgba(255, 255, 255, 0) 42%
  );
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .balance {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.05),
    0 20px 44px rgba(0, 0, 0, 0.05);
  background-image: none;
}

.balance {
  border-radius: var(--r-xl);
}

/* ---- Tipografia ------------------------------------------------------- */
.balance__value,
.t-display,
.t-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.balance__value {
  font-size: clamp(2.4rem, 12vw, 3rem);
  line-height: 1.02;
}

/* Rótulo pequeno perde a caixa alta apertada: espaçamento menor e peso
   normal leem como legenda, não como etiqueta de formulário. */
.t-label,
.balance__label {
  letter-spacing: 0.07em;
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xs);
}

/* Valores continuam com dígito de largura fixa — sem isso a coluna da
   direita dança a cada linha — mas na sans, que é mais discreta. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* Emblema volta a ser pastilha macia. */
.badge {
  border-radius: var(--r-full);
  text-transform: none;
  letter-spacing: 0;
  background: var(--surface-3);
  border: none;
}

/* ---- Gráfico dos meses ------------------------------------------------
   A proporção casa com o viewBox, então o desenho preenche a caixa sem
   esticar e o canto das barras sai redondo. O limite de largura é
   deliberado: num cartão de 880px, barra esticada de ponta a ponta parece
   painel de controle, não resumo. */
.chart > svg {
  width: 100%;
  aspect-ratio: 320 / 140;
  height: auto;
  max-height: none;
  display: block;
  margin-inline: auto;
}
.chart {
  max-width: 30rem;
  margin-inline: auto;
}
.chart__labels {
  max-width: 30rem;
  margin-inline: auto;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Séries dos gráficos em preto e branco

   Verde e vermelho saíram do desenho. Eles continuam onde significam algo
   pontual — o valor de uma linha do extrato, o saldo negativo — mas num
   gráfico eles viravam decoração: as duas barras já estão lado a lado e
   rotuladas, então a cor não estava informando nada que a posição não diga.

   A distinção passa a ser por claridade, e não por matiz. De quebra é a
   separação que funciona para quem não distingue vermelho de verde —
   justamente o par que o desenho anterior usava.
   ========================================================================== */
:root {
  --series-in: #171717;
  --series-out: #9a9a9a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-in: #fafafa;
    --series-out: #7d7d7d;
  }
}
:root[data-theme="dark"] {
  --series-in: #fafafa;
  --series-out: #7d7d7d;
}

/* As regras que tiravam o brilho miravam o fill antigo; seguem os nomes
   novos para não voltarem a acender caso alguém reintroduza o filtro. */
.chart > svg rect[fill^="var(--series"],
.chart > svg rect[fill^="var(--positive"],
.chart > svg rect[fill^="var(--negative"] {
  filter: none;
}

/* Saldo do mês anterior: pequeno, acima do rótulo, deliberadamente discreto.
   É referência, não protagonista — se competisse com o número grande,
   pareceria que os dois meses se somam, que é justamente o que não acontece. */
.balance__carry {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Impressão

   POR QUE ISTO ESTAVA SAINDO EM BRANCO

   A versão anterior escondia o app inteiro e mostrava, no lugar, um documento
   próprio de classe .print-doc. Aí o PDF passou a ser montado dentro do app
   por core/pdf.js, e o código que criava esse .print-doc foi embora — mas o
   CSS que escondia o app ficou.

   Resultado: "Compartilhar → Imprimir" no Safari escondia tudo e não mostrava
   nada no lugar. Uma folha branca com o endereço no rodapé, que foi exatamente
   o que apareceu.

   O desenho agora é o oposto e não tem como apodrecer sozinho: imprime-se o
   que está na tela. Some só o que não faz sentido no papel — navegação,
   cabeçalho fixo, botões, avisos — e o conteúdo continua lá. Se um dia alguma
   tela nova aparecer, ela já imprime.
   ========================================================================== */
@media print {
  /*
   * Interface que não vira papel: barra de baixo, cabeçalho fixo, botão
   * flutuante, avisos passageiros, e o rodapé de botões das folhas.
   */
  .app-nav,
  .app-header,
  .toast-host,
  .fab,
  .sheet-backdrop,
  .sheet__handle,
  .sheet__foot,
  .month-switch {
    display: none !important;
  }

  /*
   * Desfaz a trava de rolagem.
   *
   * Abrir uma folha põe o body em position:fixed com deslocamento negativo no
   * topo (lockScroll, em ui/overlay.js). Body fixo não gera fluxo de página: o
   * conteúdo existe no DOM e mesmo assim sai folha em branco.
   */
  html,
  body {
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }
  body {
    background-image: none !important;
    margin: 0 !important;
  }

  /*
   * Com uma folha aberta, ela É o documento: o resto do app fica atrás e não
   * interessa. Sem folha aberta, imprime-se a tela.
   */
  body:has(.sheet) .app {
    display: none !important;
  }

  .app,
  .app-main,
  .sheet,
  .sheet__body {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    inset: auto !important;
    transform: none !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Preto sobre branco: tema escuro no papel gasta tinta e sai ilegível. */
  .card,
  .card--inset,
  .list__item,
  .sheet {
    background: #fff !important;
    border-color: #ddd !important;
    color: #111 !important;
    box-shadow: none !important;
    /* Um cartão partido ao meio pela quebra de página é ilegível. */
    break-inside: avoid;
  }

  .t-caption,
  .t-muted,
  .list__meta {
    color: #555 !important;
  }

  .num,
  .list__amount {
    font-variant-numeric: tabular-nums;
  }

  /*
   * O que só existe para ser tocado não tem função no papel.
   *
   * "button" solto NÃO entra nesta lista: neste app metade do conteúdo é
   * clicável — o cartão da Conferência e a linha do extrato são <button>. Some
   * só o que é controle mesmo.
   */
  .btn,
  .chip,
  input,
  textarea,
  select,
  .switch {
    display: none !important;
  }

  /* Detalhe fechado esconderia justamente a evidência dos números. */
  details > div,
  details[open] > div {
    display: block !important;
  }
  summary {
    display: none !important;
  }

  .sheet__title {
    font-size: 16pt;
    color: #111 !important;
  }
  .sheet__subtitle {
    color: #555 !important;
  }

  @page {
    margin: 14mm;
  }
}

/* ---- Filhos de .row não podem estourar a largura --------------------------
   Item de flex nasce com min-width:auto, ou seja, nunca encolhe abaixo do seu
   tamanho natural. Campo de data e de hora têm largura intrínseca grande no
   iOS — resultado: a coluna da direita saía pela borda da tela.

   min-width: 0 é o que autoriza o encolhimento. Vale para toda .row, porque o
   padrão de duas colunas se repete em várias folhas. */
.row > * {
  min-width: 0;
}
.row input,
.row .input,
.row .field {
  width: 100%;
}

/* ---- Respiro entre blocos dentro das folhas -------------------------------
   Aqui moravam dois remendos: margem entre seções e entre cartão e campo,
   "porque o gap de .stack-sm era pequeno". Não era pequeno — não existia,
   porque .stack-sm não tinha display. Com a pilha consertada na raiz, as
   margens somariam ao gap e as folhas ficariam com buracos. */

/* ---- Campos de data, hora e valor no iOS ---------------------------------
   No iOS o input de data/hora vem com widget nativo, e ele carrega uma
   largura intrínseca própria que "width: 100%" não vence — o campo cresce
   além do cartão e vaza pela borda da tela. No Chrome do computador isso não
   acontece, e foi por isso que não apareceu no teste local.

   appearance: none desliga o widget nativo e devolve o controle do tamanho
   ao CSS. min-width: 0 autoriza encolher; max-width segura o teto. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* O widget de data do iOS ainda desenha um espaçamento interno próprio. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
  margin: 0;
}
input::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
}

/* Valores longos encolhem em vez de empurrar a linha para fora. */
.list__amount,
.balance__cell-value,
.stmt-head__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Rede de segurança: nada dentro de uma folha ultrapassa a largura dela. */
.sheet__body .card,
.sheet__body .field,
.sheet__body .input {
  max-width: 100%;
}

/* ---- Categoria e data na mesma linha --------------------------------------
   A data pede pouco espaço; os chips pedem todo o resto. */
.row--campos {
  align-items: flex-end;
  gap: var(--sp-3);
}
.field--cresce {
  flex: 1 1 auto;
  min-width: 0;
}
.field--data {
  /* Largura de "31 de dez. de 2026" mais folga — não cresce nem encolhe. */
  flex: 0 0 9.5rem;
  min-width: 0;
}

/* Dentro da linha os chips não sangram até a borda da folha: a margem
   negativa que faz isso jogaria o primeiro chip por baixo da data. */
.row--campos .cat-picker {
  margin-inline: 0;
  padding-inline: 0;
}

/* Cartões de ajuste precisam de mais ar entre si que linhas de uma lista:
   o gap da pilha dá --sp-2, e a margem completa até --sp-3. Antes esta regra
   carregava o espaço inteiro sozinha, porque o gap da pilha não existia. */
.sheet__body .stack-sm > .card + .card {
  margin-top: calc(var(--sp-3) - var(--sp-2));
}

/* Quanto sobra por dia: linha discreta sob o saldo. Não compete com o número
   grande — é a leitura seguinte, não uma segunda manchete. */
.balance__perday {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.balance__perday strong {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.balance__perday--apertado,
.balance__perday--apertado strong {
  color: var(--negative-text);
}

/* ==========================================================================
   DEDO NÃO É PONTEIRO DE MOUSE

   Um botão de 36px é confortável com o mouse e chato com o polegar. O iOS pede
   44pt de alvo mínimo, o Android 48dp — e a diferença aparece justamente nos
   botões pequenos: o de ícone, o do seletor de mês, os segmentados.

   A regra é `pointer: coarse` e não largura de tela: o que muda o tamanho certo
   é o DEDO, não o monitor. Assim o PC continua compacto e o celular fica
   clicável, sem inventar um "modo celular" que erraria em tablet com mouse ou
   em notebook com tela sensível ao toque.
   ========================================================================== */
@media (pointer: coarse) {
  .icon-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .btn {
    min-height: 2.75rem;
  }

  .segmented__item {
    min-height: 2.75rem;
  }

  /*
   * O rótulo do mês é botão (abre o seletor) mas tinha 21px de altura: a área
   * clicável era a linha do texto. Aqui ele passa a ocupar a altura da barra
   * inteira, que é o que a pessoa mira quando toca no nome do mês.
   */
  .month-switch__label {
    min-height: 2.75rem;
  }

  /* Links de "ver tudo" e afins: pequenos demais para acertar de primeira. */
  .section__link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  /*
   * OS PEQUENOS PRECISAM SER NOMEADOS UM A UM.
   *
   * `.btn` já tinha 44px; quem media 34 era `.btn--sm`, e 36 era o segmentado
   * — cada um com o próprio `min-height`, escrito depois. Uma regra genérica em
   * `.btn` não os alcança: perde para o modificador, que é mais tarde no
   * arquivo. Por isso este bloco mora no ÚLTIMO css carregado e chama cada um
   * pelo nome. É mais verboso e é o que de fato vale.
   */
  .btn--sm {
    min-height: 2.75rem;
  }

  .segmented__item {
    min-height: 2.75rem;
  }

  /*
   * Os passinhos de "− 1 +" tinham 30x30 e ficam colados um no outro: são os
   * mais difíceis de acertar do app inteiro, e errar aqui muda um número.
   */
  .plan-row__toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}