/* AS TELAS DA V2 · Contas, Transações e as peças que elas estreiam.
 *
 * Só var(). Nenhuma cor literal, nenhum segundo bloco escuro: o tema sai de
 * `tokens.css` e nada aqui precisa saber em qual deles está.
 *
 * O vidro aparece em cinco lugares e em mais nenhum: barra de filtro, folha,
 * lente do topo, botão flutuante e a lateral (esta em `base.css`). São os que
 * FLUTUAM, e é essa a informação que o desfoque passa: a peça está solta do
 * resto, não empilhada no meio dele.
 */

/* ==================================================================
   LENTE · o bloco de topo das telas de dinheiro
   ================================================================== */
.lente{
  position:relative; overflow:hidden;
  padding:var(--e-6) var(--e-5);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 12% -10%, var(--brand-soft) 0%, transparent 58%),
    var(--surface);
}
/* o brilho que caminha devagar. É a única animação contínua do produto, e ela
   some inteira em prefers-reduced-motion, mais abaixo. */
.lente::after{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:180%;
  background:radial-gradient(45% 60% at 30% 40%,
    color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  animation:respira 14s var(--curva) infinite alternate;
  pointer-events:none;
}
@keyframes respira{ from{ transform:translate3d(-6%,0,0) scale(1) } to{ transform:translate3d(8%,3%,0) scale(1.12) } }

.lente h2{ margin:0; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:var(--peso-medio) }
.lente .numerao{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(30px, 7vw, 44px); font-weight:var(--peso-medio); letter-spacing:-.03em;
  color:var(--ink); margin:var(--e-2) 0 0; line-height:1.05 }
.lente .piada{ margin:var(--e-2) 0 0; color:var(--ink-3); font-size:13px; max-width:46ch }

/* as três fatias de liquidez, embaixo do número grande */
.fatias{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2);
  margin-top:var(--e-5); position:relative }
.fatia{ padding:var(--e-3); border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); min-width:0 }
.fatia b{ display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-weight:var(--peso-medio); font-size:15px;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fatia span{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px }

/* ==================================================================
   CONTAS
   ================================================================== */
.contas-grade{ display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }

.conta-card{
  display:grid; grid-template-columns:auto 1fr; gap:var(--e-3);
  align-items:start; padding:var(--e-4); min-width:0;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh-1); text-align:left; width:100%; cursor:pointer;
  transition:transform var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.conta-card:hover{ transform:translateY(-1px); box-shadow:var(--sh-2) }
.conta-card[data-inativa="sim"]{ opacity:.62 }

/* O monograma. `--marca` vem do style inline da linha, e é o único lugar onde
   cor literal aparece no projeto: ela é dado do usuário, não decisão de
   design, então não pode virar token. */
.selo{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-weight:var(--peso-forte); font-size:14px; letter-spacing:-.02em;
  background:var(--marca, var(--brand)); color:var(--marca-ink, var(--brand-ink));
  overflow:hidden;
}
.selo img{ width:100%; height:100%; object-fit:cover; display:block }

.conta-card .nome{ font-weight:var(--peso-medio); color:var(--ink); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.conta-card .meta{ font-size:12px; color:var(--ink-3); margin-top:1px }
.conta-card .saldo{ font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:19px; font-weight:var(--peso-medio);
  color:var(--ink); margin-top:var(--e-2); letter-spacing:-.02em }
.conta-card .saldo.negativo{ color:var(--critical) }
.conta-card .saldo.desconhecido{ color:var(--ink-3); font-size:14px }

.etiqueta{ display:inline-block; font-size:10.5px; padding:2px 7px; border-radius:var(--raio-cheio);
  background:var(--surface-3); color:var(--ink-2); letter-spacing:.02em }
.etiqueta.restrita{ background:var(--warn-soft); color:var(--warn) }
.etiqueta.bloqueada{ background:var(--critical-soft); color:var(--critical) }

/* ==================================================================
   PIRULITO · comparação entre contas, instituições e categorias
   ------------------------------------------------------------------
   Barra inteira é peso demais para comparar oito coisas, e pizza com oito
   fatias não se lê. O talo fino com a bolinha na ponta compara pela POSIÇÃO,
   que é o que o olho faz melhor.
   ================================================================== */
.pirulitos{ display:grid; gap:var(--e-3); margin:0; padding:0; list-style:none }
.pirulito{ display:grid; grid-template-columns:minmax(64px,28%) 1fr auto; gap:var(--e-3);
  align-items:center; min-width:0 }
.pirulito .rot{ font-size:12px; color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.pirulito .talo{ position:relative; height:10px; min-width:0 }
.pirulito .talo::before{ content:""; position:absolute; left:0; top:50%; height:1px;
  width:100%; background:var(--grid) }
.pirulito .haste{ position:absolute; left:0; top:50%; height:2px; border-radius:2px;
  background:var(--cor, var(--brand)); transform:translateY(-50%);
  width:var(--frac,0%); transition:width var(--t-lento) var(--curva) }
.pirulito .bola{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--cor, var(--brand)); transform:translate(-50%,-50%);
  left:var(--frac,0%); transition:left var(--t-lento) var(--curva);
  box-shadow:0 0 0 3px var(--surface) }
.pirulito .val{ font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink-2); white-space:nowrap }

/* ==================================================================
   LINHA + ÁREA · evolução do saldo
   ================================================================== */
.figura{ width:100%; height:auto; display:block; overflow:visible }
.figura .area{ fill:var(--brand); opacity:.10 }
.figura .linha{ fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round }
.figura .ponto{ fill:var(--surface); stroke:var(--brand); stroke-width:2 }
.figura .eixo{ stroke:var(--grid); stroke-width:1 }
.figura text{ font-size:10px; fill:var(--ink-3) }
/* o traço se desenha uma vez, na entrada */
.figura .linha.anima{ stroke-dasharray:var(--comprimento); stroke-dashoffset:var(--comprimento);
  animation:tracar 900ms var(--curva) forwards }
@keyframes tracar{ to{ stroke-dashoffset:0 } }

/* ==================================================================
   TRANSAÇÕES
   ================================================================== */
.barra-filtro{
  position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:var(--e-2);
  padding:var(--e-3); margin:0 0 var(--e-4);
  border:1px solid var(--vidro-linha); border-radius:var(--r);
  background:var(--vidro); backdrop-filter:var(--desfoque);
  -webkit-backdrop-filter:var(--desfoque);
}
.barra-filtro .cresce{ flex:1 1 150px; min-width:0 }

.dia{ margin:0 0 var(--e-5) }
.dia-cab{ display:flex; align-items:baseline; gap:var(--e-3); padding:0 var(--e-1) var(--e-2) }
.dia-cab h3{ margin:0; font-size:12px; font-weight:var(--peso-medio); color:var(--ink-2);
  letter-spacing:.02em }
.dia-cab .tot{ margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:12px; color:var(--ink-3) }

.linhas{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden }
.lanc{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--e-3);
  align-items:center; padding:var(--e-3) var(--e-4); background:var(--surface);
  width:100%; text-align:left; min-width:0; border:none; cursor:pointer;
  transition:background var(--t-rapido) var(--curva);
}
.lanc:hover{ background:var(--surface-2) }
.lanc .ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-2); flex:none }
.lanc .ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.lanc[data-tipo="entrada"] .ico{ background:var(--good-soft); color:var(--good) }
.lanc[data-natureza="transferencia"] .ico{ background:var(--apoio-soft); color:var(--apoio) }
.lanc[data-natureza="estorno"] .ico{ background:var(--warn-soft); color:var(--warn) }

.lanc .desc{ font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }
.lanc .sub{ font-size:11.5px; color:var(--ink-3); margin-top:1px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.lanc .vlr{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:14px; color:var(--ink); white-space:nowrap; text-align:right }
.lanc[data-tipo="entrada"] .vlr{ color:var(--good) }
/* Previsto e cancelado NÃO mudam de cor: mudam de peso e de opacidade. Cor
   aqui viraria semáforo, e o olho passaria a ler "vermelho = ruim" onde só
   quer dizer "ainda não aconteceu". */
.lanc[data-status="prevista"]{ opacity:.72 }
.lanc[data-status="prevista"] .vlr{ font-style:italic }
.lanc[data-status="cancelada"]{ opacity:.5 }
.lanc[data-status="cancelada"] .desc{ text-decoration:line-through }

/* ==================================================================
   VAZIO · a primeira vez
   ================================================================== */
.vazio{ text-align:center; padding:var(--e-12) var(--e-5); border:1px dashed var(--line-strong);
  border-radius:var(--r-lg); background:var(--surface-2) }
.vazio .emoji{ font-size:30px; line-height:1; margin-bottom:var(--e-3); opacity:.8 }
.vazio h3{ margin:0 0 var(--e-2); font-size:16px; font-weight:var(--peso-medio); color:var(--ink) }
.vazio p{ margin:0 auto var(--e-5); color:var(--ink-3); font-size:13.5px; max-width:44ch }

/* ==================================================================
   FOLHA · o "Mais" do celular e as operações rápidas
   ================================================================== */
.folha{ border:none; padding:0; background:transparent; max-width:none; width:100%;
  margin:auto auto 0 }
.folha::backdrop{ background:color-mix(in srgb, var(--pedra-900) 42%, transparent) }
.folha .corpo{
  background:var(--vidro); backdrop-filter:var(--desfoque);
  -webkit-backdrop-filter:var(--desfoque);
  border-top:1px solid var(--vidro-linha);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--e-5) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
  animation:sobe var(--t-medio) var(--curva);
}
@keyframes sobe{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.folha .puxador{ width:36px; height:4px; border-radius:2px; background:var(--line-strong);
  margin:0 auto var(--e-4) }
.folha .opcoes{ display:grid; gap:var(--e-1) }
.folha .opcoes button{ display:flex; align-items:center; gap:var(--e-3); width:100%;
  padding:var(--e-3); border-radius:var(--r-sm); border:none; background:transparent;
  color:var(--ink); font-size:14.5px; text-align:left; cursor:pointer }
.folha .opcoes button:hover{ background:var(--surface-2) }
.folha .opcoes button[aria-selected="true"]{ background:var(--brand-soft); color:var(--brand) }
.folha .opcoes svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* ==================================================================
   BOTÃO FLUTUANTE · lançar
   ================================================================== */
.flutua{
  position:fixed; right:var(--e-4); z-index:40;
  bottom:calc(var(--rodape-alt) + var(--e-4) + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:var(--raio-cheio); border:1px solid var(--vidro-linha);
  background:var(--brand); color:var(--brand-ink); box-shadow:var(--sh-2);
  display:none; place-items:center; cursor:pointer;
  transition:transform var(--t-rapido) var(--curva);
}
.flutua:hover{ transform:scale(1.05) }
.flutua:active{ transform:scale(.96) }
.flutua svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round }

/* ==================================================================
   RESPONSIVO
   ================================================================== */
@media (max-width:760px){
  .contas-grade{ grid-template-columns:1fr }
  .fatias{ grid-template-columns:1fr; gap:var(--e-1) }
  .fatia{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3) }
  /* QUEM ENCOLHE É O RÓTULO, NUNCA O NÚMERO. Deitada, a fatia põe valor e
     rótulo lado a lado, e os dois eram itens flexíveis: "reservado em metas"
     tomava a largura e "R$ 1.500,00" saía truncado como "R$ 1.500,…" -- um
     valor de dinheiro ilegível, que é o pior defeito possível nesta tela.
     O rótulo é texto e quebra em duas linhas sem perder nada; o número não
     quebra e não pode perder dígito. Visto em 320px, na prévia. */
  .fatia b{ flex:none }
  .fatia span{ margin-top:0; min-width:0; text-align:right }
  .barra-filtro{ position:static }
  .pirulito{ grid-template-columns:minmax(56px,34%) 1fr auto }
  .flutua{ display:grid }
}

/* ==================================================================
   MOVIMENTO REDUZIDO
   ------------------------------------------------------------------
   Não é "menos animação": é tirar tudo que se mexe sozinho e manter só o
   retorno do que a pessoa fez. Parallax, respiração e traçado somem; o
   realce do que acabou de mudar fica, porque ele informa.
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .lente::after{ animation:none }
  .figura .linha.anima{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  .folha .corpo{ animation:none }
  .pirulito .haste, .pirulito .bola{ transition:none }
  .conta-card, .flutua, .lanc{ transition:none }
  .conta-card:hover{ transform:none }
}

/* ==================================================================
   PEÇAS COMPARTILHADAS QUE AS TELAS NOVAS ESTREIAM
   ================================================================== */

/* rótulo de grupo da lateral: separa sem desenhar caixa */
.grupo-nav{
  margin:var(--e-4) 0 var(--e-1); padding:0 var(--e-3);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:var(--peso-medio);
}
.grupo-nav:first-child{ margin-top:0 }

/* campo compacto da barra de filtro */
.campo{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.campo .rot{ font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:var(--peso-medio) }
.campo input, .campo select{ font-size:13px; padding:7px 10px; border-radius:var(--r-sm);
  min-width:0; width:100% }
.campo select{ padding-right:28px }

.linha-acoes{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap }
.linha-acoes .sep{ flex:1; min-width:0 }
.mes-atual{ font-size:14px; font-weight:var(--peso-medio); color:var(--ink);
  min-width:11ch; text-align:center }

.titulo-secao{ margin:0; font-size:14px; font-weight:var(--peso-medio); color:var(--ink) }
.titulo-secao .cont{ color:var(--ink-3); font-weight:var(--peso); font-size:13px }
.titulo-card{ margin:0 0 var(--e-4); font-size:13px; font-weight:var(--peso-medio);
  color:var(--ink-2) }

/* a lista de instituições e a de categorias dentro dos diálogos */
.mini-lista{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; max-height:min(46vh, 340px); overflow-y:auto }
.mini-item{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) var(--e-3);
  background:var(--surface); min-width:0 }
.mini-item .txt{ flex:1; min-width:0; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mini-item .sub{ font-size:11px; color:var(--ink-3) }
.mini-item[data-nivel="2"] .txt{ padding-left:var(--e-4) }
.mini-item[data-nivel="3"] .txt{ padding-left:var(--e-8) }
.mini-item[data-inativo="sim"]{ opacity:.55 }
.ponto-cor{ width:10px; height:10px; border-radius:3px; flex:none; background:var(--cor,var(--brand)) }

/* o foco precisa ser visível em tudo que a nova tela introduziu: é a única
   forma de quem navega por teclado saber onde está */
.conta-card:focus-visible, .lanc:focus-visible, .flutua:focus-visible,
.folha .opcoes button:focus-visible, .mini-item button:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* o número dos dois cartões da V2 no Painel */
.num-destaque{ font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:22px; font-weight:var(--peso-medio);
  color:var(--ink); letter-spacing:-.02em }

/* ============================================================ cartões =====
   Um cartão é um bloco: identidade em cima, faturas embaixo. A fatura é a
   unidade que a pessoa paga, então ela é o alvo de clique -- e não o cartão. */
.cartao-card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--raio-2); margin-bottom:var(--e-3); overflow:hidden}
.cartao-card.off{opacity:.62}

.cartao-topo{display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-4); border-bottom:1px solid var(--line)}
/* `min-width:0` porque quem encolhe numa linha apertada é o nome, e não o
   valor nem o botão. Sem isso, `flex:1` cresce até o filho mais largo e a
   linha estoura em 320px. */
.cartao-nome{flex:1; min-width:0}
.cartao-nome b{display:block; font-weight:var(--peso-medio); font-size:14px;
  overflow-wrap:anywhere}
.cartao-nome .meta{font-size:11.5px; color:var(--ink-3)}
.cartao-valor{text-align:right; white-space:nowrap}
.cartao-valor b{display:block; font-weight:var(--peso-forte); font-size:15px;
  font-variant-numeric:tabular-nums}
.cartao-valor span{font-size:10.5px; color:var(--ink-3)}
.cartao-topo .btn{flex-shrink:0}

.cartao-faturas{display:flex; flex-direction:column}
.fatura-linha{appearance:none; font:inherit; text-align:left; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:var(--e-2); background:none; border:0;
  border-bottom:1px solid var(--line); padding:10px var(--e-4); color:var(--ink-2)}
.fatura-linha:last-child{border-bottom:0}
.fatura-linha:hover{background:var(--surface-2)}
.fatura-linha:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.fatura-quando{flex:1; min-width:0; font-size:12.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.fatura-total{font-weight:var(--peso-forte); white-space:nowrap; color:var(--ink)}

/* Situação por rótulo E por cor, nunca só por cor: quem não distingue matiz
   continua lendo "A pagar". */
.pill.sit-aberta{background:var(--surface-3); color:var(--ink-2)}
.pill.sit-fechada{background:var(--warn-soft); color:var(--ink)}
.pill.sit-paga{background:var(--good-soft); color:var(--good)}
/* Parcial não é "quase paga" nem "atrasada": é um terceiro estado, e ganha cor
   própria para não ser lido como um dos outros dois. O rótulo continua vindo
   junto, como nos outros -- cor sozinha nunca decide. */
.pill.sit-parcial{background:var(--brand-soft); color:var(--brand)}

/* RITMO DA META · uma cor por estado, e cada estado tem regra escrita em
   `docs/CONTRATO_SOBRA.md`. Nenhuma sai de porcentagem inventada:
     em risco  a meta sozinha pede mais do que o mês produz
     atenção   ela cabe sozinha, e as metas juntas não cabem
     no ritmo  cabe sozinha e cabe no conjunto
   `sem prazo` e `sem referência` não ganham etiqueta: não há o que afirmar, e
   etiqueta em toda meta de um app recém-instalado é ruído, não aviso. */
.pill.ritmo-em_risco{background:var(--critical-soft); color:var(--critical)}
.pill.ritmo-atencao{background:var(--warn-soft); color:var(--warn)}
.pill.ritmo-no_ritmo{background:var(--good-soft); color:var(--good)}
.pill.ritmo-concluida{background:var(--good-soft); color:var(--good)}

/* Total, pago e falta lado a lado. `auto-fit` com mínimo pequeno porque em
   320px três colunas fixas estouram a largura; aqui elas empilham sozinhas. */
.fatura-saldo{display:grid; gap:var(--e-2);
  grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
  padding:var(--e-3); border:1px solid var(--line); border-radius:var(--raio-2)}
.fatura-saldo .rot{display:block; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
.fatura-saldo b{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-weight:var(--peso-medio)}
/* O que falta é o número que decide a próxima ação. */
.fatura-saldo div:last-child b{color:var(--brand)}

.sub-titulo{font-size:12px; color:var(--ink-2);
  font-weight:var(--peso-medio); margin:var(--e-3) 0 var(--e-2)}

.fatura-itens{border:1px solid var(--line); border-radius:var(--raio-2);
  max-height:260px; overflow-y:auto}

/* Aviso de fatura vencida. Sem piada: atraso custa juros. */
.hint.alerta{color:var(--critical); font-weight:var(--peso-medio)}

@media (max-width:600px){
  .cartao-topo{flex-wrap:wrap}
  /* o botão desce para a segunda linha em vez de espremer o nome */
  .cartao-topo .btn{order:3; margin-left:auto}
  .cartao-valor{order:2}
}

/* ======================================================= assinaturas =====
   Lista simples: identidade, regra, valor, editar. A assinatura não tem
   sub-itens como o cartão tem faturas, então ela não precisa ser um bloco. */
.assinatura-linha{display:flex; align-items:center; gap:var(--e-3);
  padding:12px var(--e-4); border-bottom:1px solid var(--line);
  background:var(--surface)}
.assinatura-linha:first-child{border-top-left-radius:var(--raio-2);
  border-top-right-radius:var(--raio-2); border-top:1px solid var(--line)}
.assinatura-linha:last-child{border-bottom-left-radius:var(--raio-2);
  border-bottom-right-radius:var(--raio-2)}
.assinatura-linha.off{opacity:.6}
/* quem encolhe é a descrição, não o valor nem o alvo de clique */
.assinatura-linha .desc{flex:1; min-width:0}
.assinatura-linha .desc b{display:block; font-weight:var(--peso-medio);
  font-size:14px; overflow-wrap:anywhere}
.assinatura-linha .meta{font-size:11.5px; color:var(--ink-3)}
.assinatura-linha .amt{font-weight:var(--peso-forte); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.assinatura-linha .btn{flex-shrink:0}

/* ============================================================= grupos =====
   A situação vai por RÓTULO e por cor, nunca só por cor: quem não distingue
   matiz continua lendo "deve" e "a receber". */
#listaSaldos .amt .meta{display:block; font-size:10.5px; font-weight:var(--peso);
  color:var(--ink-3); text-align:right}
#listaSaldos .amt.bom, #listaAcertos .amt{color:var(--good)}
#listaSaldos .amt.ruim{color:var(--critical)}
.numerao.bom{color:var(--good)}
.numerao.ruim{color:var(--critical)}
#listaSaldos .row .btn, #listaAcertos .row .btn, #listaDespesas .row .btn{flex-shrink:0}
/* o campo de cada parte no rateio: grade que cai para uma coluna em tela
   estreita, como o resto dos formulários */
#dg_partes input[readonly]{background:var(--surface-2); color:var(--ink-2)}

/* ============================================================== metas =====
   Meta é envelope. Os três números do topo usam `.fatia`, que já existe: eles
   são leituras do MESMO dinheiro, e dar a eles um componente próprio sugeriria
   que são grandezas diferentes. */
.meta-card{ border:1px solid var(--line); border-radius:var(--raio-2);
  padding:var(--e-4); margin-bottom:var(--e-3) }
/* arquivada é histórico, não plano: fica legível e deixa de competir */
.meta-card.apagada{ opacity:.55 }

.meta-topo{ display:flex; align-items:baseline; gap:var(--e-3) }
.meta-topo .nome{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.meta-sub{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px }
/* o percentual vai ESCRITO ao lado da barra: barra sozinha não se lê com
   precisão, e cor sozinha não decide nada neste projeto */
.meta-pct{ margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap }

.meta-card .barra{ height:6px; border-radius:var(--raio-cheio);
  background:var(--surface-3); margin:var(--e-3) 0; overflow:hidden }
.meta-card .barra span{ display:block; height:100%; width:var(--frac,0%);
  background:var(--brand); border-radius:inherit;
  transition:width var(--t-lento) var(--curva) }

.meta-acoes{ display:flex; gap:var(--e-2); flex-wrap:wrap }

/* A REGRA MENSAL: faixa própria entre a barra e os botões.
   Ela é uma FAIXA, com fundo e recuo, e não uma linha solta. Em 320px a frase
   e o botão não cabem lado a lado, o botão desce -- e solto ele ficava a um
   palmo de "Reservar" e "Editar", parecendo o terceiro botão da barra de
   ações. O fundo é o que diz "estes dois são uma coisa só, e essa coisa não é
   a barra de baixo". Medido na prévia em 320px, que foi onde o defeito
   apareceu: no monitor os dois cabiam na mesma linha e nada disso existia. */
.meta-regra{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  margin-bottom:var(--e-3); padding:var(--e-2) var(--e-3);
  border-radius:var(--raio-1); background:var(--surface-2);
  font-size:12px; color:var(--ink-3) }
.meta-regra span{ min-width:0 }
/* O botão da faixa não compete com os da barra de ações: ele é menor e vem
   depois do texto, empurrado para a direita quando há espaço. */
.meta-regra .btn{ margin-left:auto }
/* Parcial não é erro, é informação: coube menos do que a regra pedia. Aviso,
   nunca grave -- nada quebrou, e o dinheiro que faltava simplesmente não
   estava lá. */
.meta-regra.parcial{ background:var(--warn-soft) }
.meta-regra.parcial span{ color:var(--warn) }

@media (max-width:600px){
  /* em 320px o percentual e o selo disputam a linha com o nome; deixá-los
     quebrar é melhor do que espremer os três */
  .meta-topo{ flex-wrap:wrap }
  .meta-pct{ margin-left:0 }
}

/* =========================================================== calendário ===
   Duas visões do MESMO dado. A grade de sete colunas é ótima no desktop e
   ilegível em 320px, então o celular abre na agenda -- a decisão está em
   js/ui/screens/calendar-screen.js, aqui só o desenho.

   ESTADO NUNCA SÓ POR COR: cada evento leva ícone e rótulo junto. */
.seletor-visao{ display:flex; gap:2px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--raio-cheio); padding:2px }
.seletor-visao .btn{ border-radius:var(--raio-cheio) }
.seletor-visao .btn[aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink) }

/* `minmax(0,1fr)` e NÃO `1fr`: `1fr` é `minmax(auto,1fr)`, e `auto` cresce até
   o filho mais largo -- sete colunas assim estouram 320px e a página ganha
   rolagem lateral. Foi exatamente o que o teste de responsividade pegou. */
.cal-cab{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px;
  margin-top:var(--e-4) }
.cal-cab span{ font-size:10.5px; color:var(--ink-3); text-align:center;
  text-transform:uppercase; letter-spacing:.05em }
.cal-semana{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; margin-top:2px }

.cal-cel{ min-width:0; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:3px; padding:var(--e-2) 2px;
  background:var(--surface-2); border:1px solid transparent;
  border-radius:var(--r-sm); cursor:pointer; color:var(--ink) }
.cal-cel:hover{ border-color:var(--line) }
.cal-cel.fora{ opacity:.35 }
.cal-cel.hoje{ border-color:var(--brand) }
.cal-cel.aberto{ background:var(--brand-soft); border-color:var(--brand) }
.cal-cel .num{ font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:12px }
.cal-cel .marcas{ display:flex; gap:2px; align-items:center; flex-wrap:wrap;
  justify-content:center; min-width:0; max-width:100% }
.cal-cel .pt{ width:5px; height:5px; border-radius:50%; background:var(--ink-3) }
.cal-cel .mais{ font-size:9px; color:var(--ink-3); font-style:normal }

/* as cores de estado, e sempre acompanhadas de rótulo na lista */
.pt.e-atrasado,  .cal-ev.e-atrasado  .ico{ background:var(--critical); color:var(--critical) }
.pt.e-previsto,  .cal-ev.e-previsto  .ico{ background:var(--ink-3);    color:var(--ink-3) }
.pt.e-pago,      .cal-ev.e-pago      .ico,
.pt.e-recebido,  .cal-ev.e-recebido  .ico{ background:var(--good);     color:var(--good) }
.pt.e-realizado, .cal-ev.e-realizado .ico{ background:var(--brand);    color:var(--brand) }
.pt.e-fatura,    .cal-ev.e-fatura    .ico{ background:var(--warn);     color:var(--warn) }
.pt.e-assinatura,.cal-ev.e-assinatura .ico{ background:var(--brand);   color:var(--brand) }
/* na lista o ícone é texto, não bolinha: o fundo colorido sairia do lugar */
.cal-ev .ico{ background:transparent !important }

.cal-agenda, .cal-dia{ margin-top:var(--e-4) }
.cal-bloco{ margin-bottom:var(--e-4) }
.cal-bloco h3{ margin:0 0 var(--e-2); font-size:12px; color:var(--ink-2);
  font-weight:var(--peso-medio) }

.cal-ev{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--e-3);
  align-items:center; padding:var(--e-3); border-bottom:1px solid var(--line);
  min-width:0 }
.cal-ev:last-child{ border-bottom:0 }
.cal-ev .ico{ width:18px; text-align:center; font-size:13px }
.cal-ev .tit{ display:block; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--ink) }
.cal-ev .sub{ display:block; font-size:11.5px; color:var(--ink-3) }
.cal-ev .vlr{ font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px }

@media (max-width:400px){
  /* em 320px a célula quadrada some de altura útil; a grade continua
     disponível para quem escolher, mas cabe */
  .cal-cel{ aspect-ratio:auto; min-height:38px }
  .cal-cel .num{ font-size:11px }
}