/*
 * "Saúde da produção" no topo do Início (card 9ot1Yfje). Arquivo próprio, como `painel-cota.css`:
 * o bloco é uma `.inicio-caixa` (mesma borda, raio e padding das caixas do Início) e só acrescenta a
 * grade das quatro células. A pill vem do `painel.css` (`.pill.ok` verde = no ar, `.pill.crit`
 * vermelha = fora): verde é ESTADO, nunca enfeite.
 */

.saude-prod-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grade, 12px);
}

.saude-prod-celula {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Num flex em coluna a pill esticaria até a largura da célula: ela é etiqueta, não faixa. */
.saude-prod-celula .pill {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

.saude-prod-celula .inicio-valor.falta {
  color: var(--ink-3);
}

/* Telefone (menu colapsado): duas células por linha — o estado e as 24 h em cima, 7 e 30 dias embaixo. */
@media (max-width: 820px) {
  .saude-prod-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}