/* =====================================================================
   Finanças — design system (produto interno Iter, tema claro travado)
   Estrutura de tokens espelhada do FortGrão; hue petróleo.
   Paletas de dados validadas (validate_palette.js, superfície #fff):
   contas e naturezas PASS; receita/despesa ΔE CVD 7,2 => obrigatória a
   codificação secundária (sinal, posição vs zero, rótulo) em todo uso.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* petróleo (marca) */
  --petrol-900: #093540; --petrol-800: #0c4a57; --petrol-700: #0f6070;
  --petrol-600: #137688; --petrol-500: #1e8c9e; --petrol-400: #4faab8;
  --petrol-100: #d9eef2; --petrol-50:  #eef7f9;
  /* âmbar (sotaque) */
  --amber-600: #b8860b; --amber-500: #d4a11e; --amber-100: #f7efd6;
  /* neutros frios */
  --neutral-900: #16211f; --neutral-700: #3a4a47; --neutral-500: #64716f;
  --neutral-400: #8b9694; --neutral-300: #c2cac8; --neutral-200: #dde3e2;
  --neutral-100: #edf0ef; --neutral-50:  #f7f9f8;

  /* papéis */
  --color-bg: var(--neutral-50);
  --color-surface: #ffffff;
  --color-surface-2: var(--petrol-50);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text: var(--neutral-900);
  --color-text-2: var(--neutral-700);
  --color-muted: var(--neutral-500);
  --color-primary: var(--petrol-600);
  --color-primary-forte: var(--petrol-700);
  --color-accent: var(--amber-600);

  /* dados: fluxo (par com codificação secundária obrigatória) */
  --d-receita: #008300;
  --d-despesa: #e34948;
  --d-transf:  #7a7876;          /* recessivo de propósito: sempre com ⇄ + rótulo */
  /* dados: liquidez (rampa ordinal petróleo claro=líquido -> escuro=aplicado) */
  --d-caixa: #4faab8;
  --d-aplicado: #0f6070;
  /* dados: contas (ordem narrativa fixa; magenta/âmbar nunca sem rótulo) */
  --d-conta-pj: #4a3aa7;
  --d-conta-pfg: #2a78d6;
  --d-conta-pfi: #e87ba4;
  --d-conta-bb: #eda100;
  --d-conta-cartao: #64716f;
  /* dados: naturezas (8 slots fixos por entidade, nunca reciclados) */
  --d-nat-1: #2a78d6; --d-nat-2: #eb6834; --d-nat-3: #1baf7a;
  --d-nat-4: #eda100; --d-nat-5: #e87ba4; --d-nat-6: #008300;
  --d-nat-7: #4a3aa7; --d-nat-8: #e34948;
  /* status (reservadas; sempre ícone+texto) */
  --st-ok: #0ca30c; --st-atencao: #fab219; --st-serio: #ec835a; --st-critico: #d03b3b;

  /* gráfico */
  --gr-grade: #e6e9e8;
  --gr-eixo: #c2cac8;
  --gr-passado: 1;
  --gr-futuro-opacidade: 0.45;

  /* tipografia */
  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem;
  --fs-heroi: clamp(1.875rem, 9vw, 2.625rem);

  /* espaçamento 4px */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;

  /* raios / sombras / layout */
  --raio: 12px; --raio-g: 16px; --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(9, 53, 64, 0.06);
  --sombra-2: 0 4px 16px rgba(9, 53, 64, 0.10);
  --topo-h: 52px;
  --tabbar-h: 56px;
  --z-topo: 30; --z-sheet: 50; --z-toast: 60; --z-tooltip: 70;
  --transicao: 160ms ease;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-16);
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100svh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: var(--fs-18); }
h3 { font-size: var(--fs-14); color: var(--color-text-2); }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-primary-forte); }
.num, .valor, td.n, .kpi-valor { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shell: topo ---------- */
.topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  display: flex; align-items: center; gap: var(--e-3);
  height: calc(var(--topo-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--e-4) 0;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.topo .marca { font-size: var(--fs-18); font-weight: 700; color: var(--petrol-800); }
.topo .espaco { flex: 1; }
.topo .btn-icone { margin-right: calc(var(--e-2) * -1); }

/* ---------- shell: tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-topo);
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px; border: 0; background: none;
  font-size: var(--fs-11); color: var(--color-muted);
}
.tabbar button.ativa { color: var(--color-primary-forte); font-weight: 650; }
.tabbar button .ico { font-size: 20px; line-height: 1; }
.tabbar button.central .ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-top: -14px;
  background: var(--color-primary); color: #fff;
  border-radius: 50%; box-shadow: var(--sombra-2);
}

/* ---------- conteúdo ---------- */
main { padding: var(--e-4); display: grid; gap: var(--e-4); max-width: 640px; margin: 0 auto; }
.tela { display: grid; gap: var(--e-4); }

/* ---------- cards / KPIs ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-g);
  padding: var(--e-4);
  box-shadow: var(--sombra-1);
  display: grid; gap: var(--e-3);
}
.card > header { display: flex; align-items: baseline; gap: var(--e-2); }
.card > header .acao { margin-left: auto; font-size: var(--fs-13); }
.card .sub { font-size: var(--fs-12); color: var(--color-muted); }

.kpi-heroi .kpi-valor { font-size: var(--fs-heroi); font-weight: 700; letter-spacing: -0.02em; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.tile { padding: var(--e-3); border-radius: var(--raio); }
.tile .kpi-valor { font-size: var(--fs-22); font-weight: 700; }
.tile .rotulo { font-size: var(--fs-12); color: var(--color-muted); }
.tile .sub { font-size: var(--fs-11); }

/* medidor (caixa/aplicado, orçamento) */
.medidor {
  height: 8px; border-radius: var(--raio-pill);
  background: var(--neutral-100); overflow: hidden;
  display: flex;
}
.medidor > i { display: block; height: 100%; }
.medidor .m-caixa { background: var(--d-caixa); }
.medidor .m-aplicado { background: var(--d-aplicado); }
.medidor .m-uso { background: var(--color-primary); }
.medidor.atencao .m-uso { background: var(--st-atencao); }
.medidor.critico .m-uso { background: var(--st-critico); }

/* ---------- chips / segmentado / selos ---------- */
.chips { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 var(--e-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--raio-pill);
  background: var(--color-surface); font-size: var(--fs-13); color: var(--color-text-2);
  white-space: nowrap;
}
.chip.ativa { background: var(--petrol-100); border-color: var(--petrol-400); color: var(--petrol-900); font-weight: 600; }
.ponto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.segmentado {
  display: inline-flex; padding: 2px; border-radius: var(--raio-pill);
  background: var(--neutral-100); border: 1px solid var(--color-border);
}
.segmentado button {
  border: 0; background: none; min-height: 28px; padding: 0 var(--e-3);
  border-radius: var(--raio-pill); font-size: var(--fs-13); color: var(--color-muted);
}
.segmentado button.ativa { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--sombra-1); }

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--raio-pill);
  font-size: var(--fs-11); font-weight: 600;
}
.selo-ok { background: #e6f6e6; color: #075607; }
.selo-atencao { background: #fdf3d7; color: #6d5407; }
.selo-serio { background: #fdeae2; color: #7c3413; }
.selo-critico { background: #fbe3e3; color: #7c1212; }
.selo-neutro { background: var(--neutral-100); color: var(--color-text-2); }

/* ---------- banner de avisos ---------- */
.banner {
  display: grid; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border: 1px solid #f3dfae; border-radius: var(--raio);
  background: #fdf8ea; font-size: var(--fs-13);
}
.banner .item { display: flex; align-items: center; gap: var(--e-2); }
.banner .item .acao { margin-left: auto; white-space: nowrap; }

/* ---------- listas de transações / compromissos ---------- */
.lista { display: grid; }
.lista .dia {
  font-size: var(--fs-11); font-weight: 700; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--e-3) 0 var(--e-1);
}
.linha-tr {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--e-3); min-height: 52px; padding: var(--e-1) 0;
  border: 0; background: none; text-align: left; width: 100%;
  border-bottom: 1px solid var(--color-border); font-size: var(--fs-14);
}
.linha-tr:last-child { border-bottom: 0; }
.linha-tr .desc { overflow: hidden; }
.linha-tr .desc b { display: block; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.linha-tr .desc .sub { font-size: var(--fs-12); color: var(--color-muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.linha-tr .valor { font-weight: 650; white-space: nowrap; }
.valor.pos { color: var(--d-receita); }
.valor.neg { color: #b03130; }             /* despesa escurecida p/ contraste de TEXTO (AA) */
.valor.transf { color: var(--d-transf); font-weight: 550; }

/* ---------- botões / formulários ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-5);
  border-radius: var(--raio); border: 1px solid transparent;
  font-size: var(--fs-14); font-weight: 600;
  background: var(--color-primary); color: #fff;
  transition: background var(--transicao);
}
.btn:active { background: var(--color-primary-forte); }
.btn.secundario { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn.fantasma { background: none; color: var(--color-primary-forte); border: 0; min-height: 32px; padding: 0 var(--e-2); }
.btn.perigo { background: var(--st-critico); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-icone {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; border-radius: 50%; font-size: 18px; color: var(--color-text-2);
}

label.campo { display: grid; gap: var(--e-1); font-size: var(--fs-13); color: var(--color-text-2); }
input, select, textarea {
  font: inherit; font-size: 16px;      /* 16px: evita zoom do iOS ao focar */
  min-height: 44px; padding: 0 var(--e-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--raio);
  background: var(--color-surface); color: var(--color-text); width: 100%;
}
textarea { padding: var(--e-2) var(--e-3); min-height: 72px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .linha-tr:focus-visible {
  outline: 2px solid var(--petrol-400); outline-offset: 1px;
}

/* ---------- login ---------- */
.tela-login {
  min-height: 100svh; display: grid; place-items: center; padding: var(--e-6);
}
.tela-login form { width: min(360px, 100%); display: grid; gap: var(--e-4); }
.tela-login .marca { font-size: var(--fs-22); font-weight: 700; color: var(--petrol-800); text-align: center; }

/* ---------- sheet (edição/detalhe) ---------- */
.sheet-fundo {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(9, 53, 64, 0.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: min(560px, 100%);
  max-height: 88svh; overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  padding: var(--e-2) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
  display: grid; gap: var(--e-4);
}
.sheet .puxador { width: 36px; height: 4px; border-radius: 2px; background: var(--neutral-300); margin: var(--e-1) auto; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--e-4));
  z-index: var(--z-toast);
  background: var(--neutral-900); color: #fff;
  padding: var(--e-3) var(--e-5); border-radius: var(--raio);
  font-size: var(--fs-14); box-shadow: var(--sombra-2);
  opacity: 0; pointer-events: none; transition: opacity var(--transicao);
}
#toast.visivel { opacity: 1; }

/* ---------- tooltip de gráfico ---------- */
#tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--raio); box-shadow: var(--sombra-2);
  padding: var(--e-2) var(--e-3); font-size: var(--fs-12); max-width: 260px;
  display: none;
}
#tooltip.visivel { display: block; }
#tooltip .titulo { font-weight: 700; margin-bottom: 2px; }
#tooltip .linha { display: flex; gap: var(--e-2); justify-content: space-between; }
#tooltip .linha .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- gráficos ---------- */
.rolagem-grafico { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rolagem-grafico svg { display: block; }
.grafico-dica { font-size: var(--fs-11); color: var(--color-muted); text-align: center; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--fs-12); color: var(--color-text-2); }
.legenda .item { display: inline-flex; align-items: center; gap: 6px; }
.legenda .valor { font-weight: 600; color: var(--color-text); }
.sparkline { height: 28px; width: 100%; max-width: 160px; }

/* régua de cobertura de extratos */
.cobertura { display: grid; gap: var(--e-2); }
.cobertura .faixa { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--e-2); font-size: var(--fs-12); }
.cobertura .trilha { height: 6px; border-radius: 3px; background: var(--neutral-100); position: relative; overflow: hidden; }
.cobertura .trilha i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }

/* bullet bars (previsto × realizado) */
.bullet { display: grid; gap: 4px; }
.bullet .trilha { position: relative; height: 14px; border-radius: 7px; background: var(--neutral-100); overflow: hidden; }
.bullet .trilha .real { position: absolute; inset: 3px auto 3px 0; border-radius: 5px; background: var(--color-primary); }
.bullet .trilha .marco { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--neutral-400); }
.bullet.estouro .trilha .real { background: var(--st-critico); }
.bullet .rotulos { display: flex; justify-content: space-between; font-size: var(--fs-12); }

/* ---------- tabelas ---------- */
.rolagem-tabela { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-13); }
th, td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
td.n, th.n { text-align: right; }
thead th { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); position: sticky; top: 0; background: var(--color-surface); }
tfoot td { font-weight: 700; }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  main { max-width: 960px; padding: var(--e-6); }
  .tabbar { top: 0; bottom: auto; left: auto; right: 0; width: auto;
    display: flex; gap: var(--e-2); height: var(--topo-h);
    background: none; border: 0; position: fixed; z-index: calc(var(--z-topo) + 1);
    padding: 0 var(--e-4);
  }
  .tabbar button { flex-direction: row; gap: 6px; font-size: var(--fs-13); padding: 0 var(--e-3); }
  .tabbar button.central .ico { width: 28px; height: 28px; margin: 0; font-size: 14px; }
  body { padding-bottom: var(--e-6); }
  .grade-2 { grid-template-columns: repeat(4, 1fr); }
  .so-mobile { display: none; }
}
@media (max-width: 759px) { .so-desktop { display: none; } }