/* Estilos de Início, lançamentos (períodos, resultado previsto, visão da conta) e gráficos dos relatórios. Usa as variáveis de estilo.css (cores, tema escuro, raios de 3 a 8px). */

/* ---------- Comuns ---------- */
.fin-nota { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }

/* ================================================================================================================
   Início
   ================================================================================================================ */

/* Ordem dos quadros: no celular (uma coluna) as duas colunas se intercalam — fluxo, a pagar/a receber, saldo das
   contas, próximas contas, últimos, gastos, limites e objetivos. No computador cada coluna mantém a própria ordem. */
@media (max-width: 1099px) {
  .fin-inicio > .coluna-inicio { display: contents; }
}
.fin-o1 { order: 1; }
.fin-o2 { order: 2; }
.fin-o3 { order: 3; }
.fin-o4 { order: 4; }
.fin-o5 { order: 5; }
.fin-o6 { order: 6; }
.fin-o7 { order: 7; }
.fin-o8 { order: 8; }

/* Aviso de limites de gastos (topo do Início) */
.fin-alerta {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid; border-radius: var(--r4); color: var(--texto); font-size: 14px; line-height: 1.45;
}
.fin-alerta > p { flex: 1 1 200px; min-width: 0; }
.fin-alerta-aviso { background: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar) 35%, transparent); }
.fin-alerta-aviso > .ic { color: var(--ambar); }
.fin-alerta-perigo { background: var(--vermelho-suave); border-color: color-mix(in srgb, var(--vermelho) 35%, transparent); }
.fin-alerta-perigo > .ic { color: var(--vermelho); }
@media (min-width: 1100px) { .fin-alerta { margin-bottom: 20px; } }

/* Fluxo do mês (quadro escuro: o texto é sempre claro, nos dois temas) */
.fin-o1 .resultado-topo { flex-wrap: wrap; } /* o botão das contas desce quando não cabe ao lado do valor */
.fin-fluxo-sub { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.resultado-valor.fin-fluxo-valor { margin-top: 2px; }
.fin-o1 .resultado-item small { white-space: normal; }
.fin-previsto .resultado-ic { background: rgba(245, 158, 11, .22); color: #fcd34d; }
.fin-previsto-rotulo { display: flex; align-items: center; gap: 2px; }
.fin-ajuda {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -6px 0; padding: 0;
  border: 0; border-radius: var(--r2); background: none; color: rgba(255, 255, 255, .78);
}
.fin-ajuda::after { content: ""; position: absolute; inset: -9px; } /* área de toque de ~44px */
.fin-ajuda:hover, .fin-ajuda[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.fin-ajuda:focus-visible { outline-color: #fff; }
.fin-explica {
  display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r4);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .86);
}
.fin-explica strong { color: #fff; font-weight: 700; }

/* A pagar / a receber: o valor usa a largura toda do quadro quando o ícone fica em cima; no celular estreito os dois
   quadros ficam um embaixo do outro (lado a lado o valor não caberia inteiro) */
@media (max-width: 420px) { .fin-o2 .pendencia-texto { align-self: stretch; } }
@media (max-width: 380px) {
  .fin-o2.pendencias { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fin-o2 .pendencia { flex-direction: row; align-items: center; gap: 14px; }
  .fin-o2 .pendencia-seta { position: static; align-self: flex-start; }
}

/* Notebooks (1100–1499 px): colunas estreitas. Sem os ícones no fluxo, a pagar/a receber com o ícone em cima e a
   tabela dos últimos lançamentos no formato do celular, para os valores caberem inteiros. */
@media (min-width: 1100px) and (max-width: 1499px) {
  .fin-o1 .resultado-ic { display: none; }
  .fin-o1 .resultado-item { padding: 12px 10px; }
  .fin-o1 .resultado-item strong { font-size: 16px; }
  .fin-o2 .pendencia { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; }
  .fin-o2 .pendencia-seta { position: absolute; top: 14px; right: 12px; }
  .fin-o2 .pendencia-ic { width: 42px; height: 42px; }
  .fin-o2 .pendencia-texto { align-self: stretch; }
  .fin-o5 .tabela-lanc thead, .fin-o5 .tabela-lanc .col-cat, .fin-o5 .tabela-lanc .col-data, .fin-o5 .tabela-lanc .col-menu { display: none; }
  .fin-o5 .tabela-lanc td { padding: 12px 4px; }
  .fin-o5 .tabela-lanc td:first-child { max-width: 0; width: 100%; }
  .fin-o5 .lanc-sub { display: block; margin: 2px 0 0 30px; font-size: 12px; color: var(--texto-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* Últimos lançamentos: colunas fixas (descrição longa encurta com "…" em vez de empurrar o valor para fora) */
@media (min-width: 720px) and (max-width: 1099px), (min-width: 1500px) {
  .fin-o5 .tabela-lanc { table-layout: fixed; }
  .fin-o5 .tabela-lanc .col-cat { width: 22%; }
  .fin-o5 .tabela-lanc .col-data { width: 112px; }
  .fin-o5 .tabela-lanc .col-valor { width: 136px; }
  .fin-o5 .tabela-lanc .col-menu { width: 44px; }
  .fin-o5 .tabela-lanc td { overflow: hidden; }
}

/* Celular estreito: listas com o quadrado de pagar ficam sem o ícone da categoria (sobra espaço para a descrição) */
@media (max-width: 359px) {
  .fin-o4 .linha .icone-cat, .fin-atrasadas .linha .icone-cat { display: none; }
}

/* Gastos por categoria: o total no centro da rosca (o <span> do valor não herda o estilo do rótulo de baixo) */
.fin-o6 .rosca-centro strong .num, .fin-grafico .rosca-centro strong .num { margin: 0; font-size: inherit; color: inherit; }
@media (min-width: 1500px) { .fin-o6 .rosca-centro strong, .fin-grafico .rosca-centro strong { font-size: 14px; } } /* rosca de 150px */

/* Saldo das contas e o que passa de um mês para o outro */
.fin-saldo-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px;
  border-top: 1px solid var(--borda); background: var(--superficie-2); font-size: 14px;
}
.fin-saldo-total > span { color: var(--texto-2); font-weight: 600; }
.fin-saldo-total strong { font-size: 16px; font-weight: 700; white-space: nowrap; }
/* quadro estreito (celular e notebooks): o saldo vai para baixo do nome da conta, que aparece inteiro */
@media (max-width: 440px), (min-width: 1100px) and (max-width: 1499px) {
  .fin-saldos .linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; }
  .fin-saldos .linha > .logo-banco { grid-row: 1 / span 2; }
  .fin-saldos .linha-meio { grid-column: 2; grid-row: 1; }
  .fin-saldos .linha-fim { grid-column: 2; grid-row: 2; align-items: flex-start; }
  .fin-saldos .linha > .ic { grid-column: 3; grid-row: 1 / span 2; }
  .fin-saldos .linha-sub { display: none; }
}
.fin-cadeia { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--r3); }
.fin-cadeia .rotulo-mini { text-align: left; margin-bottom: 4px; }
.fin-cadeia-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.fin-cadeia-linha > span { min-width: 0; color: var(--texto-2); }
.fin-cadeia-linha strong { flex: none; font-weight: 600; white-space: nowrap; }
.fin-cadeia-final { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
.fin-cadeia-final > span { color: var(--texto); font-weight: 600; }
.fin-cadeia-final strong { font-size: 17px; font-weight: 700; }

/* Limites de gastos: verde abaixo do alerta, amarelo do alerta até 100%, vermelho acima de 100% */
.fin-limite-ok .barra span { background: var(--verde); }
.fin-limite-alerta .barra span { background: var(--ambar); }
.fin-limite-estourado .barra span { background: var(--vermelho); }
.fin-limite-alerta .orcamento-topo .pct { color: var(--ambar); font-weight: 700; }
.fin-limite-estourado .orcamento-topo .pct, .fin-limite-estourado .orcamento-topo .quanto { color: var(--vermelho); font-weight: 700; }
.fin-limite-nota { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.fin-limite-alerta .fin-limite-nota { color: var(--ambar); }
.fin-limite-estourado .fin-limite-nota { color: var(--vermelho); }

/* ================================================================================================================
   Lançamentos
   ================================================================================================================ */

/* Período: abas (Diária, Semanal, Mensal, Geral) e ‹ nome › */
.fin-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; }
.fin-periodo-abas { flex: 1 1 100%; }
.fin-periodo-nav { flex: 1 1 100%; }
.fin-periodo-nav .mes-nome { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 720px) {
  .fin-periodo-abas { flex: 0 1 460px; }
  .fin-periodo-nav { flex: 0 0 auto; }
  .fin-periodo-nav .mes-nome { flex: none; min-width: 190px; }
}
@media (max-width: 479px) { .fin-periodo-abas .ic { display: none; } }
@media (max-width: 359px) { .fin-periodo-abas button { padding: 0 4px; font-size: 13px; } }

/* Totais do período: receitas, saídas e resultado previsto */
.fin-kpis .kpi { display: flex; flex-direction: column; justify-content: flex-start; } /* botão não centraliza o conteúdo */
.fin-kpis > .fin-kpi-resultado { grid-column: 1 / -1; }
.fin-kpis .kpi-nota { color: var(--texto-3); font-weight: 500; line-height: 1.4; margin-top: 4px; }
@media (min-width: 720px) {
  .fin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin-kpis > .fin-kpi-resultado { grid-column: auto; }
}
@media (max-width: 479px) {
  /* celular estreito: uma linha por total (rótulo e valor lado a lado, o detalhe embaixo) */
  .fin-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fin-kpis .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 10px 12px; }
  .fin-kpis .kpi-valor { margin-top: 0; font-size: 18px; }
  .fin-kpis .kpi-nota { grid-column: 1 / -1; }
}

/* Atrasadas de antes do período (no topo da lista) */
.fin-atrasadas .lista-dia-topo { flex-wrap: wrap; row-gap: 4px; }
.fin-atrasadas .lista-dia-topo h3 { display: inline-flex; align-items: center; gap: 6px; color: var(--vermelho); }
.fin-atrasadas > .lista { border-color: color-mix(in srgb, var(--vermelho) 30%, var(--borda)); }

/* Visão da conta */
.fin-conta-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-conta-nome { flex: 1 1 150px; min-width: 0; display: grid; gap: 1px; }
.fin-conta-nome strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fin-conta-nome > span { font-size: 13px; color: var(--texto-3); }
.fin-conta-disp { display: grid; justify-items: end; gap: 1px; margin-left: auto; text-align: right; }
.fin-conta-disp > span { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.fin-conta-disp strong { font-size: 18px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.fin-atalhos { margin-top: 12px; }
.fin-conta-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (min-width: 900px) { .fin-conta-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 379px) { .fin-conta-grade { grid-template-columns: minmax(0, 1fr); } }
.fin-conta-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px;
  border: 1px solid var(--borda); border-radius: var(--r3); background: var(--superficie-2);
}
.fin-conta-valor { display: block; margin: 6px 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-conta-sub { font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }
.fin-conta-saldo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding: 12px 14px;
  border-radius: var(--r3); background: var(--marca-suave); color: var(--texto-2); font-size: 14px;
}
.fin-conta-saldo strong { margin-left: 4px; color: var(--texto); font-weight: 700; white-space: nowrap; }
.fin-conta-saldo .fin-conta-previsto { font-size: 17px; }

/* ================================================================================================================
   Relatórios: período, gráficos de gastos e a lista para baixar
   ================================================================================================================ */
.fin-rel-periodo .relatorio-datas { max-width: 520px; }
@media (max-width: 379px) { .fin-rel-periodo .relatorio-datas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) {
  .fin-grafico .legenda-item { grid-template-columns: 10px minmax(0, 1fr) auto 34px; }
  .fin-grafico .legenda-ic { display: none; }
}
.fin-graficos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 960px) { .fin-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.fin-grafico .painel-topo { align-items: flex-start; }
.fin-grafico-sub { margin-top: 4px; font-size: 13px; color: var(--texto-3); }
.fin-rel-titulo { margin-top: 32px; }
.fin-rel-titulo h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.fin-rel-titulo p { margin-top: 4px; font-size: 14px; color: var(--texto-3); }
.fin-rel-titulo + .secao { margin-top: 16px; }