/* ==========================================================================
   SGP — Design System · Camada 5: utilitários (poucos, propositalmente)
   ========================================================================== */

.pilha      { display: flex; flex-direction: column; gap: var(--esp-4); }
.pilha--2   { gap: var(--esp-2); }
.pilha--6   { gap: var(--esp-6); }
.linha      { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }
.linha--topo { align-items: flex-start; }
.cresce     { flex: 1; min-width: 0; }

.texto-suave    { color: var(--cor-texto-suave); }
.texto-fraco    { color: var(--cor-texto-fraco); }
.texto-perigo   { color: var(--sgp-perigo); }
.texto-sucesso  { color: var(--sgp-sucesso); }
/* CLASSE FANTASMA, AGORA COM CASA. `texto-info` era usada nos pontos da linha
   do tempo de atendimentos e proposições (`.etiqueta__ponto`, que se pinta com
   `background: currentColor`) e não existia em folha nenhuma: o ponto herdava
   a cor do texto ao redor e o azul de "informação" nunca chegou à tela.

   E ela chega por mais um caminho, que não se acha grepando o nome: o ponto do
   termômetro monta a classe na hora, `texto-<cor>` a partir de `voto_config`
   (pessoas/_linha_pessoa, _contadores e _coluna_filtros), e "a conquistar" tem
   cor `info`. Ou seja, a lista de pessoas e os chips de filtro pediam este azul
   desde sempre. Fica ao lado das irmãs, lendo o mesmo token que o resto do
   sistema usa para informação. */
.texto-info     { color: var(--sgp-info); }
.texto-pequeno  { font-size: var(--texto-sm); }
.texto-mini     { font-size: var(--texto-xs); }
.texto-forte    { font-weight: var(--peso-semi); }
.texto-numero   { font-variant-numeric: tabular-nums; }
.texto-centro   { text-align: center; }
.texto-direita  { text-align: right; }
.texto-cortado  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sem-margem { margin: 0; }
.mt-2 { margin-top: var(--esp-2); }
.mt-4 { margin-top: var(--esp-4); }
.mt-6 { margin-top: var(--esp-6); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-6 { margin-bottom: var(--esp-6); }

.oculto { display: none !important; }
@media (max-width: 640px) { .oculto-movel { display: none !important; } }
@media (min-width: 641px) { .apenas-movel { display: none !important; } }