/*
 * Painel · estilos de portal ADM: diagnóstico, filas e auditoria — pacote B4b.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* ---------- Saúde: duas colunas que viram uma no celular ---------- */
.diag-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--espaco-6); align-items: start; }
.diag-pilha { gap: var(--espaco-6); }
.diag-grade .ui-cartao { min-width: 0; }

/* ---------- Carregando ---------- */
.diag-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-3); }
.diag-linha-100 { width: 100%; }
.diag-linha-85 { width: 85%; }
.diag-linha-70 { width: 70%; }

/* ---------- Filas e mensagens ---------- */
.diag-secao { display: flex; flex-direction: column; gap: var(--espaco-3); }
.diag-secao-titulo { margin: 0; font: 600 13px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.diag-dialogo-texto { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.diag-dialogo-texto + .ui-campo textarea { width: 100%; box-sizing: border-box; }

/* ---------- Auditoria ---------- */
.diag-filtros { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: flex-end; }
.diag-barra { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.diag-lista { display: flex; flex-direction: column; gap: var(--espaco-4); }
.diag-lista .celula-sub, .diag-lista .mono { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 640px) {
  .diag-filtros > .ui-campo { flex: 1 1 100%; }
}