/* Celeiro — verde-oliva + palha (linha do Rancho). Mobile-first.
   CSP sem 'unsafe-inline': zero estilo inline no HTML — tudo mora aqui;
   estilo dinâmico só via element.style.prop no app.js. Zero emoji na interface. */

:root {
  --oliva: #5A7030;
  --oliva-escuro: #414F22;
  --oliva-pastel: #DCE5C8;
  --palha: #F6F0DC;
  --fundo: #FDFCF7;
  --texto: #2B3220;
  --texto-suave: #6B7358;
  --ok: #1F9D55;          /* recebe / pago — esmeralda, semântica financeira */
  --atencao: #D99A26;     /* vence logo — âmbar */
  --alerta: #D64545;      /* deve / atrasado — vermelho */
  /* acentos sazonais: SÓ nos painéis */
  --primavera: #D26A94;
  --verao: #D9A62E;
  --outono: #C4693B;
  --inverno: #5E93C9;
  --raio: 14px;
  --sombra: 0 1px 3px rgba(65, 79, 34, .10), 0 6px 18px rgba(65, 79, 34, .06);
  --superficie: #fff;     /* fundo dos cards — vira escuro no modo noite */
  --dado: #B3AC86;        /* barras de magnitude (custo) — neutro, NÃO sazonal nem ação (60-30-10) */
  /* escala tipográfica FIXA (Lote 1) — 6 passos, piso do secundário em 13 */
  --t-xs: 13px;           /* micro: tags, legendas, metadados */
  --t-sm: 14px;           /* secundário: labels, subtítulos de item */
  --t-md: 16px;           /* corpo, inputs (>=16 = iOS não dá zoom) */
  --t-lg: 18px;           /* h3, subcabeçalho de card */
  --t-xl: 24px;           /* h2, cabeçalho de seção/tela */
  --t-display: 30px;      /* números grandes: saldo, patrimônio, runway */
  /* grade de espaçamento FIXA — múltiplos de 4/8 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* identidade Almanaque: display próprio do Celeiro (Fraunces = rótulo de fazenda) + herói */
  --fonte-display: "Fraunces", Georgia, serif;
  --t-hero: 38px;         /* o número do mês — dominante da tela (dinheiro como herói) */
  --ease-suave: cubic-bezier(.16, 1, .3, 1);   /* a curva de TODO movimento do app */
}

/* ---------- modo escuro = FOGUEIRA no campo à noite (B3) ----------
   Não é "cozinha com a luz apagada": é lareira/churrasco. Fundo carvão quente,
   cards cor de tora escura, o acento vira brasa/chama e as sombras têm brilho âmbar. */
html[data-tema="escuro"] {
  --oliva: #E27B36;          /* brasa/chama — acento principal (era verde-oliva) */
  --oliva-escuro: #F2A857;   /* âmbar aceso — títulos e valores */
  --oliva-pastel: #3E2C1E;   /* madeira carbonizada — bordas e chips */
  --palha: #251611;          /* cabeçalho — brasa no escuro */
  --fundo: #150D09;          /* noite + carvão */
  --texto: #F1E3D1;          /* creme quente da luz do fogo */
  --texto-suave: #B79778;    /* taupe quente */
  --superficie: #241A12;     /* card — tora escura (um tom acima do fundo = elevação sem borda) */
  --dado: #6E5A42;           /* barras de custo no escuro — brasa apagada, distinta da chama-ação */
  --ok: #57B368;             /* pago/recebe segue verde (semântica) */
  --atencao: #E8A23A;
  --alerta: #E8583F;
  --sombra: 0 1px 3px rgba(0,0,0,.55), 0 8px 22px rgba(226,123,54,.14);  /* brilho de brasa */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Lote 6: respeita quem pede menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

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

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* trava geral: nunca arrastar a tela pro lado */
  font-variant-numeric: tabular-nums;   /* dinheiro sempre em numerais tabulares (colunas alinham) */
  font-feature-settings: "tnum";
}
html { overflow-x: hidden; }

h1, h2, h3, .marca-nome, .cabecalho-titulo { font-family: var(--fonte-display); font-weight: 600; }

.escondido { display: none !important; }

/* ---------- entrada (login) ---------- */

.tela-cheia {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, var(--palha) 0%, var(--fundo) 70%);
}
.marca { text-align: center; margin-bottom: 22px; }
.marca-nome { font-size: var(--t-display); color: var(--oliva-escuro); letter-spacing: .5px; }
.marca-sub { font-size: var(--t-sm); color: var(--texto-suave); margin-top: 2px; }

/* ---------- cartão ---------- */

.cartao {
  background: var(--superficie);
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--sp-5) var(--sp-4);
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
}
.cartao h2 { font-size: var(--t-xl); color: var(--oliva-escuro); margin-bottom: 4px; }
.cartao h3 { font-size: var(--t-lg); color: var(--oliva-escuro); }

.dica { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: 12px; }

/* ---------- formulário ---------- */

label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--oliva);
  margin: 14px 0 6px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-md);                 /* ≥16px = iOS não dá zoom no foco */
  color: var(--texto);
  background: var(--fundo);
  border: 1.5px solid var(--oliva-pastel);
  border-radius: 10px;
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--oliva);
  box-shadow: 0 0 0 3px rgba(90, 112, 48, .15);
}
/* foco de teclado visível e unificado em TUDO que é interativo (Lote 3) */
.botao:focus-visible, .botao.mini:focus-visible, .chip:focus-visible, .aba:focus-visible,
.icone-botao:focus-visible, .fab:focus-visible, .mini-icone:focus-visible,
.mais-opcoes:focus-visible, .seletor-mes button:focus-visible, .item:focus-visible,
.caixa-card:focus-visible, .acerto-card:focus-visible, .barra-linha.clicavel:focus-visible {
  outline: 3px solid var(--oliva);
  outline-offset: 2px;
}
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* BUG FIX (A3): sem min-width:0 os campos de data têm largura mínima de conteúdo e
   estouram a track do grid → scroll horizontal (a data "Até" vazava pra fora da tela). */
.linha-2 > * { min-width: 0; }
input[type=date], input[type=month] { min-width: 0; max-width: 100%; }

.valor-linha { display: flex; align-items: center; gap: 8px; }
.valor-prefixo { font-size: var(--t-xl); color: var(--texto-suave); font-weight: 600; }
.campo-valor { font-size: var(--t-display) !important; font-weight: 700; padding: 8px 12px; }
.campo-curto { max-width: 100px; }                 /* parcelas: não precisa ser gigante */
.rotulo-hint { font-weight: 400; color: var(--texto-suave); font-size: var(--t-xs); }

.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texto); }
.checkbox input { width: auto; }

/* ---------- botões ---------- */

.botao {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: var(--t-md);
  color: #fff;
  background: var(--oliva);
  border: none;
  border-radius: 11px;
  padding: var(--sp-3) var(--sp-4);
  margin-top: 14px;
  cursor: pointer;
  transition: background .12s, transform .04s;
}
.botao:active { transform: translateY(1px); }
.botao:hover { background: var(--oliva-escuro); }
.botao:disabled { opacity: .55; cursor: default; }
.botao.grande { font-size: var(--t-lg); padding: 15px; }
.botao.fantasma { background: transparent; color: var(--oliva); border: 1.5px solid var(--oliva-pastel); }
.botao.fantasma:hover { background: var(--palha); }
.botao.mini { width: auto; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sm); padding: 9px 14px; margin-top: 0; min-height: 44px; }

.mais-opcoes {
  background: none; border: none; color: var(--oliva); font: inherit; font-weight: 600;
  font-size: var(--t-sm); cursor: pointer; margin-top: 16px; padding: 4px 0; text-decoration: underline;
}
.icone-botao {
  background: none; border: none; color: var(--oliva-escuro); cursor: pointer;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;   /* alvo de toque ≥44 */
}

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  color: var(--oliva-escuro); background: var(--palha);
  border: 1.5px solid var(--oliva-pastel); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; transition: all .12s;
  min-height: 44px; display: inline-flex; align-items: center;   /* alvo de toque ≥44 */
}
.chip:hover { border-color: var(--oliva); }
.chip.ativa { background: var(--oliva); color: #fff; border-color: var(--oliva); }

/* ---------- mensagens ---------- */

.msg { font-size: var(--t-sm); margin-top: 10px; min-height: 1.1em; }
.msg.erro { color: var(--alerta); }
.msg.ok { color: var(--ok); }

/* ---------- cabeçalho + palco + abas ---------- */

.cabecalho {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px calc(12px + env(safe-area-inset-top, 0px));
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  background: var(--palha);
  border-bottom: 1px solid var(--oliva-pastel);
}
.cabecalho-titulo { font-size: var(--t-xl); color: var(--oliva-escuro); }
.cabecalho-acoes { display: flex; align-items: center; gap: 10px; }

.selo-pendentes {
  font-size: var(--t-xs); font-weight: 600; color: #fff; background: var(--atencao);
  border-radius: 999px; padding: 3px 9px;
}

.palco {
  max-width: 560px; margin: 0 auto;
  padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px));
}
.tela { display: none; }
.tela.ativa { display: block; animation: entra .22s var(--ease-suave); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--superficie); border-top: 1px solid var(--oliva-pastel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.aba {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; color: var(--texto-suave); font: inherit; font-size: var(--t-xs); font-weight: 500;
}
.aba svg { width: 23px; height: 23px; }
.aba.ativa { color: var(--oliva); }
.aba.ativa svg { color: var(--oliva); }

/* ---------- seletor de mês ---------- */

.seletor-mes {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--superficie); border: none; border-radius: var(--raio);
  padding: 8px 12px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.seletor-mes button {
  background: none; border: none; color: var(--oliva); cursor: pointer;
  font-size: var(--t-xl); line-height: 1;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;   /* alvo ≥44 */
}
.seletor-mes .mes-rotulo { font-weight: 600; font-size: var(--t-md); color: var(--oliva-escuro); text-transform: capitalize; }

/* ---------- listas / itens ---------- */

.item {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border: none; border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-bottom: 8px; box-shadow: var(--sombra);
}
.item-corpo { flex: 1; min-width: 0; }
.item-titulo { font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: var(--t-xs); color: var(--texto-suave); margin-top: 1px; }
.item-valor { font-weight: 700; font-size: var(--t-md); white-space: nowrap; }
.item.estornado { opacity: .5; }
.item.estornado .item-titulo { text-decoration: line-through; }
.item .acoes-item { display: flex; gap: 4px; }
.mini-icone {
  background: none; border: none; cursor: pointer; color: var(--texto-suave);
  font-size: var(--t-sm); border-radius: 8px;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;   /* alvo ≥44 */
}
.mini-icone:hover { background: var(--palha); color: var(--oliva-escuro); }
/* "×" de remover DENTRO de um chip (ação rara): não força o chip a 62px; mantém o chip em 44 */
.chip .mini-icone { min-width: 30px; min-height: 30px; margin-left: 2px; }

.tag {
  font-size: var(--t-xs); font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--oliva-pastel); color: var(--oliva-escuro);
}
.tag.parcela { background: #E7EDF4; color: var(--inverno); }
.tag.cruzado { background: #F4E7EE; color: var(--primavera); }

.vazio { text-align: center; color: var(--texto-suave); padding: 28px 12px; font-size: var(--t-sm); }
.titulo-secao { margin: 22px 0 10px; color: var(--oliva-escuro); font-size: var(--t-lg); }

/* ---------- resumo visões (competência × caixa) ---------- */

.resumo-visoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.visao-card {
  background: var(--superficie); border: none; border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--sombra);
}
.visao-rotulo { font-size: var(--t-xs); color: var(--texto-suave); font-weight: 600; }
.visao-valor { font-size: var(--t-lg); font-weight: 700; color: var(--oliva-escuro); margin-top: 3px; }
.visao-nota { font-size: var(--t-xs); color: var(--texto-suave); margin-top: 2px; }

/* ---------- contas do mês ---------- */

.faixa-total {
  background: var(--oliva-escuro); color: var(--palha); border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline;
}
.faixa-total .rotulo { font-size: var(--t-sm); opacity: .85; }
.faixa-total .valor { font-size: var(--t-xl); font-weight: 700; }
.acoes-linha { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.conta-paga .item-titulo { color: var(--texto-suave); }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ponto.pago { background: var(--ok); }
.ponto.vence { background: var(--atencao); }
.ponto.atrasado { background: var(--alerta); }

/* ---------- acerto ---------- */

.acerto-card {
  background: var(--superficie); border: none; border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-bottom: 10px; box-shadow: var(--sombra); cursor: pointer;
}
.acerto-frase { font-size: var(--t-md); }
.acerto-frase b { color: var(--alerta); }
.acerto-valor { font-size: var(--t-xl); font-weight: 700; color: var(--oliva-escuro); margin-top: 4px; }
.extrato { margin-top: 12px; border-top: 1px dashed var(--oliva-pastel); padding-top: 10px; }
.extrato-linha { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); padding: 4px 0; }
.extrato-linha .quit { color: var(--ok); }
.saldo-quite { color: var(--ok); font-weight: 600; }

/* ---------- painéis / gráficos (sem lib; princípios dataviz) ---------- */

.sub-abas { margin-bottom: 16px; }
.painel { animation: entra .22s var(--ease-suave); }

.grafico { margin: 6px 0 18px; }
.barra-linha { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.barra-rotulo { font-size: var(--t-xs); color: var(--texto-suave); text-transform: capitalize; }
.barra-trilho { background: var(--palha); border-radius: 6px; height: 22px; overflow: hidden; }
.barra-preenche { height: 100%; border-radius: 6px; min-width: 2px; background: var(--oliva); transition: width .45s var(--ease-suave); }
.barra-valor { font-size: var(--t-xs); font-weight: 600; color: var(--oliva-escuro); white-space: nowrap; }

.est-primavera { background: var(--primavera); }
.est-verao { background: var(--verao); }
.est-outono { background: var(--outono); }
.est-inverno { background: var(--inverno); }
.legenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--t-xs); color: var(--texto-suave); margin-top: 4px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.estacao-bloco { margin-bottom: 18px; }
.estacao-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.estacao-cab i { width: 14px; height: 14px; border-radius: 4px; }
.estacao-cab .nome { font-family: var(--fonte-display); font-size: var(--t-lg); color: var(--oliva-escuro); text-transform: capitalize; }
.estacao-cab .tot { margin-left: auto; font-weight: 700; }
.comparacao { font-size: var(--t-xs); color: var(--texto-suave); margin-top: 6px; }
.comparacao .sobe { color: var(--alerta); font-weight: 600; }
.comparacao .desce { color: var(--ok); font-weight: 600; }
.insight { font-size: var(--t-sm); color: var(--texto); background: var(--palha); border-radius: 10px; padding: 8px 12px; margin-top: 4px; }
/* Painel Etapa 4 */
.barra-linha.clicavel { cursor: pointer; }
.barra-linha.clicavel:hover .barra-trilho { outline: 2px solid var(--oliva-pastel); }
.mes-detalhe { grid-column: 1 / -1; margin: -2px 0 10px 68px; padding-left: 10px; border-left: 2px solid var(--oliva-pastel); }
.patr-toggle { margin-top: 12px; }
.patr-toggle .chip { flex: 1; text-align: center; }
.runway-num { font-size: var(--t-display); font-weight: 700; color: var(--oliva-escuro); }
.runway-num b { font-size: var(--t-display); }

/* investir */
.caixa-card {
  background: var(--superficie); border: none; border-radius: 12px;
  padding: var(--sp-3) var(--sp-4); margin-bottom: 9px; box-shadow: var(--sombra);
}
.caixa-topo { display: flex; justify-content: space-between; align-items: baseline; }
.caixa-nome { font-weight: 600; }
.caixa-saldo { font-weight: 700; font-size: var(--t-lg); color: var(--oliva-escuro); }
.caixa-sub { margin-left: 14px; border-left: 2px solid var(--oliva-pastel); padding-left: 12px; }
/* acordeão de ativos (progressive disclosure) — categorias fechadas por padrão */
.acordeao { padding: 0; overflow: hidden; }
.acord-cab { width: 100%; background: none; border: none; cursor: pointer; font: inherit; color: var(--oliva-escuro);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--sp-4); min-height: 44px; }
.acord-nome { font-family: var(--fonte-display); font-size: var(--t-lg); }
.acord-cont { font-family: Inter, sans-serif; font-size: var(--t-xs); color: var(--texto-suave); background: var(--palha); border-radius: 999px; padding: 1px 8px; }
.acord-dir { display: flex; align-items: center; gap: 10px; }
.acord-total { font-weight: 700; font-size: var(--t-md); }
.acord-seta { color: var(--texto-suave); font-size: var(--t-md); width: 16px; text-align: center; display: inline-block; transition: transform .22s var(--ease-suave); }
.acord-seta.girada { transform: rotate(90deg); }
.acord-corpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s var(--ease-suave); }
.acord-corpo.fechado { grid-template-rows: 0fr; }
.acord-inner { overflow: hidden; min-height: 0; padding: 0 var(--sp-4) var(--sp-2); }
.acord-corpo .item { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--oliva-pastel); margin-bottom: 0; padding: var(--sp-3) 0; }
.acord-corpo .item:last-child { border-bottom: none; }
.progresso { background: var(--palha); border-radius: 6px; height: 9px; overflow: hidden; margin-top: 8px; }
.progresso i { display: block; height: 100%; background: var(--oliva); border-radius: 6px; }
.progresso-legenda { font-size: var(--t-xs); color: var(--texto-suave); margin-top: 4px; }
.objetivo-conquistado .caixa-nome { color: var(--ok); }
/* aba Metas — lista rica por categoria (Etapa 2) */
.alvo-agora { margin-top: 12px; }
.alvo-agora-nome { font-size: var(--t-sm); color: var(--texto); margin-bottom: 8px; }
.cat-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cat-cab h3 { color: var(--oliva-escuro); }
.cat-soma { font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.item-link { display: inline-block; margin-top: 4px; font-size: var(--t-xs); color: var(--oliva); text-decoration: underline; }
.objetivo-atual { border-color: var(--oliva); box-shadow: 0 0 0 2px rgba(90,112,48,.15), var(--sombra); }
.objetivo-conquistado { opacity: .62; }
.objetivo-conquistado .item-titulo { text-decoration: line-through; color: var(--texto-suave); }
.patrimonio {
  background: linear-gradient(135deg, var(--oliva-escuro), var(--oliva));
  color: var(--palha); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.patrimonio .rotulo { font-size: var(--t-sm); opacity: .85; }
.patrimonio .valor { font-size: var(--t-display); font-weight: 700; }

/* saúde */
.saude { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.saude .metrica { background: var(--palha); border-radius: 9px; padding: 8px 12px; font-size: var(--t-sm); }
.saude .metrica b { display: block; font-size: var(--t-lg); color: var(--oliva-escuro); }

/* busca */
.busca { margin-bottom: 12px; }

/* barra de carregando global + toast (Lote 4) */
.carregando-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: linear-gradient(90deg, transparent, var(--oliva), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: carregando 1s infinite linear;
}
@keyframes carregando { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); z-index: 60;
  background: var(--oliva-escuro); color: var(--palha);
  font-size: var(--t-sm); font-weight: 600; padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--sombra); opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.mostra { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--alerta); color: #fff; }

/* previsão de ganhos (Etapa 3, compactada 11/07) */
.prev-totais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; }
.prev-tot { background: var(--palha); border-radius: 10px; padding: 8px 6px; text-align: center; }
.prev-tot span { display: block; font-size: var(--t-xs); color: var(--texto-suave); font-weight: 600; }
.prev-tot b { display: block; font-size: var(--t-sm); color: var(--oliva-escuro); white-space: nowrap; }
.prev-fonte-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: var(--t-sm); padding: 7px 0; border-top: 1px dashed var(--oliva-pastel); }
.prev-fonte-top .prev-bruto { color: var(--oliva-escuro); white-space: nowrap; }

/* topo da config (Fechar) + toggle de tema */
.config-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.config-topo .config-titulo { font-family: var(--fonte-display); font-size: var(--t-xl); color: var(--oliva-escuro); }
.config-topo .botao.mini { margin-top: 0; }
.tema-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-linha span { font-weight: 500; color: var(--texto); }

/* ---------- modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(43, 50, 32, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal-caixa {
  background: var(--fundo); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 560px; padding: var(--sp-5) var(--sp-4) calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 92vh; overflow-y: auto; box-shadow: 0 -6px 24px rgba(0,0,0,.2);
  animation: sobe .2s ease;
}
@keyframes sobe { from { transform: translateY(100%); } to { transform: none; } }
.modal-titulo {
  font-family: var(--fonte-display); font-size: var(--t-xl); color: var(--oliva-escuro);
  margin-bottom: 12px; line-height: 1.4; position: sticky; top: 0; z-index: 2;
  background: var(--fundo); padding-top: 10px;   /* respiro no topo (acentos não cortam) + fica visível ao rolar */
}
.modal-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.modal-acoes .botao { margin-top: 0; flex: 1 1 auto; min-width: 120px; }

@media (min-width: 620px) {
  .modal { align-items: center; }
  .modal-caixa { border-radius: 18px; }
}

/* ---------- v2: 5 painéis, FAB, custo/ganho, tráfego ---------- */

.sub-painel { animation: entra .22s var(--ease-suave); }

/* FAB — registro sempre à mão */
.fab {
  position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 30; width: 58px; height: 58px; border-radius: 50%; border: none;
  background: var(--oliva); color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(65, 79, 34, .4);
}
.fab:active { transform: translateY(1px); }
.fab svg { width: 28px; height: 28px; }

/* toggle custo/ganho no registro */
.toggle-tipo { margin-bottom: 6px; }
.toggle-tipo .chip { flex: 1; text-align: center; }
.chip.chip-custo.ativa { background: var(--alerta); border-color: var(--alerta); }
.chip.chip-ganho.ativa { background: var(--ok); border-color: var(--ok); }

/* card de saldo do mês */
.saldo-card { border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; color: #fff; box-shadow: var(--sombra); }
.saldo-card.positivo { background: linear-gradient(135deg, #23A65C, #14713F); }
.saldo-card.negativo { background: linear-gradient(135deg, #C06A5B, #9A4A3E); }  /* Lote 5: terracota calmo, não vermelho de alarme */
.saldo-nota { font-size: var(--t-sm); opacity: .92; margin-top: 8px; font-weight: 500; }
/* fechamento do mês (peak-end) */
.bloco-fech { display: block; width: 100%; margin-top: var(--sp-1); }
.fech-linha { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--oliva-pastel); font-size: var(--t-md); }
.fech-linha:last-child { border-bottom: none; }
.fech-val { font-weight: 700; font-size: var(--t-lg); color: var(--oliva-escuro); }
.fech-destaque { background: var(--palha); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); font-size: var(--t-md); font-weight: 600; color: var(--oliva-escuro); }
.fech-nota { margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--texto-suave); }
.saldo-topo { display: flex; justify-content: space-between; font-size: var(--t-xs); opacity: .92; }
.saldo-rotulo { font-size: var(--t-sm); opacity: .85; margin-top: 8px; }
.saldo-valor { font-size: var(--t-display); font-weight: 700; }

/* cores custo/ganho */
.cor-custo { background: var(--dado) !important; }
.cor-ganho { background: var(--ok) !important; }
.cor-custo-txt { color: var(--alerta); }
.cor-ganho-txt { color: var(--ok); }

/* KPIs de tráfego */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi { background: var(--superficie); border: none; border-radius: 12px; padding: var(--sp-3) var(--sp-4); box-shadow: var(--sombra); }
.kpi-rot { font-size: var(--t-xs); color: var(--texto-suave); font-weight: 600; }
.kpi-val { font-size: var(--t-lg); font-weight: 700; color: var(--oliva-escuro); margin-top: 2px; }

textarea { width: 100%; font: inherit; font-size: var(--t-md); border: 1.5px solid var(--oliva-pastel); border-radius: 10px; padding: var(--sp-3) var(--sp-4); resize: vertical; background: var(--fundo); }

/* carteira alvo × atual */
.classe-linha { margin-bottom: 12px; }
.classe-top { display: flex; justify-content: space-between; font-size: var(--t-sm); font-weight: 600; color: var(--oliva-escuro); margin-bottom: 5px; }
.alvo-tag { font-size: var(--t-xs); color: var(--texto-suave); font-weight: 500; }
.classe-trilho { position: relative; height: 20px; }
.alvo-marca { position: absolute; top: -3px; width: 2px; height: 26px; background: var(--oliva-escuro); }
.alvo-marca::after { content: ""; position: absolute; top: -4px; left: -3px; border: 4px solid transparent; border-top-color: var(--oliva-escuro); }
.classe-val { font-size: var(--t-xs); color: var(--texto-suave); text-align: right; margin-top: 3px; }
.subalocado { background: var(--oliva-pastel); color: var(--oliva-escuro); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-top: 10px; font-size: var(--t-sm); text-align: center; }

/* ====== TELA DE BLOQUEIO (Face ID / WebAuthn) ====== */
.bloqueio {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fundo);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.bloqueio-caixa {
  text-align: center; max-width: 340px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.bloqueio-marca {
  font-family: var(--fonte-display); font-size: var(--t-display);
  color: var(--oliva-escuro); letter-spacing: .5px;
}
.bloqueio-texto { color: var(--texto-suave); font-size: var(--t-md); margin: 0; }
.bloqueio-caixa .botao { max-width: 260px; }

/* ====== CAMPO DE DATA CUSTOM (texto curto controlado; input nativo invisível por cima) ====== */
.campo-data { position: relative; display: block; width: 100%; margin-top: 4px; }
.campo-data-texto {
  display: block; width: 100%; box-sizing: border-box;
  padding: 12px 14px; min-height: 46px; line-height: 1.5;
  border: 1.5px solid var(--oliva-pastel); border-radius: 10px;
  background: var(--superficie); color: var(--texto); font-size: var(--t-md);
}
.campo-data-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
}

/* ====== GRÁFICO DE PIZZA (donut) ====== */
.pizza-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pizza-svg { width: 170px; height: 170px; transform: rotate(-90deg); }   /* fatias começam no topo */
.pizza-legenda { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.pizza-item { display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); color: var(--texto); }
.pizza-item i { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.patrimonio.clicavel { cursor: pointer; }

/* utilitárias CSP-safe (substituem style= inline que a CSP bloqueia) */
.espaco-topo { margin-top: var(--sp-4); }
.erro-boot { padding: var(--sp-5); font-family: Inter, system-ui, sans-serif; }

/* ============================================================
   IDENTIDADE "ALMANAQUE DA FAZENDA" — assinaturas visuais
   ============================================================ */

/* -- assinatura 1+10: horizonte de campo sazonal no cabeçalho (dia) / noite estrelada (fogueira) -- */
.cabecalho { overflow: hidden; }
.cabecalho > *:not(.horizonte) { position: relative; z-index: 1; }
.horizonte { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .30; }
.horizonte svg { display: block; width: 100%; height: 100%; }
#hz-tras { opacity: .45; }
#hz-frente { opacity: .75; }
#hz-sol { opacity: .65; }
.hz-estrelas { display: none; }
.hz-estrelas circle { fill: #EFE3C2; }
html[data-tema="escuro"] .horizonte { opacity: .45; }
html[data-tema="escuro"] .hz-estrelas { display: block; }

/* -- assinatura 3: dinheiro como herói (o número do mês domina a tela) -- */
.saldo-valor { font-size: var(--t-hero); font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }

/* -- assinatura 4: metas = silos que enchem de baixo pra cima -- */
.silo-linha { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.silo-svg { width: 42px; height: 50px; flex: 0 0 auto; }
.silo-svg .silo-tracado { stroke: var(--oliva); fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.silo-svg .silo-nivel { fill: var(--oliva); opacity: .85; }
.silo-svg.cheio .silo-nivel { fill: var(--ok); }
.silo-info { flex: 1 1 auto; min-width: 0; }

/* -- assinatura 5: estados vazios ilustrados (spot SVG de campo) -- */
.vazio-spot { width: 76px; height: 60px; margin: 0 auto 10px; display: block; color: var(--texto-suave); opacity: .75; }
.vazio-spot path, .vazio-spot circle, .vazio-spot line, .vazio-spot rect { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* -- assinatura 7: carimbo PAGO (stamp) + FAB satisfatório -- */
.toast.carimbo {
  background: transparent; color: var(--ok);
  border: 3px solid var(--ok); border-radius: 8px;
  text-transform: uppercase; letter-spacing: 4px; font-weight: 800; font-size: var(--t-lg);
  padding: 8px 18px; transform: translate(-50%, 0) rotate(-5deg);
  animation: stampa .22s ease-out;
}
.toast.carimbo.mostra { transform: translate(-50%, 0) rotate(-5deg); }
@keyframes stampa { from { transform: translate(-50%, 0) rotate(-5deg) scale(1.7); opacity: 0; } to { transform: translate(-50%, 0) rotate(-5deg) scale(1); opacity: 1; } }
.tag-pago {
  display: inline-block; border: 2px solid var(--ok); color: var(--ok); border-radius: 6px;
  padding: 0 6px; font-size: var(--t-xs); font-weight: 800; letter-spacing: 1.5px;
  transform: rotate(-4deg); margin-left: 6px; vertical-align: middle;
}
.fab { transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s; }
.fab:active { transform: scale(.9); box-shadow: 0 2px 8px rgba(65, 79, 34, .5); }

/* ============================================================
   MOTION PREMIUM — tudo em transform/opacity, tudo sob prefers-reduced-motion
   ============================================================ */
/* modal: fundo esmaece na entrada; saída desce + esmaece (o JS segura 190ms) */
.modal { animation: fade-in .18s ease; }
@keyframes fade-in { from { opacity: 0; } }
.modal.saindo { opacity: 0; transition: opacity .18s ease; }
.modal.saindo .modal-caixa { transform: translateY(100%); transition: transform .19s ease-in; }

/* toque com resposta física em tudo que é lista/card clicável */
.item, .caixa-card, .acerto-card { transition: transform .1s ease; }
.item:active, .caixa-card:active, .acerto-card:active, .barra-linha.clicavel:active { transform: scale(.985); }
.chip:active { transform: scale(.96); }
.icone-botao:active, .mini-icone:active, .seletor-mes button:active { transform: scale(.88); }
.icone-botao, .mini-icone, .seletor-mes button { transition: transform .12s var(--ease-suave); }

/* aba ativa: micro-bounce no ícone */
.aba svg { transition: transform .18s var(--ease-suave); }
.aba.ativa svg { transform: scale(1.1) translateY(-1px); }

/* cascata sutil dos primeiros cards ao entrar na tela */
.tela.ativa .cartao, .sub-painel .cartao { animation: entra .24s var(--ease-suave) both; }
.tela.ativa .cartao:nth-child(2), .sub-painel .cartao:nth-child(2) { animation-delay: .04s; }
.tela.ativa .cartao:nth-child(3), .sub-painel .cartao:nth-child(3) { animation-delay: .08s; }
.tela.ativa .cartao:nth-child(4), .sub-painel .cartao:nth-child(4) { animation-delay: .12s; }

/* pizza se desenha · silo enche · céu muda de estação suavemente */
.pizza-svg circle { transition: stroke-dasharray .55s var(--ease-suave); }
.silo-nivel { transition: y .4s var(--ease-suave), height .4s var(--ease-suave); }
#hz-tras, #hz-frente, #hz-sol { transition: fill .6s ease; }

/* rótulo do mês desliza na direção da seta */
@keyframes desl-esq { from { opacity: .2; transform: translateX(-10px); } }
@keyframes desl-dir { from { opacity: .2; transform: translateX(10px); } }
.mes-rotulo.desl-esq { animation: desl-esq .16s var(--ease-suave); }
.mes-rotulo.desl-dir { animation: desl-dir .16s var(--ease-suave); }

/* Colheita: as linhas entram em cascata (momento cerimonial) */
.fechamento .fech-linha, .fechamento .fech-destaque, .fechamento .fech-nota { animation: entra .3s var(--ease-suave) both; }
.fechamento .fech-linha:nth-child(2) { animation-delay: .06s; }
.fechamento .fech-linha:nth-child(3) { animation-delay: .12s; }
.fechamento .fech-destaque { animation-delay: .2s; }
.fechamento .fech-nota { animation-delay: .28s; }