/* Finanças da Família: o livro-caixa da casa.
   Papel de livro-caixa (verde-claro de bloco contábil), tinta verde-escura, tinta vermelha só pro que está
   negativo ou passou do limite. Números em Atkinson Hyperlegible Mono, como num extrato; texto em
   Atkinson Hyperlegible Next, feita pra leitura fácil. */

:root {
  --papel: #edf1ec;
  --folha: #fbfcfa;
  --folha-2: #f2f5f1;
  --tinta: #16211b;
  --tinta-2: #45534b;
  --tinta-3: #5b6a61;
  --pauta: #d6dfd7;
  --pauta-forte: #b9c7bc;
  --verde: #1d5a43;
  --verde-claro: #dbe9df;
  --sobre-verde: #f6faf7;
  --vermelho: #b0291f;
  --vermelho-fundo: #f8e4e0;
  --ambar: #85500a;
  --ambar-forte: #a86e0c;
  --ambar-fundo: #f6ebd3;
  --ok: #1c6a44;
  --ok-fundo: #dcede2;
  --azul: #2a4f9a;
  --azul-fundo: #e3e9f6;
  --barra-fundo: #e2e9e3;
  --barra: #4f6b5c;
  --barra-2: #9fb3a6;
  --serie-a: #9a4334;
  --serie-b: #1d5a43;
  --serie-c: #2a5aa8;
  --foco: #2a5aa8;
  --sombra: 0 1px 2px rgb(22 33 27 / 0.05), 0 6px 18px -8px rgb(22 33 27 / 0.14);
  --sombra-barra: 0 -1px 0 rgb(22 33 27 / 0.08), 0 -8px 24px -12px rgb(22 33 27 / 0.18);
  --raio: 18px;
  --raio-dentro: 12px;
  --f-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-num: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --entrada: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #0d1411;
    --folha: #151e1a;
    --folha-2: #1b2621;
    --tinta: #e5ece7;
    --tinta-2: #b3c1b8;
    --tinta-3: #9aaaa0;
    --pauta: #27352e;
    --pauta-forte: #3a4b42;
    --verde: #8fd0ad;
    --verde-claro: #1f3a2e;
    --sobre-verde: #0d1411;
    --vermelho: #ff9d92;
    --vermelho-fundo: #3d1f1b;
    --ambar: #f1c071;
    --ambar-forte: #e0a84a;
    --ambar-fundo: #352a19;
    --ok: #82d6a6;
    --ok-fundo: #183526;
    --azul: #a9bff5;
    --azul-fundo: #1d2743;
    --barra-fundo: #24322b;
    --barra: #93ad9f;
    --barra-2: #56695e;
    --serie-a: #ec9d8c;
    --serie-b: #8fd0ad;
    --serie-c: #a9bff5;
    --foco: #a9bff5;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 22px -10px rgb(0 0 0 / 0.55);
    --sombra-barra: 0 -1px 0 rgb(255 255 255 / 0.06), 0 -8px 24px -12px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --papel: #0d1411;
  --folha: #151e1a;
  --folha-2: #1b2621;
  --tinta: #e5ece7;
  --tinta-2: #b3c1b8;
  --tinta-3: #9aaaa0;
  --pauta: #27352e;
  --pauta-forte: #3a4b42;
  --verde: #8fd0ad;
  --verde-claro: #1f3a2e;
  --sobre-verde: #0d1411;
  --vermelho: #ff9d92;
  --vermelho-fundo: #3d1f1b;
  --ambar: #f1c071;
  --ambar-forte: #e0a84a;
  --ambar-fundo: #352a19;
  --ok: #82d6a6;
  --ok-fundo: #183526;
  --azul: #a9bff5;
  --azul-fundo: #1d2743;
  --barra-fundo: #24322b;
  --barra: #93ad9f;
  --barra-2: #56695e;
  --serie-a: #ec9d8c;
  --serie-b: #8fd0ad;
  --serie-c: #a9bff5;
  --foco: #a9bff5;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 22px -10px rgb(0 0 0 / 0.55);
  --sombra-barra: 0 -1px 0 rgb(255 255 255 / 0.06), 0 -8px 24px -12px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
em, i, cite, dfn, var, address, q { font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: var(--verde); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-fino { stroke-width: 1.5; }

/* ---------- números ---------- */
.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.num.neg { color: var(--vermelho); }
.num.pos { color: var(--ok); }
.num.apagado { color: var(--tinta-3); }
.valor-grande {
  display: block;
  font-size: clamp(28px, 7.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.valor-medio { font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; }

/* ---------- moldura ---------- */
.moldura { min-height: 100dvh; }
.lateral .marca, .lateral .botao-sair-lateral { display: none; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 4px;
  max-width: 1120px; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-icone { display: block; border-radius: 8px; flex: none; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
.marca-nome { font-weight: 700; font-size: 15px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.botao-sair {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; margin-right: -8px;
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  color: var(--tinta-2); font-size: 15px; font-weight: 600;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 120ms ease-out;
}
.botao-sair .ic { stroke-width: 2; }
.botao-sair:active { transform: scale(0.96); }
@media (hover: hover) { .botao-sair:hover { background: var(--folha-2); color: var(--tinta); } }

.conteudo {
  max-width: 1120px; margin: 0 auto;
  padding: 8px 16px calc(96px + env(safe-area-inset-bottom));
}

/* barra de abas embaixo (celular e tablet) */
.abas {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--folha);
  box-shadow: var(--sombra-barra);
}
.aba {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-height: 56px; padding: 7px 2px 4px;
  color: var(--tinta-2); text-decoration: none;
  font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
  border-radius: 12px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease-out;
}
.aba::before {
  content: ""; position: absolute; top: 3px; left: 50%; width: 52px; height: 32px;
  transform: translateX(-50%); border-radius: 999px;
  background: transparent; transition: background-color 150ms ease-out;
}
.aba .ic, .aba span { position: relative; }
.aba .ic { width: 24px; height: 24px; stroke-width: 2; }
.aba span { white-space: nowrap; }
.aba[aria-current="page"] { color: var(--verde); }
.aba[aria-current="page"]::before { background: var(--verde-claro); }
.aba:focus-visible { outline-offset: -3px; }

body:not(.estado-pronto) .abas,
body:not(.estado-pronto) .botao-sair { display: none; }

/* ---------- estados: carregando, entrar, erro ---------- */
.carregando {
  display: none;
  min-height: 60vh; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--tinta-2);
}
.estado-carregando .carregando { display: flex; }
.carregando-barra {
  width: 160px; height: 6px; border-radius: 999px; background: var(--barra-fundo); overflow: hidden; position: relative;
}
.carregando-barra::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--verde);
  animation: vai-e-volta 1.4s var(--entrada) infinite;
}
@keyframes vai-e-volta { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

.porta {
  max-width: 440px; margin: 8vh auto 0; text-align: left;
  background: var(--folha); border-radius: 22px; box-shadow: var(--sombra);
  padding: 28px 24px 24px;
}
.porta-icone {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--verde-claro); color: var(--verde); margin-bottom: 18px;
}
.porta-icone .ic { width: 24px; height: 24px; stroke-width: 2; }
.porta h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 800; }
.porta p { margin: 0 0 14px; color: var(--tinta-2); font-size: 17px; line-height: 1.55; }
.porta .comando {
  font-family: var(--f-num); font-weight: 600; color: var(--tinta);
  background: var(--folha-2); padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--pauta);
}
.porta .botao { width: 100%; margin-top: 8px; }
.porta-nota { font-size: 14px !important; margin-top: 16px !important; }
.porta-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--ambar-fundo); color: var(--ambar); border-radius: var(--raio-dentro);
  padding: 12px 14px; margin: 0 0 16px; font-weight: 600; font-size: 15px; line-height: 1.45;
}
.porta-aviso .ic { margin-top: 1px; stroke-width: 2; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--verde); color: var(--sobre-verde);
  font-size: 16px; font-weight: 700; text-decoration: none; letter-spacing: -0.005em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out, filter 150ms ease-out;
}
.botao .ic { stroke-width: 2; }
.botao:active { transform: scale(0.96); }
@media (hover: hover) { .botao:hover { filter: brightness(1.08); } }
.botao-claro {
  background: var(--folha); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--pauta-forte);
  min-height: 44px; font-size: 15px; padding: 0 14px;
}

.aviso-rede {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ambar-fundo); color: var(--ambar);
  border-radius: 14px; padding: 10px 12px 10px 14px; margin: 4px 0 16px;
  font-size: 15px; font-weight: 600; line-height: 1.4;
}
.aviso-rede .ic { stroke-width: 2; }
.aviso-rede p { margin: 0; flex: 1 1 200px; }
.aviso-rede .botao-claro { min-height: 40px; background: transparent; color: var(--ambar); box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- telas ---------- */
.tela { display: none; }
.tela.ativa { display: block; }

.tela-cabeca { margin: 12px 0 22px; }
.tela-saudacao { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--verde); }
.tela-titulo {
  margin: 0; font-size: clamp(32px, 9vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em;
}
.tela-titulo:focus { outline: none; }
.tela-sub { margin: 10px 0 0; color: var(--tinta-2); font-size: 17px; line-height: 1.55; max-width: 64ch; }

.frescor {
  margin-top: 16px; padding: 10px 14px; border-radius: 14px;
  background: var(--folha-2); box-shadow: inset 0 0 0 1px var(--pauta);
  font-size: 14px; line-height: 1.45; color: var(--tinta-2);
}
.frescor-linha { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.frescor-linha .ic { width: 16px; height: 16px; margin-top: 2px; stroke-width: 1.5; color: var(--tinta-3); }
.frescor-linha strong { color: var(--tinta); font-weight: 700; }
.frescor-linha + .frescor-linha { margin-top: 4px; }
.frescor .sanfona { margin-top: 2px; }
.frescor .sanfona-botao { min-height: 44px; padding: 6px 0 2px; font-size: 14px; color: var(--verde); font-weight: 600; }
.frescor .sanfona-corpo { padding-bottom: 4px; }
.frescor-velho { color: var(--ambar); font-weight: 700; }

.grade { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.grade + .grade, .grade + .bloco, .bloco + .grade, .bloco + .bloco { margin-top: 14px; }
.inteiro { grid-column: 1 / -1; }
.coluna { display: grid; gap: 14px; min-width: 0; align-content: start; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.duas-colunas > .grupo-linha:first-child + .grupo-linha { border-top: 1px solid var(--pauta); }

.secao-titulo {
  margin: 36px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
}
.secao-texto { margin: 0 0 16px; color: var(--tinta-2); max-width: 66ch; }

/* ---------- cartão ---------- */
.cartao {
  background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 18px 18px 16px; min-width: 0;
}
.cartao-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cartao-topo h2, .cartao-topo h3 { min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.cartao-topo .cartao-extra { margin-left: auto; }
.cartao-icone {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--verde-claro); color: var(--verde);
}
.cartao-icone .ic { width: 19px; height: 19px; stroke-width: 2; }
.cartao-nota { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinta-3); }
.cartao-texto { margin: 0 0 12px; color: var(--tinta-2); }
.rotulo { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-3); margin-bottom: 4px; }
.destaque-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.frase { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--tinta-2); }
.frase strong { color: var(--tinta); }

/* ---------- linhas de livro-caixa ---------- */
.linhas { list-style: none; margin: 0; padding: 0; }
.linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px;
  padding: 11px 0; border-top: 1px solid var(--pauta);
}
.linhas > .linha:first-child { border-top: 0; padding-top: 2px; }
.linha-nome { min-width: 0; }
.linha-nome strong { font-weight: 600; display: block; }
.linha-detalhe { display: block; font-size: 14px; color: var(--tinta-3); line-height: 1.45; margin-top: 1px; }
.linha-valor { text-align: right; flex: none; }
.linha-valor .num { font-size: 17px; }
.linha-valor .linha-detalhe { white-space: nowrap; }
.linha-total { border-top: 2px solid var(--pauta-forte); font-weight: 700; }

.dados { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.dados dt, .dados dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--pauta); }
.dados dt { color: var(--tinta-2); font-size: 15px; padding-right: 12px; }
.dados dd { text-align: right; }
.dados dd .num { font-size: 16px; }
.dados > dt:first-of-type, .dados > dt:first-of-type + dd { border-top: 0; }
.dados .dd-nota { display: block; font-size: 13px; color: var(--tinta-3); white-space: normal; font-family: var(--f-texto); }

/* ---------- selos ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0;
  background: var(--folha-2); color: var(--tinta-2); white-space: nowrap;
}
.selo .ic { width: 15px; height: 15px; stroke-width: 2.25; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-alerta { background: var(--ambar-fundo); color: var(--ambar); }
.selo-ruim { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-info { background: var(--azul-fundo); color: var(--azul); }
.selo-neutro { background: var(--folha-2); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--pauta); }

/* ---------- barras ---------- */
.barra {
  position: relative; height: 12px; border-radius: 999px; background: var(--barra-fundo); margin: 10px 0 0;
}
.barra-fina { height: 8px; }
.barra-cheio { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--barra); }
.barra-cheio-2 { background: var(--barra-2); }
.barra.tom-ok .barra-cheio { background: var(--ok); }
.barra.tom-alerta .barra-cheio { background: var(--ambar-forte); }
.barra.tom-ruim .barra-cheio { background: var(--vermelho); }
.barra.tom-info .barra-cheio { background: var(--azul); }
.barra-marca {
  position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px;
  background: var(--tinta); border-radius: 2px; box-shadow: 0 0 0 2px var(--folha);
}
.barra-legenda {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 18px;
  margin-top: 8px; font-size: 14px; color: var(--tinta-3); line-height: 1.4;
}
.legenda-marca { display: inline-flex; align-items: center; gap: 6px; }
.legenda-marca::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--tinta); }
.legenda-cor { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--barra); display: inline-block; }
.legenda-cor .sw.c2 { background: var(--barra-2); }
.legenda-cor .sw.cr { background: var(--vermelho); }
.legenda-cor .sw.cv { background: var(--ok); }

/* contador de dias (cheque especial) */
.dias-bloco { margin-top: 16px; }
.dias-numero { display: flex; align-items: baseline; gap: 10px; }
.dias-numero .num { font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.dias-numero span:last-child { font-weight: 600; color: var(--tinta-2); line-height: 1.3; }
.dias {
  display: grid; grid-template-columns: repeat(var(--colunas, 10), minmax(0, 30px));
  gap: 6px; margin-top: 12px;
}
.dia {
  aspect-ratio: 1; border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--ok); background: transparent;
}
.dia.usado { background: var(--vermelho); box-shadow: none; }
.dias-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 14px; color: var(--tinta-2); }
.dias-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.dias-legenda .sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.dias-legenda .l-usado { background: var(--vermelho); }
.dias-legenda .l-livre { box-shadow: inset 0 0 0 2px var(--ok); }

/* ---------- sanfona (abre no toque) ---------- */
.sanfona-botao {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 48px; padding: 10px 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sanfona-titulo { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sanfona-resumo { flex: none; text-align: right; }
.sanfona-seta { width: 20px; height: 20px; color: var(--tinta-3); stroke-width: 2; transition: transform 220ms var(--entrada); }
.sanfona.aberta > .sanfona-botao .sanfona-seta { transform: rotate(180deg); }
.sanfona-corpo { display: none; padding: 0 0 12px; }
.sanfona.aberta > .sanfona-corpo { display: block; animation: abrir 220ms var(--entrada); }
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sanfona-lista > .sanfona { border-top: 1px solid var(--pauta); }
.sanfona-lista > .sanfona:first-child { border-top: 0; }
.sanfona-mais { margin-top: 6px; border-top: 1px solid var(--pauta); }
.sanfona-mais > .sanfona-botao { color: var(--verde); font-size: 15px; }

/* ---------- Hoje ---------- */
.conta-dono { font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.vermelho-texto { color: var(--vermelho); font-weight: 700; }
.fatura-barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--barra-fundo); margin-top: 10px; gap: 2px; }
.fatura-barra span { display: block; height: 100%; }
.fatura-barra .f-pago { background: var(--barra); }
.fatura-barra .f-credito { background: var(--barra-2); }
.fatura-barra .f-falta { background: var(--vermelho); }
.mov-icone { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none; }
.mov-icone .ic { width: 16px; height: 16px; stroke-width: 2.25; }
.mov-entra { background: var(--ok-fundo); color: var(--ok); }
.mov-sai { background: var(--folha-2); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--pauta); }
.mov { display: flex; gap: 12px; align-items: flex-start; }
.mov .linha-nome { flex: 1; }
.resumo-semana { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 10px; font-size: 15px; color: var(--tinta-2); }
.grupo-titulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 18px 0 2px; font-size: 15px; font-weight: 700; color: var(--tinta);
}
.grupo-titulo:first-child { margin-top: 0; }
.grupo-titulo small { font-size: 14px; font-weight: 600; color: var(--tinta-3); }
.situacao { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.4; margin-top: 2px; }
.situacao .ic { width: 15px; height: 15px; stroke-width: 2; }
.situacao-ok { color: var(--ok); }
.situacao-alerta { color: var(--ambar); }
.situacao-neutra { color: var(--tinta-3); }
.situacao-ruim { color: var(--vermelho); font-weight: 600; }
.situacao-alerta { font-weight: 600; }

/* ---------- Metas ---------- */
.placar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.meta { position: relative; }
.meta-cabeca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.meta h2 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.meta-frase { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--tinta); }
.meta-frase .num { font-size: 0.97em; }
.meta-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 16px; margin-top: 16px; }
.meta-numeros div { min-width: 0; }
.meta-numeros .rotulo { font-size: 13px; }
.meta-numeros .num { font-size: 18px; }
.cortes-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.total-caixa { background: var(--folha); border-radius: 16px; box-shadow: var(--sombra); padding: 14px 16px; }
.total-caixa .num { font-size: 22px; display: block; margin-top: 2px; letter-spacing: -0.03em; }
.total-caixa small { display: block; font-size: 13px; color: var(--tinta-3); margin-top: 2px; }
.legenda-estados { margin: 14px 0 0; font-size: 14px; color: var(--tinta-3); line-height: 1.5; }
.corte-botao { align-items: flex-start; }
.corte-botao .sanfona-titulo { font-weight: 600; line-height: 1.4; }
.corte-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-weight: 400; font-size: 14px; color: var(--tinta-3); }
.corte-valor { flex: none; text-align: right; padding-top: 1px; }
.corte-valor .num { font-size: 16px; }
.corte-valor small { display: block; font-size: 12px; color: var(--tinta-3); }
.corte-botao .sanfona-seta { margin-top: 2px; }
.detalhes { margin: 0; display: grid; gap: 10px; }
.detalhes div { background: var(--folha-2); border-radius: 10px; padding: 10px 12px; }
.detalhes dt { font-size: 13px; font-weight: 700; color: var(--tinta-3); margin-bottom: 2px; }
.detalhes dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); overflow-wrap: anywhere; }
.historico { margin: 4px 0 0; padding-left: 18px; }
.historico li { margin-top: 4px; }

/* ---------- Mês ---------- */
.grupo-linha { padding: 12px 0; border-top: 1px solid var(--pauta); }
.grupo-linha:first-child { border-top: 0; padding-top: 2px; }
.grupo-linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.grupo-linha-topo strong { font-weight: 600; }
.grupo-linha-topo .num { font-size: 15px; color: var(--tinta-2); }
.grupo-linha .barra { margin-top: 8px; height: 10px; }
.grupo-linha .situacao { margin-top: 6px; }
.sem-gasto { margin: 14px 0 0; font-size: 14px; color: var(--tinta-3); line-height: 1.55; }

/* ---------- Carteira ---------- */
.classe-linha { padding: 10px 0; border-top: 1px solid var(--pauta); }
.classe-linha:first-child { border-top: 0; padding-top: 0; }
.classe-linha .barra { height: 8px; margin-top: 6px; }
.moeda-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 12px 0 10px; }
.moeda-barra span { display: block; }
.moeda-barra .m-real { background: var(--barra); }
.moeda-barra .m-dolar { background: var(--azul); }
.legenda-cor .sw.cz { background: var(--azul); }
.item-liquidez { padding: 12px 0; border-top: 1px solid var(--pauta); }
.item-liquidez:first-child { border-top: 0; padding-top: 2px; }
.item-liquidez-topo { display: flex; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.item-liquidez-topo strong { font-weight: 600; line-height: 1.4; }
.item-liquidez dl { margin: 6px 0 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.item-liquidez dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.item-liquidez dt { color: var(--tinta-3); font-weight: 600; }
.item-liquidez dd { margin: 0; }
.marca-alerta { display: inline-flex; align-items: center; gap: 4px; color: var(--ambar); font-size: 13px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.marca-alerta .ic { width: 14px; height: 14px; stroke-width: 2.25; }
.alerta-item { padding: 14px 0 14px 14px; border-top: 1px solid var(--pauta); position: relative; }
.alerta-item::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--ambar-forte); }
.alerta-item:first-child { border-top: 0; padding-top: 2px; }
.alerta-item:first-child::before { top: 4px; }
.alerta-item h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.alerta-item p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.alerta-saldo { margin-top: 4px; font-size: 14px; color: var(--tinta-2); }
.tesouro-item { padding: 12px 0; border-top: 1px solid var(--pauta); }
.tesouro-item:first-child { border-top: 0; padding-top: 2px; }
.tesouro-item h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.par-barras { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; font-size: 14px; }
.par-barras .barra { margin: 0; height: 10px; }
.par-barras .num { font-size: 15px; text-align: right; }
.par-barras span:first-child { color: var(--tinta-2); }
.cenario-linha { padding: 10px 0; border-top: 1px solid var(--pauta); }
.cenario-linha:first-child { border-top: 0; padding-top: 2px; }
.cenario-topo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cenario-topo strong { font-weight: 600; }
.divergente { position: relative; height: 10px; margin: 8px 0 4px; background: var(--barra-fundo); border-radius: 999px; }
.divergente::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tinta-3); border-radius: 1px; }
.divergente span { position: absolute; top: 0; bottom: 0; }
.divergente .d-pos { left: 50%; background: var(--ok); border-radius: 0 999px 999px 0; }
.divergente .d-neg { right: 50%; background: var(--vermelho); border-radius: 999px 0 0 999px; }
.cenario-linha .linha-detalhe { font-size: 14px; }
.lista-simples { margin: 0; padding-left: 20px; color: var(--tinta-2); font-size: 15px; line-height: 1.6; }
.lista-simples li + li { margin-top: 8px; }

/* ---------- Projeção ---------- */
.grafico { margin-top: 4px; min-height: 220px; }
.grafico-nota { margin: -4px 0 8px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-grade { stroke: var(--pauta); stroke-width: 1; }
.g-texto { fill: var(--tinta-3); font-family: var(--f-num); font-size: 12px; }
.g-rotulo { font-family: var(--f-texto); font-size: 13px; font-weight: 700; }
.g-linha { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.g-a { stroke: var(--serie-a); } .g-b { stroke: var(--serie-b); } .g-c { stroke: var(--serie-c); }
.t-a { fill: var(--serie-a); } .t-b { fill: var(--serie-b); } .t-c { fill: var(--serie-c); }
.g-hoje { fill: var(--tinta); }
.cenarios { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.cenario { display: flex; flex-direction: column; }
.cenario-letra {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  font-family: var(--f-num); font-weight: 600; font-size: 17px; color: var(--folha);
}
.cenario-letra.l-a { background: var(--serie-a); } .cenario-letra.l-b { background: var(--serie-b); } .cenario-letra.l-c { background: var(--serie-c); }
.cenario-descricao { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.cenario-btg { padding: 12px 14px; border-radius: 12px; background: var(--folha-2); margin-bottom: 12px; }
.cenario-btg .num.valor-medio { display: block; }
.cenario-btg small { display: block; font-size: 13px; color: var(--tinta-3); margin-top: 2px; }
.apertado { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.apertado strong { color: var(--tinta); }
.apertado ul { margin: 6px 0 0; padding-left: 18px; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table.tabela { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 8px 8px; border-top: 1px solid var(--pauta); text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; padding-left: 0; }
.tabela thead th { border-top: 0; color: var(--tinta-3); font-weight: 700; font-size: 13px; }
.tabela td { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ponte .linha-total .num { font-size: 18px; }

/* ---------- Mercado ---------- */
.indicadores { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.indicador .rotulo { margin-bottom: 6px; }
.indicador-valor { font-family: var(--f-num); font-weight: 500; letter-spacing: -0.03em; font-size: 28px; line-height: 1.15; }
.indicador-valor.texto { font-family: var(--f-texto); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.indicador-fonte { margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); line-height: 1.45; }
.opinioes { display: grid; gap: 12px; }
.opiniao { display: flex; flex-direction: column; }
.opiniao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.opiniao-topo strong { font-weight: 700; font-size: 15px; line-height: 1.35; }
.opiniao blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinta); }
.opiniao-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 10px; font-size: 14px; color: var(--tinta-3); }
.aviso-fontes {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px; background: var(--azul-fundo); color: var(--azul);
  font-size: 15px; line-height: 1.5; font-weight: 600; margin: 0 0 14px;
}
.aviso-fontes .ic { margin-top: 2px; stroke-width: 2; }

.link-fonte {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
  min-height: 44px; padding: 0 2px; margin: -12px 0;
  overflow-wrap: anywhere;
}
.link-fonte .ic { width: 14px; height: 14px; stroke-width: 2; }
.link-texto { font-weight: 600; overflow-wrap: anywhere; }
.link-texto .ic { width: 13px; height: 13px; stroke-width: 2; margin-left: 3px; vertical-align: -1px; }
.legenda-cor .sw.serie-a { background: var(--serie-a); }
.legenda-cor .sw.serie-b { background: var(--serie-b); }
.legenda-cor .sw.serie-c { background: var(--serie-c); }
.corte-nome { display: block; }
.corte-meta { display: flex; }
.corte-meta span + span::before { content: "\00b7"; margin-right: 10px; color: var(--pauta-forte); }
.corte-sem-valor { font-size: 15px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
.cenarios.bloco { margin-top: 14px; }
.fonte-rodape { margin: 22px 0 0; font-size: 13px; color: var(--tinta-3); line-height: 1.55; overflow-wrap: anywhere; }
.vazio { margin: 0; color: var(--tinta-3); }

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  .conteudo { padding: 8px 28px calc(104px + env(safe-area-inset-bottom)); }
  .topo { padding-left: 28px; padding-right: 28px; }
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas > .grupo-linha:nth-child(2) { border-top: 0; padding-top: 2px; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao { padding: 22px 22px 20px; }
  .abas { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; width: min(560px, calc(100% - 32px)); border-radius: 22px; padding: 4px; box-shadow: var(--sombra), 0 0 0 1px var(--pauta); }
}

/* ---------- computador: menu do lado ---------- */
@media (min-width: 1024px) {
  .moldura { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .topo { display: none; }
  .lateral {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 22px;
    padding: 26px 16px 20px; box-shadow: 1px 0 0 var(--pauta);
  }
  .lateral .marca { display: flex; padding: 0 10px; }
  .lateral .marca-nome { font-size: 16px; white-space: normal; line-height: 1.25; }
  .abas {
    position: static; transform: none; width: auto; display: flex; flex-direction: column; gap: 2px;
    padding: 0; background: none; box-shadow: none; border-radius: 0;
  }
  .aba {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 44px; padding: 0 12px; font-size: 16px; border-radius: 12px;
  }
  .aba::before { inset: 0; top: 0; left: 0; width: auto; height: auto; transform: none; border-radius: 12px; }
  .aba .ic { width: 21px; height: 21px; }
  @media (hover: hover) { .aba:not([aria-current="page"]):hover::before { background: var(--folha-2); } .aba:hover { color: var(--tinta); } .aba[aria-current="page"]:hover { color: var(--verde); } }
  .lateral .botao-sair-lateral { display: inline-flex; margin: auto 0 0; width: 100%; justify-content: flex-start; padding: 0 12px; gap: 12px; }
  body:not(.estado-pronto) .lateral .botao-sair-lateral { display: none; }
  .conteudo { padding: 30px 44px 64px; }
  .tela-cabeca { margin-top: 6px; }
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cenarios { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .cenarios > .cenario { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .cenarios > .cenario > .cenario-descricao { align-self: start; }
  .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opinioes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .aba { font-size: 11px; }
  .cartao { padding: 16px 14px 14px; }
  .par-barras { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* área de toque maior pros links soltos no texto */
.link-texto { position: relative; }
.link-texto::after { content: ""; position: absolute; inset: -10px -4px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .marca-icone { outline-color: oklch(1 0 0 / 0.1); } }
:root[data-tema="escuro"] .marca-icone { outline-color: oklch(1 0 0 / 0.1); }