/* GASTOS COM A META, POR PERIODO (04/11/2026). O filtro, os cartoes e as datas reaproveitam as classes do Dashboard
   (`dashboard__filtros`, `dashboard__kpi*`, `dashboard__data`, `dashboard__aplicar`), para a tela ser a mesma coisa
   que o resto do painel; aqui so ficam o que e DESTA tela. O vidro (fundo, borda, blur) do grafico e da tabela vem de
   z_vidro.css, que carrega depois; este arquivo nao o repete. NENHUM `style=""`: a CSP do app e `style-src 'self'`. */

/* ── o filtro: atalhos em cima, datas e CSV embaixo ─────────────────── */
.gastos__filtros { flex-direction: column; align-items: flex-start; gap: 1rem; }
.gastos__atalhos { display: flex; flex-wrap: wrap; gap: .45rem; }
.gastos__atalho { font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--bc-ink-mut); background: var(--bc-surface); border: 1px solid var(--bc-line);
  border-radius: 999px; padding: .42rem .95rem; transition: background .18s, color .18s, border-color .18s; }
.gastos__atalho:hover { color: var(--bc-ink); border-color: color-mix(in srgb, var(--bc-primary) 40%, var(--bc-line)); }
.gastos__atalho--atual, .gastos__atalho--atual:hover { color: var(--bc-primary-ink); background: var(--bc-primary);
  border-color: transparent; }
.gastos__atalho:focus-visible { outline: 2px solid var(--bc-focus, var(--bc-primary)); outline-offset: 2px; }
.gastos__filtros .gastos__datas { gap: 1rem; }
.gastos__csv { font-size: .82rem; font-weight: 600; color: var(--bc-primary); text-decoration: none; }
.gastos__csv:hover { text-decoration: underline; }
.gastos__periodo-atual { font-size: .85rem; color: var(--bc-ink-mut); margin: -.6rem 0 1.2rem; }
.gastos__periodo-atual strong { color: var(--bc-ink); }

/* ── os quatro cartoes ───────────────────────────────────────────────── */
.gastos__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* "R$ 12.345,67" e "R$ 0,0300" nao podem quebrar em duas linhas em coluna estreita */
.gastos__kpis .dashboard__kpi-valor { font-size: clamp(1.45rem, 1.2vw + 1rem, 2.1rem); white-space: nowrap; }
.gastos__variacao { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bc-ink-mut); }
.gastos__variacao--sobe { color: var(--bc-warn); }
.gastos__variacao--desce { color: var(--bc-primary); }
@media (max-width: 1100px) { .gastos__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .gastos__kpis { grid-template-columns: minmax(0, 1fr); } }

/* ── avisos e o "hoje" ──────────────────────────────────────────────── */
.gastos__hoje { font-size: .85rem; margin: 0 0 .9rem; color: var(--bc-ink); }
.gastos__hoje-nota { color: var(--bc-ink-mut); }
.gastos__aviso { font-size: .8rem; font-weight: 600; color: var(--bc-warn); margin: 0 0 1.1rem; line-height: 1.5; }
.gastos__vazio { margin-top: 1rem; }

/* ── o grafico e a tabela ───────────────────────────────────────────── */
.gastos__grafico { padding: 1.2rem 1.4rem 1rem; margin-bottom: 1.5rem; }
.gastos__subtitulo { font-size: 1rem; font-weight: 700; margin: 0 0 .8rem; color: var(--bc-ink); }
.gastos__tabela-card { overflow-x: auto; }
.gastos__tabela-card .gastos__subtitulo { margin-top: .2rem; }
.gastos__tabela th, .gastos__tabela td { white-space: nowrap; }
.gastos__tabela .gastos__num { text-align: right; font-variant-numeric: tabular-nums; }
.gastos__data { font-weight: 600; }
.gastos__semana { font-weight: 500; color: var(--bc-ink-mut); text-transform: uppercase; font-size: .68rem;
  letter-spacing: .04em; margin-left: .3rem; }
.gastos__etiqueta { display: inline-block; margin-left: .5rem; padding: .08rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; color: var(--bc-primary);
  background: color-mix(in srgb, var(--bc-primary) 12%, transparent); }
.gastos__linha--sem-registro th, .gastos__linha--sem-registro td { color: var(--bc-ink-mut); font-style: italic; }
.gastos__tabela tfoot th, .gastos__tabela tfoot td { font-weight: 700; border-top: 1px solid var(--bc-line); }
/* Com 3 atalhos por linha no celular, o texto de cada um cabe sem cortar */
@media (max-width: 560px) {
  .gastos__atalho { padding: .4rem .75rem; }
  .gastos__grafico { padding: 1rem; }
  /* A tabela nao cabe com 4 colunas: o card rolava para o lado e o "sem registro" (alinhado a direita, numa celula larga) ficava
     fora da tela, deixando a linha em branco justo onde a tela precisa explicar. O custo medio sai da TABELA aqui e continua no
     cartao, no rodape e no CSV. A celula de "sem registro" e a 2a (colspan 3), entao o :nth-child(4) nao a alcanca. */
  .gastos__tabela th:nth-child(4), .gastos__tabela td:nth-child(4) { display: none; }
}

/* O `<th scope="row">` da data e do total e cabecalho para o leitor de tela, mas na tela e CELULA: sem a caixa alta e a
   tinta de cabecalho que `.painel__tabela th` poe em toda `th`. */
.painel .gastos__tabela tbody th,
.painel .gastos__tabela tfoot th { background: none; color: var(--bc-ink); font-size: .875rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; }
.painel .gastos__tabela tfoot th, .painel .gastos__tabela tfoot td { background: color-mix(in srgb, var(--bc-primary) 7%, transparent); }