/* ==========================================================================
   Digitalli — digitalli-theme.css
   Camada de marca sobre o Design System ZetaUno.

   COMO ISTO FUNCIONA
   O `zetauno-style.css` é vendorado sem alterações de cor: toda a aparência
   dele sai de tokens CSS. Este arquivo carrega DEPOIS e só redefine tokens —
   a estrutura, a tipografia, os espaçamentos e os componentes continuam sendo
   os do Design System. Por isso atualizar o Design System não desfaz a marca,
   e mexer na marca não exige tocar em componente nenhum.

        <link rel="stylesheet" href="…/css/zetauno-style.css">
        <link rel="stylesheet" href="…/css/digitalli-theme.css">   <-- nesta ordem

   O QUE MUDA
   1. O verde lime da ZetaUno vira o VERMELHO da Digitalli (#de3338, a cor da
      marca — a mesma do favicon e do símbolo).
   2. A escala neutra perde o tom esverdeado e vira cinza neutro, o cinza
      metálico do símbolo.
   3. O rótulo sobre o acento passa de preto para BRANCO: preto sobre o verde
      lime tinha contraste, sobre o vermelho não teria.
   4. A logo da Digitalli substitui a da ZetaUno (ver `.dgt-logo` no fim).

   OS NOMES DOS TOKENS NÃO MUDAM. `--zeta-green-500` continua existindo e passa
   a valer vermelho; renomeá-lo obrigaria a editar o arquivo vendorado, que é
   exatamente o que esta camada evita. Para markup novo há apelidos legíveis
   (`--digitalli-red-*`, `--brand`, `--text-on-accent`).
   ========================================================================== */


/* ==========================================================================
   01. ESCALA DA MARCA
   ========================================================================== */

:root {
  /* ---- Vermelho Digitalli ----
     O 500 é o vermelho do símbolo, medido no favicon: #de3338. Os demais tons
     são o mesmo matiz (hsl 358°) variando só a luminosidade, para hover,
     fundos suaves e texto sobre eles. */
  --digitalli-red-50:  #fdf1f2;
  --digitalli-red-100: #fbdbdc;
  --digitalli-red-200: #f5b8ba;
  --digitalli-red-300: #ec888b;
  --digitalli-red-400: #e55d61;
  --digitalli-red-500: #de3338;  /* vermelho PRIMÁRIO da marca */
  --digitalli-red-600: #c22429;  /* hover / pressionado */
  --digitalli-red-700: #9e1a1e;
  --digitalli-red-800: #7b1417;
  --digitalli-red-900: #5b1013;

  /* Apelido curto para markup novo. */
  --brand:       var(--digitalli-red-500);
  --brand-hover: var(--digitalli-red-600);

  /* ---- Remapeamento: a escala "green" do Design System recebe o vermelho ----
     Tudo que o zetauno-style.css pinta de marca (botão primário, item ativo da
     navegação, avatar, seleção de texto, badges e alertas "--green") passa a
     sair daqui. */
  --zeta-green-50:  var(--digitalli-red-50);
  --zeta-green-100: var(--digitalli-red-100);
  --zeta-green-200: var(--digitalli-red-200);
  --zeta-green-300: var(--digitalli-red-300);
  --zeta-green-400: var(--digitalli-red-400);
  --zeta-green-500: var(--digitalli-red-500);
  --zeta-green-600: var(--digitalli-red-600);
  --zeta-green-700: var(--digitalli-red-700);
  --zeta-green-800: var(--digitalli-red-800);
  --zeta-green-900: var(--digitalli-red-900);

  /* ---- Escala neutra — cinza neutro, sem o tom esverdeado da ZetaUno ----
     Os valores são os mesmos da escala original com o matiz zerado: só o
     tempero muda, a hierarquia de claro/escuro continua idêntica. */
  --zeta-black: #0e0f10;
  --zeta-950: #151617;
  --zeta-900: #1c1e1f;
  --zeta-800: #2a2c2e;
  --zeta-700: #3d3f42;
  --zeta-600: #5b5e62;
  --zeta-500: #7b7e82;
  --zeta-400: #a4a7ab;
  --zeta-300: #c8cacd;
  --zeta-200: #e0e2e4;
  --zeta-100: #ecedef;
  --zeta-50:  #f4f5f6;

  --grid-line-light: rgba(14, 15, 16, 0.055);
  --grid-line-dark:  rgba(255, 255, 255, 0.05);

  /* ---- Status semântico ----
     `--status-danger` é o único que precisou sair do lugar. O vermelho da
     ZetaUno para erro (#e0492e) ficaria colado no vermelho da marca, e o botão
     que DESTRÓI não pode parecer o botão que CONFIRMA. Aqui o destrutivo é um
     carmim bem mais escuro: mesmo matiz de família, tom inconfundível ao lado
     do vermelho vivo da marca, e 7.9:1 de contraste com o branco.

     `--status-success` volta a poder ser verde sem ambiguidade — na ZetaUno
     ele disputava com a cor da marca; aqui não disputa com nada. */
  --status-success: #2fae4b;
  --status-warning: #e8a417;
  --status-danger:  #a3121a;
  --status-info:    #2f8fd0;

  /* ---- Paleta de gráficos (monocromática da marca + tinta) ---- */
  --chart-1: #de3338;
  --chart-2: #2a2c2e;
  --chart-3: #c22429;
  --chart-4: #ec888b;
  --chart-5: #7b7e82;
  --chart-6: #f5b8ba;

  /* ---- Paleta de séries (múltiplas linhas — matizes distintos) ----
     A linha 1 é a marca. A linha que era vermelha virou verde: com o vermelho
     à frente da paleta, duas linhas vermelhas se confundiriam no cruzamento. */
  --chart-line-1: var(--digitalli-red-500); /* vermelho da marca */
  --chart-line-2: var(--status-warning);    /* laranja */
  --chart-line-3: #2fae4b;                  /* verde */
  --chart-line-4: #1e5aa8;                  /* azul escuro */
  --chart-line-5: var(--status-info);       /* azul claro */

  /* ---- Paleta de séries ALTERNATIVA (alto contraste) ---- */
  --chart-line-alt-1: #f01620; /* vermelho vívido */
  --chart-line-alt-2: #f2600c; /* laranja puro   */
  --chart-line-alt-3: #17a34a; /* verde puro     */
  --chart-line-alt-4: #1e2f8f; /* índigo profundo */
  --chart-line-alt-5: #14b0d4; /* ciano brilhante */

  /* ---- Sombras neutras (a tinta base mudou de matiz) ---- */
  --shadow-xs: 0 1px 2px rgba(14, 15, 16, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 15, 16, 0.08), 0 1px 2px rgba(14, 15, 16, 0.05);
  --shadow-md: 0 4px 12px rgba(14, 15, 16, 0.08), 0 2px 4px rgba(14, 15, 16, 0.05);
  --shadow-lg: 0 12px 28px rgba(14, 15, 16, 0.10), 0 4px 10px rgba(14, 15, 16, 0.06);
  --shadow-xl: 0 24px 56px rgba(14, 15, 16, 0.14);
  /* Mantém o nome do token (o `.zeta-btn--glow` o consome) com a cor da marca. */
  --shadow-green: 0 8px 24px rgba(222, 51, 56, 0.35);
  --shadow-brand: var(--shadow-green);
}


/* ==========================================================================
   02. TEMAS

   Os dois blocos abaixo repetem a estrutura dos temas do Design System com a
   escala neutra nova. `[data-theme="dark"]` tem especificidade maior que
   `:root`, então o tema escuro precisa mesmo do seletor próprio.
   ========================================================================== */

:root,
[data-theme="light"] {
  --bg-base:         #eef0f1;
  --surface:         #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f4f5f6;
  --surface-inverse: #0e0f10;

  --border:          #e0e2e4;
  --border-strong:   #c8cacd;

  --text-primary:    #0e0f10;
  --text-secondary:  #5b5e62;
  --text-muted:      #7b7e82;
  --text-inverse:    #ffffff;

  /* Branco sobre o vermelho da marca: 4.53:1, passa em AA para texto normal.
     Preto passaria também, mas o branco é o que a marca usa e o que separa o
     botão primário do resto da tela. O nome `--text-on-green` é do arquivo
     vendorado; `--text-on-accent` é o apelido para markup novo. */
  --text-on-green:   #ffffff;
  --text-on-accent:  var(--text-on-green);

  --accent:          var(--digitalli-red-500);
  --accent-hover:    var(--digitalli-red-600);
  --accent-contrast: #ffffff;
  --focus-ring:      rgba(222, 51, 56, 0.45);
}

[data-theme="dark"] {
  --bg-base:         #0e0f10;
  --surface:         #1c1e1f;
  --surface-raised:  #242628;
  --surface-sunken:  #151617;
  --surface-inverse: #ffffff;

  --border:          #2a2c2e;
  --border-strong:   #3d3f42;

  --text-primary:    #f4f5f6;
  --text-secondary:  #a4a7ab;
  --text-muted:      #7b7e82;
  --text-inverse:    #0e0f10;
  --text-on-green:   #ffffff;
  --text-on-accent:  var(--text-on-green);

  --accent:          var(--digitalli-red-500);
  /* No tema escuro o Design System clareia o acento no hover. Aqui ele ESCURECE
     nos dois temas: qualquer vermelho mais claro que #de3338 derruba o branco
     do rótulo abaixo de 4.5:1, e o hover não vale perder a legibilidade. */
  --accent-hover:    var(--digitalli-red-600);
  --accent-contrast: #ffffff;
  --focus-ring:      rgba(222, 51, 56, 0.55);

  /* Séries: clareia o que afunda no palco preto. */
  --chart-2: #c8cacd;
  --chart-line-4: #5a8fd6;
  --chart-line-5: #7cc4f0;
  --chart-line-alt-3: #3ccf6b;
  --chart-line-alt-4: #6c7fe8;
  --chart-line-alt-5: #45d1f2;
}


/* ==========================================================================
   03. RETOQUES PONTUAIS

   O Design System resolve quase tudo por token, mas alguns lugares escrevem a
   cor direto no CSS — sempre supondo verde lime (rótulo preto por cima) ou o
   vermelho-laranja antigo de erro. São estes. Se a lista crescer numa
   atualização do upstream, o README explica como encontrá-los.
   ========================================================================== */

/* Cápsula e badge sólido fixavam rótulo preto, que funcionava sobre lime. */
.zeta-capsule { color: var(--text-on-green); }
.zeta-badge--green.zeta-badge--solid { color: var(--text-on-green); }

/* Tons suaves de erro, realinhados ao carmim destrutivo. */
.zeta-badge--danger { color: #8a1017; background: #f8dcde; }
.zeta-alert--danger { background: #f8dcde; border-color: #f8dcde; color: #8a1017; }

/* Fundos translúcidos do vermelho-laranja antigo. */
.zeta-btn--danger-outline:hover:not(:disabled),
.zeta-menu__item--danger:hover { background: rgba(163, 18, 26, 0.10); }
.zeta-input--error:focus { box-shadow: 0 0 0 4px rgba(163, 18, 26, 0.25); }

/* `.zeta-table th` veste TODO <th> como cabeçalho de coluna: caixa alta,
   espaçado e cinza. Numa linha do corpo o <th scope="row"> é o nome daquela
   linha — o dado principal dela — e sairia gritando em versalete. Aqui ele
   volta a ser texto normal, só em negrito. */
.zeta-table tbody th {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
}

/* A seta do <select> é um SVG embutido no CSS, com o cinza esverdeado antigo
   escrito dentro da URL — nenhum token a alcança. Redesenhada em cinza neutro. */
.zeta-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b7e82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Ícone do modal no tema escuro trazia um lime translúcido cravado. */
[data-theme="dark"] .zeta-modal__icon {
  background: rgba(222, 51, 56, 0.16);
  color: var(--digitalli-red-400);
}

/* No tema escuro os tons suaves de status são claros demais para o palco
   preto: o texto escuro sobre eles fica legível, mas o bloco inteiro salta.
   Escurece o fundo e clareia o texto, mantendo a família de cada status. */
[data-theme="dark"] .zeta-alert--success { background: #12301a; border-color: #12301a; color: #7fd694; }
[data-theme="dark"] .zeta-alert--warning { background: #332611; border-color: #332611; color: #f0c264; }
[data-theme="dark"] .zeta-alert--danger  { background: #34100f; border-color: #34100f; color: #f09a9e; }
[data-theme="dark"] .zeta-alert--info    { background: #10243a; border-color: #10243a; color: #85c1e9; }
[data-theme="dark"] .zeta-alert--green   { background: #34100f; border-color: #34100f; color: var(--digitalli-red-300); }

[data-theme="dark"] .zeta-badge--success { color: #7fd694; background: #12301a; }
[data-theme="dark"] .zeta-badge--warning { color: #f0c264; background: #332611; }
[data-theme="dark"] .zeta-badge--danger  { color: #f09a9e; background: #34100f; }
[data-theme="dark"] .zeta-badge--info    { color: #85c1e9; background: #10243a; }
[data-theme="dark"] .zeta-badge--green   { color: var(--digitalli-red-300); background: #34100f; }
[data-theme="dark"] .zeta-tag--selected  { color: var(--digitalli-red-300); background: #34100f; }


/* ==========================================================================
   04. LOGO DA DIGITALLI

   A logo existe em duas tintas — branca para superfícies escuras, escura para
   superfícies claras — e `<img src>` não se troca por CSS. Então as duas vão
   no HTML e o tema escolhe qual aparece:

     <a class="dgt-logo" href="/app/">
       <img class="dgt-logo__img dgt-logo__img--claro"  src="…/logo-digitalli-positivo.png" alt="Digitalli">
       <img class="dgt-logo__img dgt-logo__img--escuro" src="…/logo-digitalli-negativo.png" alt="" aria-hidden="true">
     </a>

   Só a versão visível carrega o `alt`: as duas descreveriam a mesma marca duas
   vezes para quem usa leitor de tela.

   Sobre fundo escuro FIXO (o painel de marca do login, que é preto nos dois
   temas), não use isto — use direto o `logo-digitalli-negativo.png`.
   ========================================================================== */

.dgt-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.dgt-logo__img {
  display: block;
  height: 34px;
  width: auto;
}
.dgt-logo--sm .dgt-logo__img { height: 26px; }
.dgt-logo--lg .dgt-logo__img { height: 48px; }

.dgt-logo__img--escuro { display: none; }
[data-theme="dark"] .dgt-logo__img--claro  { display: none; }
[data-theme="dark"] .dgt-logo__img--escuro { display: block; }


/* ==========================================================================
   05. AJUSTES DE APLICAÇÃO

   Peças que o sistema da Digitalli precisa e que o Design System não traz
   prontas, porque nascem do jeito que ESTE projeto organiza as telas.
   ========================================================================== */

/* Conteúdo principal da casca (topbar + sidebar + main). */
.dgt-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-6);
}
@media (max-width: 768px) {
  .dgt-main { padding: var(--space-5) var(--space-4); }
}

/* Rótulo de grupo dentro da barra lateral (ex.: "Jigas" sobre a lista dos
   equipamentos de teste). Some na faixa horizontal do celular, onde uma
   legenda no meio dos itens só rouba largura da rolagem. */
.dgt-sidebar__label {
  margin: var(--space-4) 0 var(--space-1);
  padding-inline: 14px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .dgt-sidebar__label { display: none; }
}

/* Barra de ações acima de uma tabela ou lista: controles à esquerda, botões à
   direita, quebrando em linhas quando não couber. */
.dgt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.dgt-toolbar__spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   FORMULÁRIO RENDERIZADO PELO DJANGO

   `{{ form|crispy }}` e `{{ form.as_p }}` montam o HTML sozinhos: o projeto não
   escolhe as classes de cada campo. Escrever cada formulário à mão no markup
   do Design System resolveria a aparência e jogaria fora a validação, os
   rótulos e as mensagens de erro que o Django já entrega prontos.

   Então em vez de trocar o markup, vestimos o que ele produz: `.dgt-form-auto`
   no <form> faz os controles de dentro herdarem a aparência de `.zeta-input`,
   `.zeta-select` e `.zeta-label`. Vale tanto para o pacote crispy `bootstrap`
   (`.control-group`, `.control-label`, `.help-block`) quanto para o
   `as_p`/`as_div` do Django puro.
   -------------------------------------------------------------------------- */

.dgt-form-auto { display: flex; flex-direction: column; gap: var(--space-5); }

/* Cada campo, qualquer que seja o invólucro. */
.dgt-form-auto > p,
.dgt-form-auto > div:not(.zeta-alert),
.dgt-form-auto .control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.dgt-form-auto .controls { display: flex; flex-direction: column; gap: 6px; }

.dgt-form-auto label,
.dgt-form-auto .control-label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
}
.dgt-form-auto .asteriskField { color: var(--status-danger); margin-left: 2px; }

.dgt-form-auto input[type="text"],
.dgt-form-auto input[type="email"],
.dgt-form-auto input[type="password"],
.dgt-form-auto input[type="number"],
.dgt-form-auto input[type="search"],
.dgt-form-auto input[type="url"],
.dgt-form-auto input[type="tel"],
.dgt-form-auto input[type="date"],
.dgt-form-auto input[type="datetime-local"],
.dgt-form-auto input[type="file"],
.dgt-form-auto textarea,
.dgt-form-auto select {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--surface);
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dgt-form-auto textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 14px;
  line-height: var(--lh-normal);
  resize: vertical;
}
.dgt-form-auto input[type="file"] { height: auto; padding: 9px 14px; }
.dgt-form-auto input:focus,
.dgt-form-auto textarea:focus,
.dgt-form-auto select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.dgt-form-auto input[type="checkbox"],
.dgt-form-auto input[type="radio"] { width: auto; height: auto; accent-color: var(--accent); }
.dgt-form-auto label.checkbox { flex-direction: row; display: flex; align-items: center; gap: 8px; }

.dgt-form-auto .help-block,
.dgt-form-auto .helptext,
.dgt-form-auto .help-inline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.dgt-form-auto .help-inline strong { color: var(--status-danger); font-weight: var(--fw-bold); }

/* As regras de senha do Django vêm como <ul> dentro do texto de ajuda. */
.dgt-form-auto .help-block ul,
.dgt-form-auto .helptext ul {
  margin: 4px 0 0;
  padding-left: 1.1em;
}
.dgt-form-auto .help-block li,
.dgt-form-auto .helptext li { margin-top: 2px; }

/* Campo com erro: o crispy marca o invólucro com `.error`, o Django puro
   emite uma <ul class="errorlist"> antes do controle. */
.dgt-form-auto .control-group.error input,
.dgt-form-auto .control-group.error select,
.dgt-form-auto .control-group.error textarea { border-color: var(--status-danger); }

.dgt-form-auto .errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--status-danger);
}

/* O bloco de erros gerais do crispy (`alert alert-error`) vestido de alerta. */
.dgt-form-auto .alert-error,
.dgt-form-auto .alert-block {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid #f8dcde;
  border-left: 4px solid var(--status-danger);
  background: #f8dcde;
  color: #8a1017;
  font-size: var(--fs-body-sm);
}
.dgt-form-auto .alert-error ul { margin: 0; padding-left: var(--space-5); }
[data-theme="dark"] .dgt-form-auto .alert-error,
[data-theme="dark"] .dgt-form-auto .alert-block {
  background: #34100f;
  border-color: #34100f;
  border-left-color: var(--status-danger);
  color: #f09a9e;
}

/* Pilha vertical genérica — evita <br> e margens soltas no meio do conteúdo. */
.dgt-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.dgt-stack--sm { gap: var(--space-3); }

/* Grade de cartões de dispositivo (running, busca de logs): quantos couberem,
   sem esticar o último para ocupar a linha inteira. */
.dgt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   MODO TV

   A mesma tela do running, sem barra superior, sem barra lateral e sem
   titulo, para projetar num monitor da bancada. A classe entra no
   `.zeta-app` quando o contexto traz `modo_tv`.

   O respiro menor e proposital: num monitor visto de longe, margem larga e
   area desperdicada. O botao de saida fica no canto, por cima do conteudo,
   para nao empurrar a grade nem ocupar uma linha so para ele.
   -------------------------------------------------------------------------- */
.dgt-tv > .dgt-main { padding: var(--space-4); }

.dgt-tv__sair {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  opacity: 0.25;
  transition: opacity var(--dur-base) var(--ease-out);
}
.dgt-tv__sair:hover,
.dgt-tv__sair:focus-visible { opacity: 1; }
.dgt-cards--lg { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }

/* O aviso de "nada aqui" ocupa a grade inteira; como item normal ele caberia
   numa coluna só e ficaria espremido num canto. */
.dgt-cards > .dgt-vazio { grid-column: 1 / -1; }

/* Lista de pares rótulo/valor dentro de um cartão. */
.dgt-fields { display: flex; flex-direction: column; gap: 0; }
.dgt-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 0;
  font-size: var(--fs-body-sm);
  border-top: 1px solid var(--border);
}
.dgt-field:first-child { border-top: none; }
.dgt-field__label { color: var(--text-secondary); }
.dgt-field__value { font-weight: var(--fw-bold); text-align: right; }

/* Faixa de status no topo do cartão de dispositivo — é ela que muda de cor
   conforme a leitura do equipamento, então precisa existir em cada estado.
   A margem negativa é o padding do `.zeta-card__body` (20px) desfeito, para a
   faixa encostar nas bordas; o `overflow: hidden` do cartão arredonda o canto. */
.dgt-status-bar {
  display: block;
  padding: 10px var(--space-4);
  margin: -20px -20px var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  text-align: center;
  color: #ffffff;
  background: var(--zeta-600);
}
/* A cor da marca NÃO entra aqui. Num painel de estados, vermelho é a cor de
   quem está com problema; se "tudo certo" também fosse vermelho, o cartão em
   falha deixaria de saltar. O normal segue azul, como sempre foi neste painel. */
.dgt-status-bar--ok      { background: var(--status-success); }
.dgt-status-bar--normal  { background: var(--status-info); }
.dgt-status-bar--alerta  { background: var(--status-warning); color: #0e0f10; }
.dgt-status-bar--erro    { background: var(--status-danger); }
.dgt-status-bar--inativo { background: var(--zeta-600); }

/* Texto que destoa da leitura esperada (temperatura fora da faixa, tensão
   fora do nominal). Aplicado por JS sobre o valor. */
.dgt-fora-da-faixa { color: var(--status-danger); }

/* Modal largo — o `.zeta-modal__dialog` nasce com 440px e texto centralizado,
   medida de aviso. Uma TABELA dentro dele precisa de largura e de leitura
   alinhada à esquerda, senão cada coluna começa num lugar diferente. */
.zeta-modal__dialog--lg {
  max-width: 880px;
  text-align: left;
}
/* Descendente, nao filho direto. A tabela de logs do Mongo e injetada por JS
   dentro de `#modal-content-area`, entao `.zeta-table-wrap` nasce NETO do
   dialogo, nao filho. Com o combinador `>` a regra nunca casava: o
   `max-height` nao chegava ao elemento e a tabela crescia sem rolagem —
   1.361 linhas numa participacao comum. Medido em 14/10/2026. */
.zeta-modal__dialog--lg .zeta-table-wrap {
  max-height: 60vh;
  overflow-y: auto;
}

/* Estado vazio / carregando no meio de uma área de conteúdo. */
.dgt-vazio {
  margin: 0;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}
.dgt-vazio p { margin: 0; }

/* O atributo `hidden` precisa vencer o `display` dos componentes. Sem isto um
   `.zeta-alert[hidden]` continuaria visível: o `display: flex` da classe é
   regra de autor e passa por cima do `display: none` que o navegador aplica ao
   atributo. As telas escondem e mostram blocos por `hidden`, então a regra vale
   para o sistema inteiro. */
[hidden] { display: none !important; }

/* Impressão: a casca não vai para o papel. */
@media print {
  .zeta-topbar,
  .zeta-sidebar { display: none !important; }
  .dgt-main { padding: 0; }
}