/* DataHub Monitor — identidade Datanexun, alinhada ao suporte. */
:root{
  --navy:#0e2e4d; --navy-2:#164e7d; --navy-3:#0a2338;
  --fundo:#f5f7fa; --painel:#ffffff; --painel-2:#f0f3f7; --borda:#dfe5ec;
  --texto:#1b2b3a; --suave:#5b6b7c; --fraco:#8b98a6;
  --azul:#164e7d; --verde:#1a7f4b; --amarelo:#b7791f; --vermelho:#c0392b; --roxo:#7c3aed;
  --verde-fundo:#e8f6ee; --amarelo-fundo:#fdf4e3; --vermelho-fundo:#fdecea;
  --azul-fundo:#e8f0f8; --roxo-fundo:#f1e9fd;
  --raio:8px;
  --sombra:0 1px 2px rgba(16,38,60,.06), 0 1px 3px rgba(16,38,60,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--fundo);color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-2);text-decoration:none}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:center;gap:26px;
  padding:0 22px;height:56px;
  background:var(--navy);box-shadow:0 1px 4px rgba(10,35,56,.18);
  position:sticky;top:0;z-index:50;
}
.marca{display:flex;align-items:center;gap:9px;color:#fff}
.marca img{height:24px;display:block}
.marca .divisor{
  border-left:1px solid rgba(255,255,255,.32);padding-left:10px;margin-left:2px;
  font-weight:600;font-size:15px;letter-spacing:-.2px;
}
.topo nav{display:flex;gap:2px;flex:1}
.topo nav a{
  padding:7px 12px;border-radius:6px;color:rgba(255,255,255,.78);font-size:14px;
  transition:background .15s,color .15s;white-space:nowrap;
}
.topo nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.topo nav a.ativo{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
.direita{display:flex;align-items:center;gap:14px}
.atualizado{color:rgba(255,255,255,.6);font-size:12px;font-variant-numeric:tabular-nums}
.operador{color:rgba(255,255,255,.9);font-size:13px;font-weight:500;padding-left:12px;border-left:1px solid rgba(255,255,255,.25)}
.sair{color:rgba(255,255,255,.78);font-size:13px}
.sair:hover{color:#fff}

main{max-width:1420px;margin:0 auto;padding:24px 22px 60px}

/* ---------- estrutura ---------- */
h1{font-size:22px;font-weight:600;letter-spacing:-.3px;margin-bottom:4px;color:var(--navy)}
h2{font-size:15px;font-weight:600;margin-bottom:0;color:var(--navy)}
.legenda{color:var(--suave);font-size:13.5px;margin-bottom:22px;max-width:900px}
.secao{margin-bottom:22px}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:22px}
.cartao{
  background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:15px 17px;box-shadow:var(--sombra);
}
.cartao .rotulo{color:var(--suave);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:7px}
.cartao .valor{font-size:27px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--navy)}
.cartao .nota{color:var(--fraco);font-size:12px;margin-top:4px}
.cartao.alerta{border-left:3px solid var(--vermelho)}
.cartao.alerta .valor{color:var(--vermelho)}
.cartao.atencao{border-left:3px solid var(--amarelo)}
.cartao.atencao .valor{color:var(--amarelo)}
.cartao.bom{border-left:3px solid var(--verde)}
.cartao.bom .valor{color:var(--verde)}

.bloco{
  background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra);
}
.bloco > header{
  padding:12px 17px;border-bottom:1px solid var(--borda);background:var(--painel-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.bloco .corpo{padding:17px}
.colunas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){.colunas{grid-template-columns:1fr}}

/* ---------- tabelas ---------- */
.rolagem{overflow-x:auto}

/* Área de dados com altura limitada: rola nos dois eixos e mantém o
   cabeçalho visível. Sem altura fixa o sticky não tem contra o que grudar. */
.rolagem-limitada{overflow:auto;max-height:440px;position:relative}
.rolagem-limitada th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--borda)}

/* Cabeçalho clicável para ordenar */
th.ordenavel{cursor:pointer;user-select:none;padding-right:22px;position:sticky}
th.ordenavel:hover{color:var(--navy-2);background:var(--painel-2)}
th.ordenavel::after{
  content:"⇅";position:absolute;right:7px;opacity:.32;font-size:11px;font-weight:400;
}
th.ordenavel.asc::after{content:"↑";opacity:1;color:var(--navy-2)}
th.ordenavel.desc::after{content:"↓";opacity:1;color:var(--navy-2)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:9px 13px;color:var(--suave);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--borda);
  white-space:nowrap;background:var(--painel);position:sticky;top:0;
}
td{padding:9px 13px;border-bottom:1px solid #eef2f6;vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.msg{max-width:460px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.arquivo{color:var(--suave);word-break:break-all}

/* ---------- etiquetas ---------- */
.tag{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;white-space:nowrap;
}
.tag.ok{background:var(--verde-fundo);color:var(--verde)}
.tag.erro{background:var(--vermelho-fundo);color:var(--vermelho)}
.tag.alerta{background:var(--amarelo-fundo);color:var(--amarelo)}
.tag.neutra{background:var(--painel-2);color:var(--suave)}
.tag.info{background:var(--azul-fundo);color:var(--navy-2)}
.tag.novo{background:var(--roxo-fundo);color:var(--roxo)}

/* ---------- gráfico ---------- */
.barras{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}
.barra{flex:1;background:var(--navy-2);border-radius:3px 3px 0 0;min-height:2px;position:relative;transition:opacity .15s}
.barra:hover{opacity:.7}
.barra.pico{background:var(--vermelho)}
.barra .dica{
  display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--navy-3);color:#fff;padding:5px 9px;border-radius:5px;font-size:11.5px;
  white-space:nowrap;margin-bottom:6px;z-index:10;
}
.barra:hover .dica{display:block}
.eixo{display:flex;justify-content:space-between;color:var(--fraco);font-size:11px;margin-top:7px}

/* ---------- ranking ---------- */
.lista{display:flex;flex-direction:column;gap:9px}
.item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.item .nome{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .qtd{font-variant-numeric:tabular-nums;color:var(--suave);font-size:13px;font-weight:600}
.trilho{grid-column:1/-1;height:5px;background:var(--painel-2);border-radius:3px;overflow:hidden}
.preenchimento{height:100%;background:var(--navy-2);border-radius:3px}

/* ---------- formulários ---------- */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=password],input[type=search],select{
  background:#fff;border:1px solid var(--borda);color:var(--texto);
  padding:8px 11px;border-radius:6px;font-size:13.5px;font-family:inherit;
}
input:focus,select:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(22,78,125,.12)}
button,.botao{
  background:var(--navy);color:#fff;border:none;padding:8px 16px;border-radius:6px;
  font-size:13.5px;font-family:inherit;cursor:pointer;font-weight:500;
}
button:hover,.botao:hover{background:var(--navy-2)}
button.discreto{background:#fff;color:var(--navy);border:1px solid var(--borda)}
button.discreto:hover{background:var(--painel-2)}

/* ---------- login ---------- */
.login{max-width:360px;margin:12vh auto;padding:0 20px}
.login .cartao-login{
  background:var(--painel);border:1px solid var(--borda);border-radius:12px;
  padding:32px 30px;box-shadow:0 4px 16px rgba(16,38,60,.08);text-align:center;
}
.login .logo-topo{background:var(--navy);border-radius:10px;padding:16px 20px;margin-bottom:22px}
.login .logo-topo img{height:28px;display:block;margin:0 auto}
.login h1{font-size:19px;margin-bottom:5px}
.login p{color:var(--suave);font-size:13.5px;margin-bottom:24px}
.login form{display:flex;flex-direction:column;gap:11px;text-align:left}
.login input{width:100%}
.login button{margin-top:6px;padding:10px}
.login .dica-login{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--borda);
  color:var(--fraco);font-size:12.5px;
}

/* ---------- janela de confirmação ---------- */
.janela-fundo{
  position:fixed;inset:0;background:rgba(10,35,56,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.janela-fundo[hidden]{display:none}
.janela{
  background:var(--painel);border-radius:12px;width:100%;max-width:520px;
  box-shadow:0 12px 40px rgba(10,35,56,.28);overflow:hidden;
}
.janela > header{
  background:var(--navy);color:#fff;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
.janela > header h2{color:#fff;margin:0;font-size:15px}
.janela .fechar{
  background:transparent;border:none;color:rgba(255,255,255,.75);
  font-size:24px;line-height:1;cursor:pointer;padding:0 4px;
}
.janela .fechar:hover{color:#fff;background:transparent}
.janela-corpo{padding:18px}
.janela-alvo{font-size:14px;margin-bottom:14px;line-height:1.7}
.janela > footer{
  padding:13px 18px;border-top:1px solid var(--borda);background:var(--painel-2);
  display:flex;justify-content:flex-end;gap:9px;
}
.campo{display:block;margin-bottom:13px}
.campo > span{
  display:block;font-size:12.5px;color:var(--suave);margin-bottom:5px;font-weight:600;
}
.campo input{width:100%}
.campo .opcional{font-weight:400;color:var(--fraco);text-transform:none}
.campo .obrigatorio{color:var(--vermelho)}
.caixa{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13px;cursor:pointer}
.caixa input{width:auto;margin:0}
.nota-fina{font-size:12px;color:var(--suave);margin-top:7px;line-height:1.5}

button.promover{padding:5px 12px;font-size:12.5px}
button:disabled{opacity:.6;cursor:default}

/* ---------- avisos ---------- */
.aviso{padding:11px 15px;border-radius:7px;margin-bottom:16px;font-size:13.5px}
.aviso.erro{background:var(--vermelho-fundo);border:1px solid #f5c6c2;color:#8c2820}
.aviso.info{background:var(--azul-fundo);border:1px solid #c5d9ec;color:var(--navy)}
.aviso.atencao{background:var(--amarelo-fundo);border:1px solid #f0dcb4;color:#8a5a12}

.vazio{color:var(--fraco);text-align:center;padding:34px 16px;font-size:13.5px}
.carregando{color:var(--fraco);text-align:center;padding:34px 16px;font-size:13.5px}
.pisca{animation:pisca 1.3s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:.4}50%{opacity:.9}}

/* ---------- lista de permissões ---------- */
.permissoes{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.permissoes .caixa{align-items:flex-start;line-height:1.45}
.permissoes .caixa input{margin-top:3px}
.permissoes .caixa input:disabled + span{opacity:.65}
.permissoes .tag{margin-right:5px}
.campo[hidden]{display:none}

/* Campo de reconfirmação destacado: é onde mais se erra, por confundir
   com o campo de senha do usuário que está sendo criado. */
.destaque-confirmacao{
  background:var(--azul-fundo);border:1px solid #c5d9ec;border-radius:7px;
  padding:12px 13px;margin-top:4px;
}
.destaque-confirmacao > span:first-child{color:var(--navy)}