/* Componentes — usa as variáveis de tokens.css (prefixo --nger-). */

.nger-btn {
  display: inline-flex; align-items: center; gap: var(--nger-space-2);
  height: 40px; padding: 0 var(--nger-space-4);
  border: 1px solid transparent; border-radius: var(--nger-radius-md);
  font: 600 13px/18px var(--nger-font-sans); cursor: pointer; text-decoration: none;
}
.nger-btn:focus-visible { outline: 2px solid var(--nger-focus-ring); outline-offset: 2px; }
.nger-btn--primario   { background: var(--nger-brand); color: var(--nger-on-brand); }
.nger-btn--secundario { background: var(--nger-surface-raised); color: var(--nger-ink); border-color: var(--nger-line-strong); }
.nger-btn--discreto   { background: transparent; color: var(--nger-brand-strong); }

/* Selo de estado: <span class="nger-selo nger-selo--online"><i></i>Online</span> */
.nger-selo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px 0 7px; border-radius: var(--nger-radius-full);
  font: 500 12px/16px var(--nger-font-sans); white-space: nowrap;
}
.nger-selo > i { width: 8px; height: 8px; border-radius: var(--nger-radius-full); display: block; }
.nger-selo--online  { background: var(--nger-ok-soft); color: var(--nger-ok-text); }  .nger-selo--online > i  { background: var(--nger-ok); }
.nger-selo--atencao { background: var(--nger-warn-soft); color: var(--nger-warn-text); }  .nger-selo--atencao > i { background: var(--nger-warn); }
.nger-selo--offline { background: var(--nger-down-soft); color: var(--nger-down); }   .nger-selo--offline > i { background: var(--nger-down); }
.nger-selo--neutro  { background: var(--nger-surface-sunken); color: var(--nger-ink-muted); }  .nger-selo--neutro > i  { background: var(--nger-line-strong); }

/* Cartão */
.nger-card {
  background: var(--nger-surface-raised); color: var(--nger-ink);
  border: 1px solid var(--nger-line); border-radius: var(--nger-radius-md);
  padding: var(--nger-space-6); box-sizing: border-box;
}

/* Barra de uso: <div class="nger-barra"><b style="width:48%"></b></div> (+ nger-barra--atencao) */
.nger-barra { height: 6px; background: var(--nger-surface-sunken); border-radius: var(--nger-radius-full); overflow: hidden; }
.nger-barra > b { display: block; height: 100%; border-radius: inherit; background: var(--nger-ok); }
.nger-barra--atencao > b { background: var(--nger-warn); }

.nger-dado { font-family: var(--nger-font-mono); font-variant-numeric: tabular-nums; }
.nger-muted { color: var(--nger-ink-muted); }

/* Cartão de dispositivo offline: faixa vermelha no topo */
.nger-card--offline { position: relative; overflow: hidden; }
.nger-card--offline::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nger-down); }

/* Número-resumo do painel */
.nger-metrica__rotulo { font: 500 13px/18px var(--nger-font-sans); color: var(--nger-ink-muted); }
.nger-metrica__valor  { font: 600 48px/52px var(--nger-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: var(--nger-space-2) 0 var(--nger-space-1); }
.nger-metrica__valor small { font-size: 20px; color: var(--nger-ink-muted); letter-spacing: 0; }
.nger-metrica__valor--critico { color: var(--nger-down); }

/* Gráfico de tráfego: use estas cores nas séries */
.nger-serie-entrada { stroke: var(--nger-brand); }
.nger-serie-saida   { stroke: var(--nger-chart-out); }