/* Painel de indicadores — cartões de número do topo das telas.
   Componente COMPARTILHADO (macros_indicadores.html): Gestão de Recebimentos,
   Relatórios e o que vier depois. Nenhum módulo redefine estas classes.

   A cor entra por uma variável só (`--cor-indicador`), então cada estado novo é
   uma regra de duas linhas — nunca uma cópia do cartão inteiro. As cores saem
   das variáveis do Tabler, então o tema escuro funciona sem regra extra. */

/* O cartão é um CONTÊINER: o que decide o desenho do número é a largura dele,
   não a da janela. Ele encolhe pela tela menor, pelo menu lateral aberto ou
   pelo número de cartões na linha — e só ele sabe quanto espaço sobrou. Ver
   "Cartão estreito", no fim do arquivo. */
.cartao-indicador {
  container: indicador / inline-size;
  --cor-indicador: var(--tblr-secondary, #667382);
  --cor-indicador-suave: var(--tblr-bg-surface-secondary, #f6f8fb);
  border-radius: 0.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cartao-indicador:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(24, 36, 51, 0.1);
  border-color: var(--cor-indicador);
}

/* Ícone à esquerda, texto à direita: o olho encontra o assunto do cartão antes
   de ler o número. */
.cartao-indicador-corpo {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}

.indicador-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--cor-indicador-suave);
  color: var(--cor-indicador);
}

/* min-width: 0 deixa o text-truncate do rótulo funcionar dentro do flex. */
.indicador-conteudo {
  min-width: 0;
  flex: 1 1 auto;
}

.indicador-rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tblr-secondary, #667382);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `tabular-nums` alinha os dígitos entre um cartão e outro — sem isso, valores
   de mesma grandeza aparecem com larguras diferentes. */
.indicador-valor {
  margin-top: 0.125rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cor-indicador);
  /* Número não parte no meio ("1.03 / 3,33"): no máximo "R$" numa linha e o
     valor na outra. Quem garante que cabe é a escala do cartão estreito. */
  overflow-wrap: normal;
}

/* O indicador neutro não pinta o número: valor colorido é sinal, e sinal demais
   não é sinal nenhum. */
.indicador-neutro .indicador-valor {
  color: var(--tblr-body-color, #182433);
}

.indicador-detalhe {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--tblr-secondary, #667382);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Bolinha na cor do indicador antes do detalhe ("3 em atraso"). */
.indicador-detalhe::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--cor-indicador);
  flex: 0 0 auto;
}

.indicador-neutro .indicador-detalhe::before {
  background: var(--tblr-border-color, #dadfe5);
}

/* ── Atalho de recorte ──────────────────────────────────────────────── */

/* Cartão que É um link (aplica/remove o filtro daquele número). Herda o texto
   do cartão de leitura — link azul sublinhado em cima de um indicador seria
   ruído. O que sinaliza que ele é clicável é o cursor, o realce no hover e a
   seta que aparece no canto. */
.cartao-indicador-atalho {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.cartao-indicador-atalho:hover,
.cartao-indicador-atalho:focus-visible {
  color: inherit;
  border-color: var(--cor-indicador);
}

.cartao-indicador-atalho:focus-visible {
  outline: 2px solid var(--cor-indicador);
  outline-offset: 2px;
}

/* Seta discreta no canto: só aparece no hover/foco, para o cartão em repouso
   continuar sendo um número, não um botão. */
.cartao-indicador-atalho::after {
  content: '';
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 2px solid var(--cor-indicador);
  border-right: 2px solid var(--cor-indicador);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cartao-indicador-atalho:hover::after,
.cartao-indicador-atalho:focus-visible::after,
.indicador-ativo::after {
  opacity: 1;
}

/* Recorte aplicado: borda na cor do indicador e um filete lateral. É daqui que
   a lista abaixo veio — sem isso o usuário perde de vista por que a tabela
   encolheu. */
.indicador-ativo {
  border-color: var(--cor-indicador);
  box-shadow: inset 0.25rem 0 0 0 var(--cor-indicador);
}

.indicador-ativo .indicador-rotulo {
  color: var(--cor-indicador);
}

/* No celular o cartão é menor: a seta acompanha. */
@media (max-width: 575.98px) {
  .cartao-indicador-atalho::after {
    top: 0.625rem;
    right: 0.625rem;
  }
}

/* ── Cores ──────────────────────────────────────────────────────────── */

.indicador-green {
  --cor-indicador: var(--tblr-green, #2fb344);
  --cor-indicador-suave: var(--tblr-green-lt, #e8f7eb);
}

.indicador-red {
  --cor-indicador: var(--tblr-red, #d63939);
  --cor-indicador-suave: var(--tblr-red-lt, #fbeaea);
}

.indicador-orange {
  --cor-indicador: var(--tblr-orange, #f76707);
  --cor-indicador-suave: var(--tblr-orange-lt, #fef0e6);
}

.indicador-blue {
  --cor-indicador: var(--tblr-blue, #0054a6);
  --cor-indicador-suave: var(--tblr-blue-lt, #e5eef6);
}

.indicador-purple {
  --cor-indicador: var(--tblr-purple, #ae3ec9);
  --cor-indicador-suave: var(--tblr-purple-lt, #f7ebfa);
}

/* No celular o cartão é menor: a seta do atalho acompanha. */
@media (max-width: 575.98px) {
  .cartao-indicador-atalho::after {
    top: 0.625rem;
    right: 0.625rem;
  }
}

/* ── Cartão estreito ────────────────────────────────────────────────── */

/* Abaixo de 17rem o cartão não comporta ícone, rótulo e número lado a lado: o
   número de 1.625rem partia em três linhas ("R$ / 1.03 / 3,33") e o rótulo
   virava "A RECEB…". Vale no celular (dois por linha) e no computador com a
   tela menor e o menu aberto (quatro por linha em ~180px).

   Os seletores de dentro levam `.painel-indicadores` para vencer os refinos
   de tela (`.painel-visao-geral .indicador-valor`, duas classes, carregado
   depois deste arquivo) sem `!important`. */
@container indicador (max-width: 17rem) {
  .painel-indicadores .cartao-indicador-corpo {
    gap: 0;
    padding: 0.875rem 1rem;
  }

  /* O ícone sai: ele repete em desenho o que o rótulo já diz por escrito, e a
     largura que ocupava é justamente a que faltava para o número. */
  .painel-indicadores .indicador-icone {
    display: none;
  }

  /* O rótulo deixa de ser cortado e quebra em até duas linhas — duas bastam;
     o que passar disso é rótulo mal escrito, não falta de espaço. */
  .painel-indicadores .indicador-rotulo {
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* O número escala com a largura do CARTÃO (`cqi`): cabe inteiro numa linha
     de ~150px a ~270px, sem saltar de tamanho entre um degrau e outro. */
  .painel-indicadores .cartao-indicador .indicador-valor {
    font-size: clamp(1.0625rem, 11.5cqi, 1.375rem);
  }

  /* O detalhe vira bloco de até duas linhas, para os cartões da mesma faixa
     terminarem na mesma altura. A bolinha sai: em duas linhas ela ficaria
     alinhada ao meio do bloco, e a cor do cartão já está no número. */
  .painel-indicadores .indicador-detalhe {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .painel-indicadores .indicador-detalhe::before {
    content: none;
  }
}

@container indicador (max-width: 11rem) {
  .painel-indicadores .cartao-indicador-corpo {
    padding: 0.75rem 0.875rem;
  }
}