/* ============================================================================
   SOOS PONTO — supervisor.css
   ----------------------------------------------------------------------------
   A área de supervisor é deliberadamente escura e sóbria: quem entra aqui está
   por cima de TODAS as empresas e não deve confundir este ecrã com o
   backoffice de um cliente. A diferença visual é uma salvaguarda, não um
   capricho.
   ========================================================================= */

body { background: #f3f4f6; }

.sup-topo {
  display: flex; align-items: center; gap: 22px;
  background: #111827; color: #e5e7eb; padding: 12px 24px;
  position: sticky; top: 0; z-index: 40;
}
.sup-marca { font-size: 1rem; letter-spacing: .07em; }
.sup-marca b { font-weight: 800; }
.sup-marca span {
  font-size: .68rem; letter-spacing: .18em; opacity: .5;
  border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.sup-topo nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.sup-topo nav a {
  color: #9ca3af; text-decoration: none; padding: 7px 14px; border-radius: 7px; font-size: .9rem;
}
.sup-topo nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sup-topo nav a.ativo { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.sup-topo .link-btn { color: #9ca3af; }

.sup-corpo { max-width: 1240px; margin: 0 auto; padding: 26px 20px 60px; }
.sup-corpo h1 { font-size: 1.35rem; margin-bottom: 18px; }

/* estado das contas */
.conta-linha { display: flex; align-items: center; gap: 10px; }
.pastilha { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.pastilha.viva { background: #22c55e; }
.pastilha.morta { background: #9ca3af; }
.pastilha.aviso { background: #f59e0b; }

/* diagnóstico */
.diag { display: grid; gap: 8px; }
.diag-linha {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--ink-100); border-radius: 8px; padding: 12px 16px;
}
.diag-linha .nome { flex: 1; font-weight: 600; }
.diag-linha .nota { color: var(--ink-500); font-size: .82rem; flex: 2; }
.diag-estado {
  font-weight: 800; font-size: .76rem; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 999px;
}
.diag-estado.OK    { background: #dcfce7; color: #166534; }
.diag-estado.AVISO { background: #fef3c7; color: #92400e; }
.diag-estado.ERRO  { background: #fee2e2; color: #991b1b; }

@media (max-width: 700px) {
  .diag-linha { flex-wrap: wrap; }
  .diag-linha .nota { flex: 1 0 100%; }
}