/*
 * Monitoramento das Usinas - dashboard
 *
 * A linguagem visual segue o EngeSEP SUPERSEP, para que este sistema pareca
 * parte da mesma familia e nao um corpo estranho: mesma paleta, mesma estrutura
 * de cartao (cabecalho, bloco de destaque, gauge + tabela, rodape de estado),
 * labels em maiusculas e numeros em fonte monoespaçada.
 *
 * Regra de cor herdada do supervisorio: a BORDA do cartao carrega a severidade.
 * Ciano = normal, ambar = atencao, vermelho = critico, cinza = sem contato.
 * Quem olha de longe le o estado da usina pela cor da moldura, sem ler texto.
 *
 * Verde, ambar e vermelho nunca sao usados como enfeite -- so significam estado.
 */

:root {
  /* Superficies */
  --bg: #070b11;
  --bg-topo: #0a1017;
  --bg-cartao: #0c141e;
  --bg-bloco: #0d1822;
  --bg-sutil: #121d29;

  /* Bordas */
  --borda: #1a2635;
  --borda-forte: #24303f;

  /* Texto */
  --txt: #e6edf5;
  --txt-suave: #8496a9;
  --txt-label: #64768a;
  --txt-fraco: #4a5a6b;

  /* Estados */
  --ciano: #22d3ee;
  --ciano-fraco: rgba(34, 211, 238, .12);
  --verde: #22c55e;
  --verde-fraco: rgba(34, 197, 94, .12);
  --ambar: #f59e0b;
  --ambar-fraco: rgba(245, 158, 11, .12);
  --vermelho: #ef4444;
  --vermelho-fraco: rgba(239, 68, 68, .1);

  --raio: 10px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code",
          "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* =========================================================================
   TOPO
   ========================================================================= */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
  background: var(--bg-topo);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.marca-raio {
  color: var(--ciano);
  font-size: 18px;
  line-height: 1;
}

.marca-nome {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.marca-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-label);
  letter-spacing: .08em;
}

.marca-versao {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ciano);
  background: var(--ciano-fraco);
  border: 1px solid rgba(34, 211, 238, .25);
  padding: 1px 6px;
  border-radius: 4px;
}

.topo-titulo {
  font-size: 15px;
  font-weight: 650;
  flex: 1;
  text-align: center;
}

.topo-dir {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.indicador {
  text-align: right;
  line-height: 1.25;
}

.indicador-rotulo {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--txt-label);
  text-transform: uppercase;
}

.indicador-valor {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ciano);
}

.indicador-valor.alerta { color: var(--ambar); }
.indicador-valor.ruim { color: var(--vermelho); }

.selo-topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.selo-topo.ok { color: var(--verde); border-color: rgba(34, 197, 94, .35); background: var(--verde-fraco); }
.selo-topo.alerta { color: var(--ambar); border-color: rgba(245, 158, 11, .35); background: var(--ambar-fraco); }
.selo-topo.ruim { color: var(--vermelho); border-color: rgba(239, 68, 68, .35); background: var(--vermelho-fraco); }

.ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Pulsa so quando ha problema: movimento chama o olho, entao e reservado
   para o que exige acao. */
.ponto.pulsa { animation: pulsa 2s ease-in-out infinite; }

@keyframes pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

select, .botao {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--bg-cartao);
  color: var(--txt);
  cursor: pointer;
}

select:hover, .botao:hover { border-color: var(--ciano); color: var(--ciano); }
.botao:active { transform: translateY(1px); }

.atualizado {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-fraco);
}

.atualizado.erro { color: var(--vermelho); font-weight: 600; }

/* =========================================================================
   ESTRUTURA
   ========================================================================= */

main { padding: 16px; max-width: 1900px; margin: 0 auto; }

.secao { margin-bottom: 18px; }

.secao-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--txt-label);
  margin: 0 0 10px 2px;
}

.vazio {
  padding: 40px;
  text-align: center;
  color: var(--txt-fraco);
  font-size: 13px;
}

/* =========================================================================
   ALERTAS
   ========================================================================= */

.alertas { display: flex; flex-direction: column; gap: 6px; }

/* O componente se chama "faixa-alerta", nao "alerta", de proposito: a palavra
   "alerta" ja e usada como MODIFICADOR de estado (.bloco-valor.alerta,
   .metrica-valor.alerta, .selo-alarme.alerta). Um seletor .alerta casaria com
   os dois e aplicaria display:flex e borda nos valores em ambar dentro dos
   cartoes, quebrando o layout. Componente e modificador nunca compartilham nome. */
.faixa-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-cartao);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--txt-fraco);
  border-radius: var(--raio);
  padding: 9px 14px;
}

.faixa-alerta.sev-critico { border-left-color: var(--vermelho); background: linear-gradient(90deg, var(--vermelho-fraco), var(--bg-cartao) 40%); }
.faixa-alerta.sev-aviso { border-left-color: var(--ambar); background: linear-gradient(90deg, var(--ambar-fraco), var(--bg-cartao) 40%); }
.faixa-alerta.sev-info { border-left-color: var(--ciano); }

.alerta-corpo { flex: 1; min-width: 0; }

.alerta-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.alerta-sev {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
}

.faixa-alerta.sev-critico .alerta-sev { color: var(--vermelho); border-color: rgba(239, 68, 68, .4); background: var(--vermelho-fraco); }
.faixa-alerta.sev-aviso .alerta-sev { color: var(--ambar); border-color: rgba(245, 158, 11, .4); background: var(--ambar-fraco); }
.faixa-alerta.sev-info .alerta-sev { color: var(--ciano); border-color: rgba(34, 211, 238, .4); background: var(--ciano-fraco); }

.alerta-resumo { font-weight: 600; font-size: 13px; }
.alerta-tempo { font-family: var(--mono); font-size: 11px; color: var(--txt-suave); margin-left: auto; }
.alerta-detalhe { font-size: 12px; color: var(--txt-suave); margin-top: 3px; }

/* =========================================================================
   CARTOES DE PC
   ========================================================================= */

.grade-pcs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 14px;
}

.cartao {
  background: var(--bg-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* A borda e o codigo de estado, como no supervisorio. */
.cartao.est-ok { border-color: rgba(34, 211, 238, .3); }
.cartao.est-alerta { border-color: var(--ambar); }
.cartao.est-critico { border-color: var(--vermelho); }
.cartao.est-sem-contato { border-color: var(--borda); }

.cartao.est-sem-contato .cartao-titulo { color: var(--txt-suave); }

/* --- Cabecalho --- */

.cartao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cartao-ident { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cartao-titulo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.etiqueta-pc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ciano);
  background: var(--ciano-fraco);
  border: 1px solid rgba(34, 211, 238, .3);
  padding: 2px 8px;
  border-radius: 5px;
}

.selo-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.selo-estado.ok { color: var(--verde); border-color: rgba(34, 197, 94, .3); background: var(--verde-fraco); }
.selo-estado.ruim { color: var(--vermelho); border-color: rgba(239, 68, 68, .3); background: var(--vermelho-fraco); }
.selo-estado.neutro { color: var(--txt-suave); border-color: var(--borda-forte); }

.etiqueta-visto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--txt-label);
  border: 1px solid var(--borda);
  border-radius: 5px;
  padding: 2px 8px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.etiqueta-visto b { color: var(--txt-suave); font-weight: 600; }

/* --- Bloco de destaque (equivale a MONTANTE/JUSANTE do supervisorio) --- */

.bloco {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--bg-bloco);
  border: 1px solid var(--borda-forte);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 12px;
}

.bloco-item { min-width: 0; }

.bloco-rotulo {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--txt-label);
  text-transform: uppercase;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bloco-valor {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.bloco-valor .un {
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-label);
  margin-left: 1px;
}

.bloco-valor.ok { color: var(--txt); }
.bloco-valor.alerta { color: var(--ambar); }
.bloco-valor.ruim { color: var(--vermelho); }
.bloco-valor.vazio { color: var(--txt-fraco); }

/* --- Corpo: gauge + tabela --- */

.cartao-corpo {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: center;
  flex: 1;
}

.gauge-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-caixa svg { display: block; width: 100%; height: auto; }

.gauge-valor {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-top: -18px;
}

.gauge-valor .un { font-size: 12px; font-weight: 500; color: var(--txt-label); }
.gauge-legenda {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--txt-label);
  text-transform: uppercase;
  margin-top: 1px;
}

.metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
}

.metrica {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}

.metrica-nome { color: var(--txt-suave); white-space: nowrap; }

.metrica-valor {
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.metrica-valor .un { font-size: 10px; font-weight: 500; color: var(--txt-label); margin-left: 1px; }
.metrica-valor.ok { color: var(--verde); }
.metrica-valor.alerta { color: var(--ambar); }
.metrica-valor.ruim { color: var(--vermelho); }
.metrica-valor.vazio { color: var(--txt-fraco); }

/* --- Mensagem de PC sem contato --- */

.sem-contato-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--txt-fraco);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.sem-contato-msg strong { color: var(--vermelho); font-family: var(--mono); }
.sem-contato-dica { font-size: 11px; color: var(--txt-fraco); max-width: 320px; }

/* --- Rodape do cartao --- */

.cartao-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}

.selo-alarme {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid;
}

.selo-alarme.ok { color: var(--verde); border-color: rgba(34, 197, 94, .3); background: var(--verde-fraco); }
.selo-alarme.alerta { color: var(--ambar); border-color: rgba(245, 158, 11, .35); background: var(--ambar-fraco); }
.selo-alarme.ruim { color: var(--vermelho); border-color: rgba(239, 68, 68, .35); background: var(--vermelho-fraco); }
.selo-alarme.neutro { color: var(--txt-fraco); border-color: var(--borda); }

.link-painel {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ciano);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.link-painel:hover { text-decoration: underline; }

/* =========================================================================
   TABELA DE CLPs
   ========================================================================= */

.tabela-caixa {
  background: var(--bg-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow-x: auto;
}

.tabela { width: 100%; border-collapse: collapse; }

.tabela th {
  text-align: left;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--txt-label);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  background: var(--bg-bloco);
}

.tabela th.num { text-align: right; }
.tabela td { padding: 8px 12px; border-bottom: 1px solid var(--borda); font-size: 13px; }
.tabela td.num { text-align: right; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--bg-sutil); }
.tabela tr.ruim { background: var(--vermelho-fraco); }
.tabela tr.ruim:hover { background: rgba(239, 68, 68, .16); }

.causa {
  font-size: 12px;
  font-weight: 600;
  cursor: help;
  border-bottom: 1px dotted currentColor;
}

.causa.ok { color: var(--verde); border: none; font-weight: 500; }
.causa.alerta { color: var(--ambar); }
.causa.ruim { color: var(--vermelho); }

/* =========================================================================
   GRAFICOS
   ========================================================================= */

.grade-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.grafico-caixa {
  margin: 0;
  background: var(--bg-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
}

.grafico-caixa figcaption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-label);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dica {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  color: var(--txt-fraco);
  font-size: 9px;
  cursor: help;
  letter-spacing: 0;
}

canvas { width: 100%; display: block; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--txt-suave);
  min-height: 17px;
  align-items: center;
  font-family: var(--mono);
}

.legenda-item { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.legenda-item strong { color: var(--txt); }
.legenda-cor { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.legenda-hora {
  font-weight: 700;
  color: var(--ciano);
  margin-right: 2px;
  padding-right: 10px;
  border-right: 1px solid var(--borda-forte);
}

/* =========================================================================
   RODAPE
   ========================================================================= */

.rodape {
  padding: 14px 20px;
  text-align: center;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--txt-fraco);
  border-top: 1px solid var(--borda);
  margin-top: 16px;
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 900px) {
  .topo { flex-wrap: wrap; }
  .topo-titulo { order: 3; width: 100%; text-align: left; }
  .grade-pcs { grid-template-columns: 1fr; }
  .grade-graficos { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  main { padding: 10px; }
  .cartao-corpo { grid-template-columns: 1fr; }
  .gauge-caixa { max-width: 160px; margin: 0 auto; }
  .bloco { grid-template-columns: repeat(2, 1fr); gap: 8px 4px; }
  .metricas { grid-template-columns: 1fr; }
}