/* ============================================================
   Dinheiro v4 - o que e NOVO por cima da v3 (que ja esta no ar)
   Nada aqui redesenha a v3: sao acrescimos e correcoes.
   ============================================================ */

:root {
  --muted-deep: #5C6961;   /* salvia AA pra texto pequeno (herdado da v3) */
  --atraso: #A8321F;       /* vermelho escuro do "venceu" (6,7:1 no branco) */
  --brand-ink: #0A5F58;    /* teal escuro: texto pequeno sobre brand-soft (6,7:1) */
  --ok-ink: #2A6842;       /* verde escuro: texto pequeno sobre ok-soft (5,8:1) */
  --amber-ink: #6B4A00;    /* texto do aviso sobre amber-soft (7,3:1) */
  --amber-ink2: #7A5A14;   /* segunda linha do aviso (5,8:1) */
  --amber-icon: #8A5E00;   /* icone do aviso sobre amber-soft (5,2:1) */
  --grafismo: #7E948E;     /* linha do zero e afins: 3,2:1 no branco (WCAG 1.4.11) */
  --trilho: #E4EDEA;       /* trilho da barra de meta */
}

/* ============================================================
   HERO - duas linhas pequenas novas (nenhum numero grande novo)
   A ordem importa: Entrou / Saiu / Sobrou ficam GRUDADOS (a conta
   tem que se ler de uma vez). O aviso e a meta vem DEPOIS do total.
   ============================================================ */

/* "R$ 480 desse total ainda nao caiu na conta" - toca e desce pra lista */
.cad-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted-deep);
  font-family: var(--font-body);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.cad-sub b { color: var(--ink); font-weight: 700; }
.cad-sub i { font-size: 14px; color: var(--muted); }

/* barra da meta: sem numero, o numero exato vive na conta completa */
.meta-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 6px;
}
.meta-bar {
  display: block;
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--trilho);
  overflow: hidden;
}
.meta-bar .fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--brand-strong);   /* 3,1:1 contra o trilho - a barra e o unico sinal */
}
.meta-bar .fill.batida { background: var(--ok); }
.meta-cap {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-deep);
  letter-spacing: -.01em;
}

/* ============================================================
   CONTAS PRA PAGAR - card novo, so aparece quando ha o que pagar
   Vermelho de um lado, verde do outro: os dois cards gemeos da v3
   agora se distinguem sem depender da palavra.
   ============================================================ */
.pagar-head, .receber-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.pagar-head .lbl, .receber-head .lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.pagar-head .lbl i { font-size: 15px; color: var(--danger); }
.receber-head .lbl i { font-size: 15px; color: var(--ok-ink); }
.pagar-head .tot { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--danger); }
.receber-head .tot { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ok-ink); }

/* a grade dos dois cards e a MESMA (gap e padding batem coluna a coluna) */
.pagar-row, .receber-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #EDF3F0;
}
.pagar-row:last-of-type, .receber-row:last-of-type { border-bottom: none; }
.pagar-row .grow, .receber-row .grow { flex: 1; min-width: 0; }
.pagar-row .who, .receber-row .who { font-weight: 600; font-size: 14.5px; }
.pagar-row .det, .receber-row .det { font-size: 12.5px; color: var(--muted-deep); margin-top: 1px; }
.pagar-row .det.tarde { color: var(--atraso); font-weight: 600; }
.pagar-row .valor, .receber-row .valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.btn-paguei {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-paguei:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-paguei:active { transform: scale(.96); }

.pagar-nota, .receber-nota { font-size: 12.5px; color: var(--muted-deep); margin-top: 9px; line-height: 1.5; }
.pagar-vazio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok-ink);
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   QUEM ME DEVE - agrupado por pessoa, valor = o que FALTA
   ============================================================ */
/* toda linha tem DUAS linhas de detalhe (o que é / desde quando).
   Assim nenhuma cresce sozinha quando o texto e maior - era a linha
   da Maria que quebrava o ritmo da lista justo por carregar a novidade */
.receber-row .det .quando { display: block; }
.receber-row .det .parcial { color: var(--ok-ink); font-weight: 700; }
/* "R$ 90" grande e "de R$ 180" pequeno: o valor cobrado e o do pedido
   inteiro moram na mesma coluna, sem repetir numero na linha do texto */
.receber-row .valor small {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-deep);
  margin-top: 1px;
}

/* linha dos ja pagos, so falta marcar */
.baixa-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1.5px solid #C9E5D4;
  border-radius: 12px;
  background: var(--ok-soft);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.baixa-line .grow { flex: 1; min-width: 0; }
.baixa-line .t1 { display: block; font-size: 13.5px; font-weight: 600; color: var(--ok-ink); }
.baixa-line .t2 { display: block; font-size: 12px; color: #3D6F52; margin-top: 1px; }
.baixa-line .cta {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ok-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ============================================================
   SELO da anotacao que veio dos Ingredientes
   (um nome so: a tela do app se chama Ingredientes)
   ============================================================ */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: 1px;
  white-space: nowrap;
}
.selo i { font-size: 12px; }
.anot-row .sub .selo:first-child { margin-left: 0; }

/* ============================================================
   GRAFICO COM LINHA DO ZERO - prejuizo desenha pra baixo
   (na v3 um mes de -R$ 480 tinha o mesmo tamanho de um de -R$ 20)
   ============================================================ */
.bars-zero {
  /* --plot = altura util do grafico; --z = onde fica a linha do zero.
     .72 = 1.264 (melhor mes) / (1.264 + 480), a proporcao real entre o
     maior positivo e o pior negativo - e o que faz -R$ 480 ter tamanho. */
  --plot: 118px;
  --z: .72;
  display: flex;
  gap: 10px;
  height: calc(var(--plot) + 42px);
  padding: 20px 0 22px;
  position: relative;
}
.zbar {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: calc(var(--z) * 100%) calc((1 - var(--z)) * 100%);
  position: relative;
}
.zbar .cima { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.zbar .baixo { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.zbar .fill {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  background: #CBE9E4;
  border-radius: 8px 8px 2px 2px;
}
.zbar .fill.neg { background: #F0C5BA; border-radius: 2px 2px 8px 8px; }
.zbar.now .fill { background: var(--brand); }
/* mes aberto E prejuizo: vermelho, nunca teal. A regra vem DEPOIS
   da de cima de proposito - foi esse o bug da rodada passada. */
.zbar.now .fill.neg { background: var(--danger); }
/* o valor fica FORA da area do grafico (senao ele roubaria altura da barra
   e a proporcao entre os meses sairia errada) */
.zbar .num {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: -.04em;
  /* o valor e filho da barra no DOM (mesmo desenhando fora dela):
     esse tom passa AA contra o branco E contra o verde da barra */
  color: #525E58;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zbar .baixo .num { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 4px; }
.zbar.now .num { color: var(--brand-ink); font-weight: 700; }
.zbar.negbar .num { color: var(--danger); font-weight: 700; }

/* a linha do zero, atravessando o grafico */
.zero-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(20px + var(--plot) * var(--z));
  border-top: 1.5px dashed var(--grafismo);
  pointer-events: none;
}
.zmeses { display: flex; gap: 10px; margin-top: 8px; }
.zmeses span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.zmeses span.now { color: var(--brand-ink); }
.zmeses span.vazio { color: #93A9A3; font-weight: 500; }
.zmeses span.vazio.now { color: var(--brand-ink); font-weight: 600; }
.graf-nota { font-size: 12px; color: var(--muted-deep); margin-top: 8px; line-height: 1.5; }

/* ============================================================
   GASTOS QUE SE REPETEM - agora com dia e estado do mes
   ============================================================ */
.fixo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #EDF3F0;
  font-size: 14px;
}
.fixo-row:last-of-type { border-bottom: none; }
.fixo-row .grow { flex: 1; min-width: 0; }
.fixo-row .k { display: block; color: var(--muted-deep); }
.fixo-row .dia { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.fixo-row .v { font-family: var(--font-display); font-weight: 600; flex: 0 0 auto; }
/* de proposito NAO existe selo pago/atrasado por linha aqui:
   quem pede acao e o card "Contas pra pagar" la em cima. Aqui e estudo,
   e o estado do mes vive no rodape do card, somado. */

/* ============================================================
   ONDE ESTA O SEU LUCRO - 3 listas com margem em R$ e em %
   ============================================================ */
.lucro-tabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.lucro-tabs .lt {
  flex: 1;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted-deep);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 4px;
  -webkit-tap-highlight-color: transparent;
}
.lucro-tabs .lt.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* o % vai na MESMA linha do valor: com <small> em bloco, a coluna do
   lucro ficava 15px mais alta que as outras duas no computador */
.lucro-list .kv .v small {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-deep);
  margin-left: 6px;
}
.lucro-list .kv.fora .k, .lucro-list .kv.fora .v {
  color: var(--muted);
  font-weight: 500;
  font-family: var(--font-body);
  font-size: 12.5px;
}
.lucro-nota { font-size: 12px; color: var(--muted-deep); margin-top: 8px; }

/* aviso de cobertura (produto sem custo na ficha) */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--amber-soft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--amber-ink);
}
.aviso i { font-size: 16px; color: var(--amber-icon); flex: 0 0 auto; margin-top: 1px; }
.aviso .obs { display: block; margin-top: 4px; color: var(--amber-ink2); }
.aviso .aviso-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 2px;
  color: var(--amber-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aviso .aviso-cta i { font-size: 15px; color: var(--amber-ink); margin-top: 0; }

/* ============================================================
   ESCOLHER MES - a lista de meses (evita 7 cliques na seta)
   ============================================================ */
.mes-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mes-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 4px 10px;              /* igual pra todas, inclusive a do mes aberto */
  border: none;
  border-bottom: 1px solid #EDF3F0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mes-pick:last-of-type { border-bottom: none; }
.mes-pick .nome { font-weight: 600; }
.mes-pick .sobrou { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.mes-pick .sobrou.neg { color: var(--danger); }
.mes-pick .sobrou.vazio { color: var(--muted); font-weight: 500; font-family: var(--font-body); font-size: 13px; }
.mes-pick.atual { background: var(--brand-soft); border-radius: 10px; border-bottom: none; }

/* o rotulo do mes vira botao (centrado: sem justify-content ele nascia
   55px pra esquerda, porque text-align nao vale pra item de flex) */
.month-nav .month.pick {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
}
.month-nav .month.pick i { font-size: 15px; color: var(--muted); }

/* ============================================================
   TROCAR DE MES SEM TELA BRANCA
   O rotulo do mes responde na hora (e controle). Os numeros do mes
   velho ficam esmaecidos - a tela INTEIRA, nao so o topo.
   ============================================================ */
.carregando #screen > *,
.carregando .dmain > * { opacity: .38; transition: opacity .18s ease; }
.carregando #screen > .month-nav,
.carregando #screen > .load-slot,
.carregando .dmain > .dhead,
.carregando .dmain > .load-slot { opacity: 1; }

/* a barra de progresso nao pode empurrar a tela: mora num slot de altura 0 */
.load-slot { position: relative; height: 0; }
.load-bar {
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 3px;
  border-radius: 99px;
  background: var(--brand-soft);
  overflow: hidden;
  z-index: 5;
}
.load-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: var(--brand);
  animation: corre 1.1s ease-in-out infinite;
}
@keyframes corre {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(240%); }
}

/* ============================================================
   TOAST COM DESFAZER (a acao escreve no caixa: tem que ter volta)
   ============================================================ */
.toast.com-acao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  max-width: 94%;
}
.toast .t { overflow: hidden; text-overflow: ellipsis; }
.toast .undo {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: #7FE3D8;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 6px;
  min-height: 32px;
}

/* ============================================================
   SHEETS - anotacao que veio dos Ingredientes e a conta do mes
   ============================================================ */
.sw-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--paper);
  margin-top: 10px;
  cursor: pointer;              /* a linha inteira liga e desliga */
  width: 100%;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  min-height: 56px;
}
.sw-line .grow { flex: 1; min-width: 0; }
.sw-line .t1 { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.sw-line .t2 { display: block; font-size: 12px; color: var(--muted-deep); margin-top: 2px; line-height: 1.45; }
.sw-line .switch { flex: 0 0 auto; position: relative; }
.sw-line .switch::before { content: ""; position: absolute; inset: -8px -4px; }

.contexto {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
}
.contexto.ref { color: var(--muted); background: var(--paper); border: 1px dashed var(--line); }

/* linha divisoria com texto dentro do sheet */
.sep-txt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sep-txt::before, .sep-txt::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* a conta do mes: UM total grande (o caixa) e um bloco menor pro
   ingrediente. Eram dois totais com o mesmo desenho. */
.sheet-body .kv .v .neg { color: var(--danger); }
.sheet-body .kv .v .pct { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 4px; }
.fixo-total .v.grande { color: var(--brand-ink); font-size: 18px; }
.fixo-total .v.grande.neg { color: var(--danger); }
.margem-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-top: 9px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-deep);
}
.margem-total .v { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.margem-total + .sheet-sub, .fixo-total + .sheet-sub { margin-top: 10px; }
.sheet-sub.topo { margin-top: 8px; }

/* valor editavel dentro do sheet da compra de ingrediente */
.desp-meta { font-size: 13px; color: var(--muted-deep); margin: 10px 0 2px; line-height: 1.5; }
.desp-meta b { color: var(--ink); }

/* ============================================================
   TELA ESTREITA (o Android de 360px que a dona usa)
   A v3 rolava 25px na horizontal por causa do "Anotar entrada"
   com white-space: nowrap, e as linhas mudavam de altura entre si.
   ============================================================ */
@media (max-width: 460px) {
  .anota { padding: 10px 11px; gap: 9px; }
  .anota .ic { width: 34px; height: 34px; font-size: 18px; }
  .anota b { font-size: 13.5px; }
  .anota small { font-size: 11px; }
  .pagar-row, .receber-row { gap: 8px; }
  .btn-paguei, .btn-cobrar { padding: 0 10px; font-size: 12.5px; }
  .btn-cobrar i { font-size: 15px; }
  .pagar-row .valor, .receber-row .valor { font-size: 14.5px; }
  .pagar-row .det, .receber-row .det { font-size: 12px; }
  .pagar-row .who, .receber-row .who { font-size: 14px; }
}
/* 360px de verdade: o rotulo dos dois botoes de anotar pode quebrar
   em duas linhas - melhor do que a tela rolar de lado */
@media (max-width: 385px) {
  .anota b, .anota small { white-space: normal; }
  .anota { padding: 10px 9px; gap: 8px; }
  .pagar-row .who, .receber-row .who { font-size: 13px; }
  .pagar-row, .receber-row { gap: 6px; }
  .btn-paguei, .btn-cobrar { padding: 0 8px; font-size: 12px; }
  .pagar-row .valor, .receber-row .valor { font-size: 14px; }
}

/* ============================================================
   AJUSTES DE DESKTOP
   ============================================================ */
.dmain { position: relative; }
/* mes vazio: as colunas de "quem me deve" e "anotacoes" somem inteiras
   (senao sobram duas colunas de grade sem nada dentro) */
body.mes-vazio .dgrid.linha2 .dcol.so-mes { display: none; }
.dmain .bars-zero { --plot: 250px; }
.dmain .zbar .num { font-size: 12.5px; }
.dmain .lucro-tabs { display: none; }
.dmain .lucro-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dmain .lucro-3 .lucro-list { display: block !important; }
/* o titulo do card e o titulo de coluna eram o MESMO objeto visual */
.dmain .lucro-3 .lucro-cap {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.lucro-cap { display: none; }
.dmain .lucro-cap { display: block; }
.dmain #lucro-lists { margin-top: 12px; }