/* Tokens, casca e componentes compartilhados.
   Direção: papel quente + tinta escura, um único destaque verde-garrafa.
   Número é o protagonista: tabular, peso alto, moeda e centavos menores. */

:root {
  color-scheme: light dark;

  --fundo: #f4f1ea;
  --superficie: #ffffff;
  --superficie-2: #ece8df;
  --borda: #e4dfd4;
  --texto: #1d1a16;
  --texto-suave: #6a645a;
  --destaque: #1f5c4a;
  --sobre-destaque: #ffffff;
  --positivo: #1f7a55;
  --negativo: #b3382a;
  --atraso-cheio: #b3382a; /* fundo do selo de conta atrasada, sempre com texto claro */
  --sobre-negativo: #ffffff;
  --alerta: #96590a;

  /* Pessoa nunca usa a cor de um estado: vermelho é só atraso, verde da marca é só ação. */
  --cor-cassio: #2c6a8c;
  --cor-alice: #7b4b94;
  --cor-conjunta: #7d776b;

  --cat-moradia: #2f7d62;
  --cat-contas: #a97c0c;
  --cat-internet: #3a7ca5;
  --cat-mercado: #c9602f;
  --cat-transporte: #586a92;
  --cat-saude: #bd4458;
  --cat-bebe: #c56f8b;
  --cat-educacao: #675aa3;
  --cat-lazer: #1f8f8c;
  --cat-assinaturas: #63802a;
  --cat-cartao: #9a3f86;
  --cat-outros: #7d786d;

  --raio: 18px;
  --raio-p: 12px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-numero: var(--fonte);
  --fonte-titulo: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --toque: 44px;
  --margem: 16px;
  --altura-abas: 64px;
  --largura-maxima: 480px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141311;
    --superficie: #1e1c19;
    --superficie-2: #2a2723;
    --borda: #35312b;
    --texto: #f2eee6;
    --texto-suave: #a9a296;
    --destaque: #72cba8;
    --sobre-destaque: #0d2a20;
    --positivo: #72cba8;
    --negativo: #f08d7b;
    --atraso-cheio: #cf4533;
    --sobre-negativo: #ffffff;
    --alerta: #e6b65c;

    --cor-cassio: #72b4d8;
    --cor-alice: #c9a3e0;
    --cor-conjunta: #b5afa3;

    --cat-moradia: #72cba8;
    --cat-contas: #e0b84e;
    --cat-internet: #78b6dc;
    --cat-mercado: #f0976a;
    --cat-transporte: #9aabd1;
    --cat-saude: #f08a9c;
    --cat-bebe: #eaa0b8;
    --cat-educacao: #ada2e6;
    --cat-lazer: #5fcfcb;
    --cat-assinaturas: #b3cf62;
    --cat-cartao: #e592d2;
    --cat-outros: #b5afa3;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.4 var(--fonte);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--destaque); }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ---------- casca ---------- */

#app { max-width: var(--largura-maxima); margin: 0 auto; min-height: 100dvh; }

.tela {
  padding: calc(env(safe-area-inset-top) + 8px)
    calc(env(safe-area-inset-right) + var(--margem))
    calc(env(safe-area-inset-bottom) + var(--altura-abas) + 64px) /* sobra para a faixa de aviso não cobrir a última linha */
    calc(env(safe-area-inset-left) + var(--margem));
}

.carregando { padding: 40dvh var(--margem) 0; text-align: center; }

.abas {
  position: fixed;
  z-index: 5;
  inset: auto 0 0;
  margin: 0 auto;
  max-width: var(--largura-maxima);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 4px 8px calc(env(safe-area-inset-bottom) + 4px);
  background: var(--superficie);
  border-top: 1px solid var(--borda);
}

.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  border-radius: var(--raio-p);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.aba .icone { width: 24px; height: 24px; }
.aba[aria-current="page"] { color: var(--destaque); }

.lancar {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--destaque);
  color: var(--sobre-destaque);
  box-shadow: 0 0 0 5px var(--fundo), 0 8px 18px -8px rgb(0 0 0 / 0.45);
}
.lancar .icone { width: 24px; height: 24px; }

/* ---------- peças compartilhadas ---------- */

.icone { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.suave { color: var(--texto-suave); }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }

.valor {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.valor .moeda, .valor .centavos { font-size: 0.5em; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.valor .moeda { margin-right: 0.35em; }
.valor.grande { display: block; font-size: 46px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; }
.valor.grande.negativo .moeda, .valor.grande.negativo .centavos { color: inherit; opacity: 0.75; }

.rotulo { font-size: 13px; font-weight: 600; color: var(--texto-suave); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.titulo-tela { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.titulo-tela small { margin-left: 6px; font: 500 15px var(--fonte); letter-spacing: 0; color: var(--texto-suave); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
}
.cartao.lista { padding: 2px 16px; }
.cartao.lista > li + li { border-top: 1px solid var(--borda); }
.cartao.vazio { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: 15px; }

.titulo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--toque);
  margin: 20px 4px 4px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
/* Em tela estreita o título encurta com reticências; o lado direito nunca quebra nem sai da linha. */
.titulo-secao > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-secao a, .titulo-secao .lado { flex: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.titulo-botao { display: block; min-height: var(--toque); padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; }
.titulo-secao a { display: inline-flex; align-items: center; gap: 2px; min-height: var(--toque); text-decoration: none; }

.linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 0;
  border: 0;
  background: none;
  text-align: left;
}
.linha-texto { display: grid; gap: 1px; min-width: 0; }
.linha-titulo { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-detalhe { font-size: 13px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha > .valor { font-size: 15.5px; font-weight: 600; }

.selo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-p);
  color: var(--cor, var(--texto-suave));
  background: color-mix(in srgb, var(--cor, var(--texto-suave)) 13%, transparent);
}
.selo.redondo { border-radius: 50%; font-weight: 700; font-size: 16px; }

.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-suave)); }
.dono { display: inline-flex; align-items: center; gap: 5px; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip::after, .botao.pequeno::after { content: ""; position: absolute; inset: -4px 0; } /* alvo de toque de 44 px */
.chip[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
}
.botao.primario { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.botao.discreto { min-height: var(--toque); padding: 0 10px; border-color: transparent; background: transparent; color: var(--destaque); font-size: 15px; }
.botao.pequeno { min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.botao.perigo { color: var(--negativo); }
.botao.largo { width: 100%; }
.botao:disabled { opacity: 0.55; }
.botao:active, .chip:active, .lancar:active { filter: brightness(0.94); }

.botao-icone {
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
}
.botao-icone .icone { width: 22px; height: 22px; }
.botao-icone:active { background: var(--superficie-2); }
.botao-icone:disabled { color: var(--texto-suave); opacity: 0.4; }

/* Aviso passageiro (pagou, apagou, deu erro), com ação de desfazer. */
.aviso {
  /* Faixa apoiada em cima da barra de abas (fica por baixo dela, então o botão de lançar passa na frente).
     Texto à esquerda e ação à direita deixam o meio livre para esse botão. */
  position: fixed;
  z-index: 4;
  inset: auto 0 calc(env(safe-area-inset-bottom) + var(--altura-abas) + 1px);
  margin: 0 auto;
  max-width: var(--largura-maxima);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 2px 6px 2px 16px;
  border-radius: 14px 14px 0 0;
  background: var(--texto);
  color: var(--fundo);
  font-size: 14.5px;
  font-weight: 550;
}
.aviso .botao { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.aviso > span { max-width: calc(50% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Movimento: cada um roda uma vez, dura menos de 1 s e explica de onde a coisa veio.
   O estado final é o estado normal; sem animação o conteúdo já está lá. */
@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: surgir 0.22s ease-out both; }
  @keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
}