/*
 * websocket-watch — identidade Nexa (Spekter)
 * Espaçamento e tipografia na sequência de Fibonacci; proporção áurea (φ ≈ 1,618) nos blocos.
 */

/* Exo 2 LOCAL (os mesmos .ttf do Nexa, em `fonts/`) — o painel roda em rede interna e o serviço não tem
   nenhuma dependência externa; buscar a fonte no Google faria a tipografia cair fora da internet. */
@font-face {
  font-family: "Exo 2";
  src: url("fonts/Exo2-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("fonts/Exo2-SemiBold.ttf") format("truetype");
  font-weight: 600 700;
  font-display: swap;
}

/* --- Fibonacci (px) + φ --------------------------------------------------- */
:root {
  --phi: 1.618;

  --f8: 8px;
  --f13: 13px;
  --f21: 21px;
  --f34: 34px;
  --f55: 55px;
  --f89: 89px;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 21px;
  --text-xl: 34px;
  --text-display: 55px;

  --radius-sm: var(--f8);
  --radius-md: var(--f13);
  --radius-lg: var(--f21);
  --radius-xl: var(--f34);

  --largura-form: 377px; /* φ² × 144 ≈ golden form width */
  --largura-pagina: 987px; /* conteúdo principal ≈ 610 × φ */

  /* Marca Nexa */
  --marca-de: #2258a8;
  --marca-para: #1b3161;
  --marca-hover-de: #1a4585;
  --marca-hover-para: #142550;
  --marca-texto: #2768ca;

  /* Tema claro */
  --fundo: #f3f4f6;
  --cartao: #ffffff;
  --cartao-elevado: #ffffff;
  --borda: #d4d4d8;
  --borda-forte: #a1a1aa;
  --borda-marca: rgb(34 88 168 / 0.28);
  --anel-cartao: rgb(34 88 168 / 0.08);
  --texto: #18181b;
  --texto-fraco: #52525b;
  --texto-muted: #71717a;
  --rotulo: #3f3f46;
  --input-fundo: #ffffff;
  --sombra: 0 var(--f8) var(--f21) rgb(34 40 88 / 0.08);
  --topbar-fundo: rgb(255 255 255 / 0.88);
  --arte-overlay: rgb(0 0 0 / 0.45);

  --ok-fundo: #dcfce7;
  --ok-texto: #14532d;
  --alerta-fundo: #fef3c7;
  --alerta-texto: #713f12;
  --erro-fundo: #fee2e2;
  --erro-texto: #7f1d1d;
  --neutro-fundo: #e4e4e7;
  --neutro-texto: #3f3f46;

  --focus: #3b82f6;

  --sidebar-largura: 268px;
  --pagina-padding: var(--f13);
}

.dark {
  --fundo: #222221;
  --cartao: #2b2b2a;
  --cartao-elevado: #323231;
  --borda: #525250;
  --borda-forte: #71717a;
  --borda-marca: rgb(59 130 246 / 0.35);
  --anel-cartao: rgb(59 130 246 / 0.1);
  --texto: #fafafa;
  --texto-fraco: #d4d4d8;
  --texto-muted: #a1a1aa;
  --rotulo: #e4e4e7;
  --input-fundo: #1f1f1e;
  --sombra: 0 var(--f8) var(--f34) rgb(0 0 0 / 0.35);
  --topbar-fundo: rgb(34 34 33 / 0.92);
  --arte-overlay: rgb(0 0 0 / 0.55);

  --ok-fundo: #14532d;
  --ok-texto: #bbf7d0;
  --alerta-fundo: #713f12;
  --alerta-texto: #fde68a;
  --erro-fundo: #7f1d1d;
  --erro-texto: #fecaca;
  --neutro-fundo: #3f3f3d;
  --neutro-texto: #d4d4d8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* O atributo `hidden` TEM de esconder, sempre.
   O navegador aplica `display: none` nele, mas qualquer regra nossa com `display` vence essa — e o
   elemento reaparece. Foi o que fez a mensagem de erro do login virar uma pílula vermelha vazia
   (`.badge` é `inline-block`), e antes disso já tinha exigido remendo em `.vista` e `.chip`.
   Uma regra só, com `!important`, mata a classe inteira de bug — em vez de caçar caso a caso. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: light dark;
  scroll-padding-top: calc(var(--pagina-padding) + var(--f89));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: var(--phi);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.titulo-marca {
  background: linear-gradient(135deg, var(--marca-de), var(--marca-para));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.titulo-pagina {
  font-weight: 600;
  color: var(--texto);
}

p {
  margin: 0;
}

a {
  color: var(--marca-texto);
}

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.92em;
  padding: 2px var(--f8);
  border-radius: var(--f8);
  background: var(--neutro-fundo);
  color: var(--texto);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Botão tema ----------------------------------------------------------- */
.btn-tema {
  position: fixed;
  top: var(--f21);
  right: var(--f21);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--f8);
  padding: var(--f8) var(--f13);
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.btn-tema:hover {
  color: var(--texto);
  border-color: var(--marca-de);
}
.btn-tema .icone-tema::before {
  content: "☀";
}
.dark .btn-tema .icone-tema::before {
  content: "☾";
}

/* --- Botões --------------------------------------------------------------- */
button {
  padding: var(--f13) var(--f21);
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(to right, var(--marca-de), var(--marca-para));
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
button:hover:not(:disabled) {
  background: linear-gradient(to right, var(--marca-hover-de), var(--marca-hover-para));
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button.ghost {
  background: transparent;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  box-shadow: none;
}
button.ghost:hover:not(:disabled) {
  background: var(--cartao-elevado);
  color: var(--texto);
}

/* --- Campos --------------------------------------------------------------- */
label:not(.checkbox) {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: var(--f8);
  color: var(--rotulo);
}

.rotulo,
.rotulo-kpi {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rotulo);
}
.campo {
  margin-bottom: var(--f21);
}
input,
select {
  width: 100%;
  padding: var(--f13);
  border: 1px solid var(--borda-forte);
  border-radius: var(--radius-md);
  background: var(--input-fundo);
  color: var(--texto);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus,
select:focus {
  border-color: var(--marca-de);
  box-shadow: 0 0 0 3px rgb(34 88 168 / 0.2);
  outline: none;
}
label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--f8);
  font-weight: 500;
  font-size: var(--text-sm);
  margin: 0;
  cursor: pointer;
}
label.checkbox input {
  width: auto;
  accent-color: var(--marca-de);
}

/* --- Login (split Nexa) --------------------------------------------------- */
.login-page {
  overflow-x: hidden;
}

.login-shell {
  display: flex;
  min-height: 100vh;
}

.login-col-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Padding em duas escalas: apertado no celular, folgado no desktop (ver a media query abaixo).
     SEM `max-width` aqui de propósito — ele só vale quando a coluna da arte está na tela; senão
     o formulário ficava espremido em 62% da largura com 38% de vazio ao lado. */
  padding: var(--f34) var(--f21);
  min-width: 0;
}

.login-form-wrap {
  width: 100%;
  max-width: var(--largura-form);
  margin: 0 auto;
}

.login-brand {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--f55);
  color: var(--texto-fraco);
}
.login-brand strong {
  color: var(--marca-de);
  font-weight: 700;
}
.login-brand span {
  color: var(--texto-muted);
  font-weight: 500;
}

.login-form-wrap h1 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--f13);
  color: var(--texto);
}
.login-sub {
  color: var(--texto-fraco);
  font-size: var(--text-sm);
  margin-bottom: var(--f34);
}

.login-form-wrap button[type="submit"] {
  width: 100%;
  min-height: var(--f55);
  margin-top: var(--f13);
  font-size: var(--text-base);
}

.login-col-art {
  flex: 1;
  display: none;
  padding: var(--f34) var(--f34) var(--f34) 0;
  min-width: 0;
}
@media (min-width: 1024px) {
  .login-col-art {
    display: flex;
  }
  /* Com a arte na tela, o formulário recebe a fração áurea e respira mais. */
  .login-col-form {
    max-width: calc(100vw / var(--phi));
    padding: var(--f55) var(--f34);
  }
}

.login-art-inner {
  flex: 1;
  border-radius: var(--radius-xl);
  background: var(--marca-para);
  box-shadow: var(--sombra);
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.login-art-inner::before {
  content: "";
  position: absolute;
  /* `inset: 0` (era -20px) e SEM `scale`: os dois existiam para esconder a borda do desfoque quando a
     arte era `cover` e sobrava imagem para cortar. Com `contain` eles trabalhavam contra — ampliavam a
     caixa e o `overflow: hidden` do pai voltava a cortar justamente o que se queria mostrar inteiro. */
  inset: 0;
  /* O fallback `none` é obrigatório: variável indefinida invalida a declaração `background`
     INTEIRA (nem o `center / cover` sobrevive), e era isso que deixava o painel só azul enquanto a
     imagem não fosse definida. Com ele, o azul do `.login-art-inner` aparece por baixo sem piscar. */
  /* `auto 100%` = ajusta pela ALTURA, largura proporcional.
     `cover` enchia o painel cortando dos dois lados (parecia ampliada demais). `contain` resolveu o
     zoom mas, como a arte é panorâmica e a coluna é alta, ele coube pela LARGURA e deixou faixas
     azuis em cima e embaixo. Fixando a altura em 100%, a imagem ocupa a coluna inteira na vertical e
     o que passar da largura é aparado nas laterais — que é onde a arte tem margem para perder. */
  background: var(--login-art-bg, none) center / auto 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}
.login-art-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(27 49 97 / 0.92) 0%,
    rgb(27 49 97 / 0.45) 32%,
    rgb(34 88 168 / 0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.login-art-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--f55);
}
.login-art-copy h2 {
  font-size: var(--text-xl);
  max-width: calc(var(--largura-form) * var(--phi));
}
.login-art-copy p {
  margin-top: var(--f13);
  opacity: 0.9;
  font-size: var(--text-base);
  max-width: calc(var(--largura-form) * var(--phi));
}

.erro-login {
  margin-top: var(--f21);
  padding: var(--f13) var(--f21);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* --- Login em tela estreita ------------------------------------------------
   O botão de tema é `fixed` no canto superior direito; sem espaço reservado ele deitava sobre a
   marca. E a marca em 21px quebrava "NEXA · MONITORAMENTO" no meio. */
@media (max-width: 640px) {
  .login-col-form {
    padding: var(--f55) var(--f21) var(--f34);
  }
  .login-brand {
    font-size: var(--text-base);
    margin-bottom: var(--f34);
  }
  .login-form-wrap h1 {
    font-size: var(--text-lg);
  }
  /* A pílula de erro não deve estourar a largura com uma mensagem longa. */
  .erro-login {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    padding: var(--f13);
  }
}

/* --- Monitor -------------------------------------------------------------- */
.monitor-page {
  min-height: 100vh;
  padding: var(--pagina-padding);
  background: var(--fundo);
}

.monitor-main {
  margin-left: calc(var(--sidebar-largura) + var(--f21));
  min-height: calc(100vh - var(--pagina-padding) * 2);
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* --- Menu lateral modular: lado e recolhimento -----------------------------
   O menu é `fixed`, então "trocar de lado" é trocar `left` por `right` e inverter a margem que abre
   espaço para ele. Fica no `<body>` porque afeta o layout inteiro, não só a barra. */
body.menu-a-direita .sidebar-nexa {
  left: auto;
  right: var(--pagina-padding);
}
body.menu-a-direita .monitor-main {
  margin-left: 0;
  margin-right: calc(var(--sidebar-largura) + var(--f21));
}

/* Recolhido: só os ícones. A largura vira variável para a margem do conteúdo acompanhar sozinha —
   sem isso, sobraria um vão do tamanho do menu inteiro. */
body.menu-recolhido {
  --sidebar-largura: 64px;
}
body.menu-recolhido .nav-link-text,
body.menu-recolhido .sidebar-grupo,
body.menu-recolhido .sidebar-brand-sub,
body.menu-recolhido .sidebar-brand-hint,
body.menu-recolhido .sidebar-resumo,
body.menu-recolhido .sidebar-atalhos,
body.menu-recolhido .nav-contagem,
body.menu-recolhido .sidebar-botao-texto {
  display: none;
}
body.menu-recolhido .sidebar-nexa {
  align-items: center;
}
body.menu-recolhido .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
body.menu-recolhido .sidebar-top,
body.menu-recolhido .sidebar-scroll,
body.menu-recolhido .sidebar-rodape {
  padding-left: var(--f8);
  padding-right: var(--f8);
}
body.menu-recolhido .sidebar-controles {
  flex-direction: column;
}
/* A seta do "recolher" aponta para o outro lado quando já está recolhido / quando o menu está à
   direita — o ícone tem de dizer para onde a ação leva, não onde o menu está. */
body.menu-recolhido #btnRecolherMenu svg,
body.menu-a-direita:not(.menu-recolhido) #btnRecolherMenu svg {
  transform: scaleX(-1);
}

.sidebar-rodape {
  padding: var(--f13) var(--f21) var(--f21);
  display: flex;
  flex-direction: column;
  gap: var(--f8);
}
.sidebar-controles {
  display: flex;
  gap: var(--f8);
}
.sidebar-botao {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f8);
  min-height: var(--f34);
  padding: 0 var(--f8);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
/* O SVG base aponta para a esquerda; espelhar faz apontar para a direita. */
.sidebar-botao.espelhado svg {
  transform: scaleX(-1);
}
.sidebar-botao:hover {
  color: var(--marca-texto);
  border-color: var(--borda-marca);
  background: var(--cartao-elevado);
}

/* Em tela estreita o menu já vira gaveta (sobreposta), então lado e recolhimento não se aplicam. */
@media (max-width: 900px) {
  body.menu-a-direita .monitor-main,
  body.menu-recolhido .monitor-main {
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- Sidebar Nexa (glass, fixa) ------------------------------------------- */
.sidebar-nexa {
  position: fixed;
  z-index: 50;
  top: var(--pagina-padding);
  left: var(--pagina-padding);
  bottom: var(--pagina-padding);
  width: var(--sidebar-largura);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgb(225 225 225 / 0.81);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dark .sidebar-nexa {
  background: rgb(0 0 0 / 0.28);
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.35);
}

.sidebar-top {
  flex-shrink: 0;
  padding: var(--f21) var(--f21) var(--f13);
}

.sidebar-brand {
  display: flex;
  align-items: baseline;
  gap: var(--f8);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sidebar-brand-sub {
  font-weight: 600;
  color: var(--texto-muted);
  font-size: var(--text-sm);
}

.sidebar-brand-hint {
  margin: var(--f8) 0 0;
  font-size: var(--text-xs);
  color: var(--texto-muted);
  line-height: 1.45;
}

.sidebar-divider {
  height: 1px;
  margin-top: var(--f13);
  background: linear-gradient(
    90deg,
    transparent,
    var(--borda-forte) 20%,
    var(--borda-forte) 80%,
    transparent
  );
  opacity: 0.65;
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--f13) var(--f13) var(--f8);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.sidebar-scroll::-webkit-scrollbar {
  width: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
}
.dark .sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.15);
}

.sidebar-grupo {
  display: block;
  padding: 0 var(--f8) var(--f8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-muted);
  user-select: none;
}

.sidebar-nav {
  margin-bottom: var(--f13);
}

.sidebar-nav .nav-links + .sidebar-grupo {
  margin-top: var(--f21);
}

.grupo-divisor {
  display: flex;
  align-items: center;
  gap: var(--f13);
  margin: var(--f34) 0 var(--f13);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-muted);
  user-select: none;
}
.grupo-divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda);
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--f8);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--f13);
  padding: var(--f8) var(--f13);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, font-weight 0.15s ease;
}
.nav-link:hover {
  background: rgb(0 0 0 / 0.06);
  font-weight: 700;
}
.dark .nav-link:hover {
  background: rgb(255 255 255 / 0.1);
}
.nav-link.ativo {
  background: rgb(0 0 0 / 0.08);
  font-weight: 700;
}
.dark .nav-link.ativo {
  background: rgb(255 255 255 / 0.12);
}
.nav-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.nav-icone {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.nav-link:hover .nav-icone,
.nav-link.ativo .nav-icone {
  opacity: 1;
}

.nav-link-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.nav-contagem {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.06);
  color: var(--texto-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dark .nav-contagem {
  background: rgb(255 255 255 / 0.1);
}
.nav-contagem-destaque {
  background: rgb(34 88 168 / 0.15);
  color: var(--marca-texto);
}
.nav-contagem-feed.nav-feed-ok {
  background: var(--ok-fundo);
  color: var(--ok-texto);
}
.nav-contagem-feed.nav-feed-erro {
  background: var(--erro-fundo);
  color: var(--erro-texto);
}

.sidebar-resumo {
  padding-top: var(--f8);
}

.nav-resumo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f8);
  margin-bottom: var(--f13);
  padding: 0 var(--f8);
}

.nav-mini-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--f8);
  max-height: calc(var(--f89) * 2);
  overflow-y: auto;
}

.nav-mini-item {
  display: block;
  padding: var(--f8) var(--f13);
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 0.04);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.dark .nav-mini-item {
  background: rgb(255 255 255 / 0.06);
}
.nav-mini-item:hover {
  background: rgb(34 88 168 / 0.12);
}
.nav-mini-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-mini-item span {
  color: var(--texto-muted);
  font-size: 11px;
}
.nav-mini-vazio {
  padding: var(--f13);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--texto-muted);
  text-align: center;
}

.nav-ver-todos {
  display: inline-block;
  margin: var(--f13) var(--f8) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--marca-texto);
  text-decoration: none;
}
.nav-ver-todos:hover {
  text-decoration: underline;
}

.sidebar-atalhos {
  flex-shrink: 0;
  margin: 0;
  padding: var(--f8) var(--f21) var(--f13);
  font-size: 10px;
  color: var(--texto-muted);
  text-align: center;
  border-top: 1px solid var(--borda);
}
.sidebar-atalhos kbd {
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: rgb(0 0 0 / 0.04);
  font-family: inherit;
  font-size: 9px;
}
.dark .sidebar-atalhos kbd {
  background: rgb(255 255 255 / 0.06);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(2px);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--f8);
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.card-link:hover {
  border-color: var(--borda-marca);
  transform: translateY(-2px);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--borda-marca);
}
.card-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.panel:focus {
  outline: none;
}
.panel:focus-visible {
  box-shadow: var(--sombra), inset 0 0 0 1px var(--borda-marca), 0 0 0 3px rgb(34 88 168 / 0.2);
}

@media (max-width: 767px) {
  .monitor-page {
    padding: 0;
  }

  .monitor-main {
    margin-left: 0;
    min-height: 100vh;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .sidebar-nexa {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(288px, 88vw);
    border-radius: 0 20px 20px 0;
    transform: translateX(-110%);
  }
  .sidebar-nexa.aberto {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgb(0 0 0 / 0.25);
  }

  .sidebar-overlay:not([hidden]) {
    display: block;
  }

  .sidebar-atalhos {
    display: none;
  }

  .conteudo,
  .topbar {
    padding-left: var(--f21);
    padding-right: var(--f21);
  }
}

@media (min-width: 768px) {
  .conteudo {
    max-width: none;
  }
}

.topbar {
  position: sticky;
  top: var(--pagina-padding);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--f13) var(--f21);
  padding: var(--f21) var(--f34);
  margin-bottom: var(--f13);
  background: var(--topbar-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--anel-cartao);
  backdrop-filter: blur(12px);
}

.topbar-titulo {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.topbar-desc {
  margin-top: var(--f8);
  font-size: var(--text-sm);
  color: var(--texto-fraco);
  max-width: 42rem;
  line-height: 1.55;
}

.topbar-meta {
  font-size: var(--text-sm);
  color: var(--texto-muted);
  flex: 1 1 200px;
  line-height: 1.5;
}
.topbar-meta strong {
  color: var(--texto);
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--f13);
}

.monitor-page .btn-tema {
  position: static;
  box-shadow: none;
}

.conteudo {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: min(1200px, 100vw);
  margin: 0 auto;
  padding: var(--f34);
}

/* --- Barra de KPIs: chrome fixo, fora das vistas ---------------------------
   Alinhada à mesma coluna do conteúdo para os cartões não "flutuarem" soltos acima das tabelas. */
.barra-kpi {
  width: 100%;
  max-width: min(1200px, 100vw);
  margin: 0 auto;
  padding: var(--f21) var(--f34) 0;
  display: grid;
  /* 144px (Fibonacci) de mínimo: com o mínimo anterior (233px) os 5 cartões não cabiam por poucos
     pixels e o último caía sozinho numa segunda linha — o 4+1 torto das capturas. Assim entram os 5
     lado a lado em tela larga e a quebra, quando vem, é equilibrada. */
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: var(--f13);
}

/* Contador + "há X" na mesma linha do cabeçalho da vista. */
.estado-vista {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--f8);
}
.frescor {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-muted);
  white-space: nowrap;
}

/* Item do menu correspondente à vista aberta. */
.nav-link[aria-current="page"] {
  color: var(--marca-texto);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--largura-form) / var(--phi)), 1fr));
  gap: var(--f21);
  margin-bottom: var(--f34);
  scroll-margin-top: var(--f89);
}

.card {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: var(--f21) var(--f34);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--anel-cartao);
}
.card .rotulo {
  padding-bottom: var(--f8);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--f13);
}
.card .valor {
  font-size: var(--text-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--marca-texto);
}

.panel {
  position: relative;
  scroll-margin-top: var(--f89);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: var(--f34);
  margin-bottom: var(--f21);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--anel-cartao);
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--marca-de), var(--marca-para));
}

.panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--f13) var(--f21);
  margin-bottom: var(--f21);
  padding-bottom: var(--f13);
  border-bottom: 1px solid var(--borda);
}

.secao-titulo {
  position: relative;
  padding-left: var(--f21);
  flex: 1 1 280px;
  min-width: 0;
}
.secao-titulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--marca-de), var(--marca-para));
}
.secao-titulo h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.secao-desc {
  margin-top: var(--f8);
  color: var(--texto-fraco);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 52rem;
}

.aviso-falha {
  margin: 0 0 var(--f21);
  padding: var(--f13) var(--f21);
  border: 1px solid var(--erro-texto);
  border-radius: var(--radius-md);
  background: var(--erro-fundo);
  color: var(--erro-texto);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Legenda: material de CONSULTA, recolhida por padrão. Aberta, ela ocupava metade da tela e
   empurrava a tabela — que é o conteúdo — para fora da vista. */
.legenda {
  margin-top: var(--f13);
}
.legenda > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--f8);
  cursor: pointer;
  color: var(--texto-fraco);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--f8) 0;
  list-style: none;
}
.legenda > summary::-webkit-details-marker { display: none; }
.legenda > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 0.15s ease;
}
.legenda[open] > summary::before { transform: rotate(90deg); }
.legenda > summary:hover { color: var(--marca-texto); }

/* GRADE de 2 colunas: o badge tem coluna própria (todos alinhados) e o texto corre numa coluna só.
   Em flex, badge e texto disputavam a linha e o texto quebrava embaixo do badge, em degrau. */
.legenda-status {
  list-style: none;
  margin: 0;
  padding: var(--f8) 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--f13) var(--f13);
  align-items: baseline;
}
.legenda-status li {
  display: contents;
}
.legenda-status .badge {
  justify-self: start;
}
.legenda-desc {
  color: var(--texto-fraco);
  font-size: var(--text-sm);
  line-height: var(--phi);
}


.hint {
  color: var(--texto-fraco);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin-bottom: var(--f21);
}

.badge {
  display: inline-block;
  padding: var(--f8) var(--f13);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-gray {
  background: var(--neutro-fundo);
  color: var(--neutro-texto);
  border-color: var(--borda);
}
.badge-green {
  background: var(--ok-fundo);
  color: var(--ok-texto);
}
.badge-yellow {
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
}
.badge-red {
  background: var(--erro-fundo);
  color: var(--erro-texto);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--borda-forte);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--anel-cartao);
}

/* Tabela que pode ter MUITAS linhas (universo completo de protocolos): rola dentro de si em vez de
   empurrar as seções seguintes para fora da tela, com o cabeçalho preso no topo. */
.table-wrap-alto {
  max-height: min(61.8vh, 610px);
  overflow-y: auto;
}
.table-wrap-alto thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* --- Barra de filtros de tabela ------------------------------------------- */
.filtro-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--f13);
  margin-bottom: var(--f13);
}
.filtro-busca {
  flex: 1 1 233px;
  min-width: 0;
}
.filtro-busca input {
  height: var(--f34);
  padding: 0 var(--f13);
}
/* Seletor de intervalo na barra superior — largura de conteúdo, não 100% como os campos de formulário. */
.seletor-intervalo {
  width: auto;
  min-width: var(--f89);
  padding: var(--f8) var(--f13);
  font-size: var(--text-xs);
}

.filtro-usuario {
  flex: 0 1 233px;
  min-width: 0;
}
.filtro-usuario select {
  height: var(--f34);
  padding: 0 var(--f13);
}

/* Linha do feed: hora · autor (clicável) · texto. */
.feed-linha {
  display: flex;
  align-items: baseline;
  gap: var(--f8);
  flex-wrap: wrap;
}
/* O autor é um botão porque É uma ação (isolar aquele usuário), não um rótulo. Fica discreto até
   o hover — o feed já tem informação demais competindo por atenção. */
.feed-autor {
  padding: 0 6px;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: var(--f8);
  background: var(--neutro-fundo);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.feed-autor:hover {
  color: var(--marca-texto);
  border-color: var(--borda-marca);
  background: var(--neutro-fundo);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f8);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--f8);
  min-height: var(--f34);
  padding: 0 var(--f13);
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip:hover:not(:disabled) {
  background: var(--cartao-elevado);
  color: var(--texto);
  border-color: var(--borda-forte);
}
.chip.ativo {
  border-color: var(--marca-de);
  background: var(--cartao-elevado);
  color: var(--marca-texto);
}
.chip-num {
  font-variant-numeric: tabular-nums;
  color: var(--texto-muted);
}
.chip.ativo .chip-num {
  color: var(--marca-texto);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--f13) var(--f21);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.data-table th {
  background: linear-gradient(to bottom, var(--cartao-elevado), var(--fundo));
  color: var(--rotulo);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid var(--borda-marca);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr:hover td {
  background: rgb(34 88 168 / 0.04);
}
.dark .data-table tbody tr:hover td {
  background: rgb(34 88 168 / 0.12);
}
.data-table td.vazio {
  color: var(--texto-fraco);
  font-style: italic;
  text-align: center;
  padding: var(--f34);
}

.log-panel {
  height: calc(var(--f89) * 3 + var(--f21));
  overflow-y: auto;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--radius-md);
  padding: var(--f13) var(--f21);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 1px 0 var(--anel-cartao);
}
.log-panel div {
  padding: var(--f8) 0;
  border-bottom: 1px solid var(--borda);
}
.log-panel div:last-child {
  border-bottom: 0;
}

.estado-in_progress {
  color: var(--ok-texto);
  font-weight: 600;
}
.estado-other {
  color: var(--texto-fraco);
}
.estado-suspended {
  color: var(--alerta-texto);
  font-weight: 600;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f13);
  align-items: center;
}
.form-row.buttons {
  margin-top: var(--f13);
}

@media (max-width: 767px) {
  .topbar {
    top: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .login-col-form,
  .conteudo {
    padding-left: var(--f21);
    padding-right: var(--f21);
  }
  .topbar-desc {
    display: none;
  }
  .cards-atalhos {
    grid-template-columns: 1fr 1fr;
  }
}