/* Console Maestro — CSS da página. Só usa tokens da identidade (nordeste-tokens.css); nada de cor solta.
   Não há estilo inline no HTML/JS: a CSP do console bloqueia `style=`. Larguras de coluna e alturas
   de gráfico vêm de classes e de atributos SVG. */

.pular-conteudo { position: absolute; left: -9999px; top: 0; background: var(--color-surface); padding: var(--sp-2) var(--sp-3); z-index: var(--z-dropdown); }
.pular-conteudo:focus { left: var(--sp-2); top: var(--sp-2); }

/* ---------- Cabeçalho ---------- */
.marca { display: flex; align-items: center; gap: var(--sp-3); }
.marca__nome { font-size: var(--fs-seccao); font-weight: 700; color: var(--color-texto-muted); padding-left: var(--sp-3); border-left: 1px solid var(--color-borda); }
.usuario { display: flex; align-items: center; gap: var(--sp-3); }
.usuario__nome { font-weight: 600; }

/* ---------- Estrutura ---------- */
.estrutura { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); max-width: var(--largura-app); margin: 0 auto; padding: var(--sp-6); }
.menu { display: flex; flex-direction: column; gap: var(--sp-1); align-self: start; position: sticky; top: 76px; }
.menu a { display: block; padding: 10px var(--sp-3); border-radius: var(--r-sm); color: var(--color-texto); text-decoration: none; font-weight: 600; }
.menu a:hover { background: var(--color-surface); }
.menu a[aria-current="page"] { background: var(--color-marca-suave); color: var(--color-marca); }
.menu a[hidden] { display: none; }
.conteudo { min-width: 0; outline: none; }

.topo { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.topo h1 { margin: 0; font-size: var(--fs-titulo); font-weight: 700; }
.topo__acoes { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sub { color: var(--color-texto-muted); margin: 0 0 var(--sp-4); }
.rodape-nota { color: var(--color-texto-muted); font-size: var(--fs-mini); margin-top: var(--sp-3); }

/* ---------- Grades ---------- */
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.grade-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.kpi-sub { font-size: var(--fs-mini); color: var(--color-texto-muted); margin-top: var(--sp-1); }
.kpi-ok .nl-kpi__valor { color: var(--color-sucesso); }
.kpi-erro .nl-kpi__valor { color: var(--color-marca); }
.kpi-neutro .nl-kpi__valor { color: var(--color-texto); }

.cartao-titulo { margin: 0 0 var(--sp-3); font-size: var(--fs-seccao); font-weight: 700; }

/* ---------- Tabelas (colunas por classe, nunca inline) ---------- */
.nl-card .nl-tabela { overflow-x: auto; }
.tab-apis       { --nl-colunas: 1.4fr 2fr 1.2fr .6fr 1fr .8fr .8fr 1.2fr; min-width: 960px; }
.tab-sistemas   { --nl-colunas: 1.3fr .6fr 1.6fr .7fr .7fr .7fr .6fr 1.1fr; min-width: 900px; }
.tab-consultas  { --nl-colunas: 1.5fr 1.1fr 1.5fr .6fr .7fr .6fr 1.2fr 1fr; min-width: 960px; }
.tab-fila       { --nl-colunas: 1.5fr 1.5fr 1.4fr 1fr; }
.tab-chaves     { --nl-colunas: 1.1fr 1.1fr 1.1fr 1.6fr .6fr .8fr 1.2fr 1.5fr; min-width: 1000px; }
.tab-auditoria  { --nl-colunas: 1.5fr 1fr 1.2fr 1.3fr 1.8fr 1fr; min-width: 860px; }
.tab-usuarios   { --nl-colunas: 1.4fr .8fr .8fr 1.4fr 1.6fr; min-width: 700px; }
.tab-top        { --nl-colunas: 2fr .8fr .8fr .8fr; }
.tab-incidentes { --nl-colunas: 1.5fr 1.5fr 1fr 1fr; }
.nl-tabela__linha .acoes { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: var(--fs-pequeno); }
.nl-tabela__head.num, .nl-tabela__head .num { text-align: right; }
.btn-mini { padding: 4px 10px; font-size: var(--fs-pequeno); }
.link-linha { color: var(--color-info); font-weight: 600; text-decoration: none; }
.link-linha:hover { text-decoration: underline; }

/* ---------- Filtros ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); align-items: end; padding: var(--sp-4); }
.filtros .nl-campo { margin: 0; }
.paginacao { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-borda); color: var(--color-texto-muted); }
.paginacao__acoes { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ---------- Gráficos (SVG) ---------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico__eixo { stroke: var(--color-borda); stroke-width: 1; }
.grafico__texto { fill: var(--color-texto-muted); font-size: 11px; font-family: var(--fonte); }
.grafico__barra { fill: var(--color-info); }
.grafico__barra--erro { fill: var(--color-marca); }
.grafico__linha { fill: none; stroke: var(--color-info); stroke-width: 2; }
.grafico__ponto-ok { fill: var(--color-info); }
.grafico__ponto-falha { fill: var(--color-marca); }
.legenda { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-pequeno); color: var(--color-texto-muted); margin-top: var(--sp-2); }
.legenda__item::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--sp-1); background: var(--color-info); }
.legenda__item--erro::before { background: var(--color-marca); }

/* ---------- Chaves / modais ---------- */
.escopos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.escopos label { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 10px; border: 1px solid var(--color-borda); border-radius: var(--r-sm); background: var(--color-surface-alt); cursor: pointer; }
.chave-exibida { display: block; padding: var(--sp-3); background: var(--color-escuro); color: #fff; border-radius: var(--r-sm); word-break: break-all; user-select: all; }
.pill-linha { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.estado-pontos { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--sp-2); background: var(--color-linha-suave); }
.estado-pontos--ok { background: var(--color-sucesso); }
.estado-pontos--falha { background: var(--color-marca); }

/* ---------- Login ---------- */
.tela-login { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(400px, 100% - 2 * var(--sp-4)); text-align: center; }
.login__logo { height: 48px; margin-bottom: var(--sp-4); }
.login__titulo { margin: 0; font-size: var(--fs-titulo); }
.login__sub { color: var(--color-texto-muted); margin: var(--sp-1) 0 var(--sp-6); }
.login__card { padding: var(--sp-6); text-align: left; }
.login__botao { width: 100%; justify-content: center; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .estrutura { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .menu { flex-direction: row; flex-wrap: wrap; position: static; }
  .grade-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .usuario__nome { display: none; }
  .marca__nome { display: none; }
}