/* Pagina de diagnostico (public/diagnostico.html). Fica em arquivo proprio pra
   nao engordar o CSS que a sede carrega em toda visita - esta pagina e aberta
   uma vez por mudanca de hospedagem. */
.pagina-diag {
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  padding: 24px 16px 48px;
  overflow: auto;
}

.diag { max-width: 760px; margin: 0 auto; }

.diag-topo h1 { margin: 0 0 6px; font-size: 22px; }
.diag-topo p { margin: 0 0 6px; color: var(--texto-fraco); font-size: 13.5px; line-height: 1.45; }
.diag-onde code { font-size: 12.5px; color: var(--texto); }

.diag-grupo {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--painel);
}
.diag-grupo h2 { margin: 0 0 8px; font-size: 15px; }
.diag-nota { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--texto-fraco); }

.diag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.diag-carregando { color: var(--texto-fraco); font-size: 13px; }

.diag-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--painel-alt);
  font-size: 13.5px;
  line-height: 1.4;
}
.diag-item p { margin: 3px 0 0; color: var(--texto-fraco); font-size: 12.5px; }
.diag-marca { flex: none; width: 18px; text-align: center; font-weight: 700; }

/* Verde/vermelho/ambar tem que continuar legivel pra quem nao distingue cor:
   por isso cada item tem tambem o simbolo (✓ ✗ !) e o titulo dizendo o estado. */
.diag-ok .diag-marca { color: #17803d; }
.diag-ruim { background: #fdeceb; }
.diag-ruim .diag-marca { color: #b42318; }
.diag-atencao { background: #fff7e6; }
.diag-atencao .diag-marca { color: #9a6200; }

.diag-rodape { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.diag-voltar { color: var(--indigo); font-size: 13px; }

@media (max-width: 640px) {
  .pagina-diag { padding: 16px 12px 40px; }
  .diag-grupo { padding: 13px; }
}