/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   ANÁLISE DE FATURAMENTO: só o que esta tela precisa e não existe em lugar nenhum.

   O QUE ESTE ARQUIVO **NÃO** FAZ: redesenhar gráfico nem cartão. As peças (`grafico`, `colunasRotuladas`,
   `rosca`, `indicador`, `etiqueta`, `.legenda`) já têm estilo na casa; copiar aquelas regras para cá criaria duas
   cópias da mesma aparência, e uma delas ficaria para trás no dia em que alguém mexesse na outra.
   As regras de `.col-2` que moravam aqui saíram junto com a fileira de seis cartões (T031, 04/10/2026): a
   primeira dobra agora é o número grande e três ladrilhos, na `col-3 lado` da grade da casa.
   ============================================================ */

/* O NÚMERO QUE RESPONDE A PERGUNTA DA TELA ("de cada R$ 100 cobrados, quanto entrou") é o maior da página (o "herói" do padrão James, 32 px). Os
   três ladrilhos ao lado o explicam, e por isso ficam no tamanho de sempre. O teto segue a regra da casa: o
   número encolhe com a largura da caixa (`cqi`) e nunca sai cortado. */
.tela-faturamento-analise .fa-destaque .indicador-valor .numero {
  font-size: min(32px, 16cqi);
}

/* A célula do ano que a carga ainda não provou: o traço curto de ausente da casa (`SEM_NUMERO`), na cor de apoio,
   com "sem dado carregado" no `title`. Nunca zero: quem lê uma tabela de dinheiro lê zero como "não entrou nada". */
.tela-faturamento-analise .sem-carga {
  color: var(--muted-foreground);
  font-style: italic;
  font-size: 0.85em;
  white-space: nowrap;
}

/* As etiquetas no alto do cartão do gráfico: os anos sem carga, nomeados, e o ano que ainda está correndo. */
.tela-faturamento-analise .fa-etiquetas,
.tela-faturamento-analise .fa-anos-sem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.tela-faturamento-analise .fa-etiquetas {
  justify-content: flex-end;
}

/* OS DOIS GRÁFICOS PEQUENOS LADO A LADO (área e contratos), cada um com a sua régua e a mesma fileira de anos.
   Lado a lado enquanto cada um tem pelo menos 260 px; abaixo disso, um em cima do outro. Grade e não flex
   porque as duas colunas TÊM de ter a mesma largura: anos alinhados de um para o outro é o ponto da dupla. */
.tela-faturamento-analise .fa-dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px 24px;
}
.tela-faturamento-analise .fa-pequeno {
  min-width: 0;
}
.tela-faturamento-analise .fa-pequeno h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* A composição: o total em cima, a barra 100% com os nomes embaixo. */
.tela-faturamento-analise .fa-composicao {
  display: grid;
  gap: 12px;
}
/* O quadradinho da legenda do "Cobrado" é o mesmo traço curto e cinza que a barra desenha (`.hbarra-ref`), para a
   legenda mostrar a forma e não só a cor. */
.tela-faturamento-analise .legenda i.fa-traco {
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: var(--grafico-contexto);
}

/* O total da composição, em HTML e com a marca do inventário (o centro da rosca era texto de SVG, sem marca). */
.tela-faturamento-analise .fa-total {
  margin: 0;
  font-size: 14px;
  color: var(--muted-foreground);
}
.tela-faturamento-analise .fa-total .metrica {
  color: var(--foreground);
  font-weight: 600;
}