/* ==========================================================================
   solitpmt · /static/css/status.css — status público (status.html, rota /status)
   Carregue depois de /static/css/solit.css. Só a composição da página: a
   situação geral é um .alerta (o status.js troca o tom), cada serviço leva
   um selo do solit.css (.selo--operacional, --degradado, --fora: forma e
   cor mudam juntas). Nenhuma cor nova: só tokens. Sem animação: o estado
   aparece pela palavra e pelo ícone, não por pulsação.
   ========================================================================== */

.status { padding-block: clamp(40px, 6vw, 96px) var(--respiro); }

.status__corpo { max-width: 52rem; }

.status__lead { margin-top: var(--esp-4); }

/* Situação geral, um pouco maior que um alerta comum */
.status__geral { margin-top: var(--esp-8); padding-block: var(--esp-5); }
.status__geral .alerta__titulo {
  font-family: var(--fonte-marca);
  font-size: var(--tam-lead);
  font-weight: 500;
  line-height: 1.35;
}
.status__geral .alerta__texto { font-size: var(--tam-pequeno); color: var(--texto); }

/* Lista de serviços: nome e detalhe à esquerda, selo à direita; em tela
   estreita, o selo desce para baixo do nome em vez de sumir */
.status__lista { margin-top: var(--esp-6); }

.servicos > li + li { border-top: 1px solid var(--linha); }

.servico {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-6);
  padding: var(--esp-4) var(--esp-6);
}

.servico__principal { flex: 1 1 14rem; min-width: 0; }

.servico__nome {
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
}

.servico__detalhe {
  margin-top: 2px;
  font-size: var(--tam-legenda);
  line-height: 1.5;
  color: var(--texto-suave);
}

.status__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding-block: var(--esp-3);
}

/* Legenda das situações */
.status__legenda {
  margin-top: var(--esp-9);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--linha-forte);
}

.legenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.legenda__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--esp-5);
  align-items: baseline;
  font-size: var(--tam-ui);
}

.legenda__item dd { color: var(--texto); }

@media (min-width: 560px) {
  .legenda__item { grid-template-columns: 9rem minmax(0, 1fr); }
}

.status__suporte {
  margin-top: var(--esp-6);
  font-size: var(--tam-ui);
}

@media (max-width: 479px) {
  .servico { padding-inline: var(--esp-4); }
}