/* Gastos com IA (src/setores/financeiro/gastos-ia.js).
   Os cartões usam o .placar do núcleo, os filtros o .segmentos e o gráfico o
   .grafico (graficos.css). Aqui fica só o que é desta página. */

.gi-acoes { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.gi-frescor {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .78rem; color: var(--texto-3);
}
.gi-frescor .ico { width: 15px; height: 15px; }
.gi-frescor.atrasada { color: var(--espera); font-weight: 600; }

/* Cartões: o número grande, o símbolo da moeda menor ao lado */
.gi-cartoes { margin-bottom: 0; }
.gi-cartoes .placar { min-width: 164px; }
.gi-cartoes .valor { font-size: 1.55rem; white-space: nowrap; }
.gi-cartoes .valor .moeda {
  margin-right: .25em;
  font-size: .56em; font-weight: 600; letter-spacing: 0; color: var(--texto-3);
}
.gi-cartoes .nota {
  display: flex; align-items: center; gap: .35rem; margin-top: .4rem;
  font-size: .74rem; color: var(--texto-3);
}
.gi-cartoes .nota .ico { width: 14px; height: 14px; }
/* Estado do saldo: cor de status sempre junto de ícone e frase, nunca sozinha */
.gi-cartoes .placar.alerta { border-color: var(--espera-linha); }
.gi-cartoes .placar.alerta .nota { color: var(--espera); font-weight: 600; }
.gi-cartoes .placar.critico { border-color: var(--falha-linha); }
.gi-cartoes .placar.critico .nota { color: var(--falha); font-weight: 600; }

.gi-filtros { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Escolha do mês: o mesmo trilho do .segmentos, com as setas nas pontas */
.gi-mes {
  display: flex; align-items: center; gap: .2rem;
  padding: .3rem;
  background: var(--cova);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.gi-mes[hidden] { display: none; }
.gi-mes-nome {
  min-width: 9.5rem; text-align: center;
  font-size: .84rem; font-weight: 600; color: var(--texto);
}
.gi-mes-nome::first-letter { text-transform: uppercase; }
.gi-mes-seta {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 0; border-radius: var(--raio-p); background: none; cursor: pointer;
  color: var(--texto-3); transition: color .2s, background .2s;
}
.gi-mes-seta:hover:not(:disabled) { color: var(--texto); background: var(--painel-alto); }
.gi-mes-seta:disabled { opacity: .35; cursor: default; }
.gi-mes-seta .ico { width: 16px; height: 16px; }
.gi-mes-seta.anterior .ico { transform: rotate(90deg); }
.gi-mes-seta.proximo .ico { transform: rotate(-90deg); }

/* Gráfico e ranking lado a lado; o ranking é também a legenda */
.gi-periodo {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start;
  transition: opacity .2s ease;
}
.gi-periodo.carregando { opacity: .5; }
.gi-grafico { margin: 0; }
.gi-grafico h3, .gi-ranking h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--texto); }
.gi-sub { margin: .3rem 0 1.1rem; font-size: .82rem; color: var(--texto-3); }
.gi-avisos p { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--texto-3); }

.gi-ranking ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .95rem; }
.gi-ranking li {
  /* Em cima o nome e o valor; embaixo a barra e a fatia. A barra ocupa as colunas
     2 e 3, que juntas medem sempre o mesmo (a 1 e a 4 são fixas): se a trilha
     variasse com o tamanho do número, as barras deixariam de ser comparáveis. */
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.9rem;
  grid-template-areas: "chave nome  valor valor"
                       ".     barra barra parte";
  align-items: center; gap: .35rem .6rem;
}
/* por sistema, uma terceira linha: o gasto de hoje */
.gi-ranking li.com-hoje {
  grid-template-areas: "chave nome  valor valor"
                       ".     barra barra parte"
                       ".     hoje  hoje  hoje";
}
.gi-ranking .hoje { grid-area: hoje; margin-top: -.1rem; font-size: .74rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.gi-ranking .chave { grid-area: chave; width: 10px; height: 10px; border-radius: 3px; }
.gi-ranking .nome { grid-area: nome; font-size: .84rem; color: var(--texto-2); overflow-wrap: break-word; }
.gi-ranking .parte { grid-area: parte; justify-self: end; font-size: .74rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.gi-ranking .barra {
  grid-area: barra; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--cova);
}
.gi-ranking .barra i { display: block; height: 100%; border-radius: 3px; }
.gi-ranking .valor {
  grid-area: valor;
  font-family: var(--dado); font-size: .84rem; font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums; justify-self: end; white-space: nowrap;
}

@media (max-width: 1080px) {
  .gi-periodo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .gi-cartoes .placar { min-width: calc(50% - .4rem); }
  .gi-acoes { width: 100%; justify-content: space-between; }
  .gi-mes { width: 100%; justify-content: space-between; }
  /* os quatro períodos numa linha só, mesmo a 360 px */
  .gi-filtros .segmentos { flex-wrap: nowrap; gap: .15rem; }
  .gi-filtros .segmento { padding-inline: .4rem; white-space: nowrap; }
}