/* Faixa de indicadores com valor longo (portal.ui.componentes.faixa_kpis).

   No Consumo do contrato os valores em reais não cabiam no cartão de um sexto
   da linha: a 1366 px "R$ 39.591.456,00" perdia os centavos e "R$ 28.000,00"
   passava da borda; no celular, com dois cartões por linha, o valor era
   cortado na vírgula (operação de teste OPTESTE, 27/09/2026). A tela dos
   valores em reais pede esta grade com `faixa_kpis(..., larga=True)`: um
   cartão por linha no celular, dois até 1280 px e três daí para cima. Quem
   pede é a tela, e não o tamanho do valor, para a grade não mudar sozinha no
   meio do período. Aqui, e não em classe do Tailwind: `xl:grid-cols-3` não
   existe no CSS da imagem publicada, e classe nova só vale depois de
   recompilar. */
.faixa-kpis-larga {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .faixa-kpis-larga {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .faixa-kpis-larga {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}