/* Status TriQ Hub — público, mobile-first, tokens do design system do site. */
.status {
  background: var(--fundo);
  color: var(--texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.status-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-13);
  padding: var(--s-13) var(--calha);
  border-bottom: 1px solid var(--borda);
}
/* Alvo de toque mínimo do design system (44 px). */
.status-topo .botao { min-height: var(--alvo); }
.status-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--texto);
  text-decoration: none;
  font-weight: 350;
}
.status-corpo {
  width: min(100% - 2 * var(--calha), 72rem);
  margin: 0 auto;
  padding: var(--s-21) 0 var(--s-55);
  flex: 1;
}
.status-rodape {
  border-top: 1px solid var(--borda);
  padding: var(--s-13) var(--calha);
  color: var(--texto-3);
}
.cartao {
  background: var(--superficie);
  border-top: 1px solid var(--borda-forte);
  border-radius: var(--r-13);
  padding: var(--s-21);
  margin-bottom: var(--s-21);
}
.rotulo { color: var(--ciano); font-size: var(--t-13); margin: 0 0 var(--s-5); }
.h2 { font-size: var(--t-21); font-weight: 350; margin: 0 0 var(--s-8); }
.texto-2 { color: var(--texto-2); margin: 0 0 var(--s-13); }
.texto-3 { color: var(--texto-3); font-size: var(--t-13); margin: var(--s-5) 0 0; }
.aviso-honestidade {
  border-top: 1px solid var(--borda);
  padding-top: var(--s-13);
  margin-top: var(--s-13);
}
.grade { display: grid; gap: var(--s-13); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dado { display: flex; justify-content: space-between; gap: var(--s-13); padding: var(--s-8) 0; border-top: 1px solid var(--borda); }
.dado dt { margin: 0; }
.dado dd { margin: 0; color: var(--texto-2); }
.legenda { margin: 0 0 var(--s-13); }
.situacao {
  display: inline-block;
  font-size: var(--t-13);
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  padding: 0 var(--s-8);
}
.situacao.operacional { color: var(--ciano); }
.situacao.degradado { color: var(--texto-2); }
.situacao.fora { color: var(--magenta); }
.situacao.sem-resposta { color: var(--texto-3); }
.servico { display: flex; align-items: center; justify-content: space-between; gap: var(--s-13); }
.servico-nome { margin: 0; }
.servico-detalhe { color: var(--texto-3); font-size: var(--t-13); margin: var(--s-5) 0 0; }