/* Banner global de degradacao — faixa fixa no topo, VERMELHA, acima do
   conteudo. Escondido por default; degraded-banner.js mostra quando
   /api/health.degraded[] e nao-vazio. z-index 901 = um acima do update-banner
   (900) pra ganhar o stacking quando ambos aparecem. */
#degradedBanner {
  display: none; /* JS troca pra flex */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 901; /* acima do update-banner (900) e do conteudo, abaixo de modais (1000+) */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 180, 171, 0.12); /* var(--red) @ 12% */
  border-bottom: 1px solid var(--red);
  color: var(--text);
  font-size: 13px;
}

#degradedBanner .degraded-banner-icon {
  color: var(--red);
  font-size: 15px;
  line-height: 1;
}

#degradedBanner .degraded-banner-text strong {
  color: var(--red);
}

/* Deslogado: defesa em profundidade. /api/health exige auth, entao o poller
   deslogado 401a e nem chega a setar display:flex — mas se um token velho ou um
   bug tentar mostrar via inline style, esta regra garante que o banner
   (z-index 901) nunca pinte por cima do login (overlay 300) nem vaze rotulos de
   subsistema. Espelha components.css:1266 (body.logged-out #updateBanner).
   !important vence o inline style. */
body.logged-out #degradedBanner { display: none !important; }