/* Supervisório - estilo inspirado em IHM de alto desempenho (ISA-101):
   fundo neutro, cor reservada para estado anormal. */
:root {
  --fundo: #dfe1e4;
  --cartao: #f2f3f5;
  --borda: #c4c8ce;
  --texto: #1f2328;
  --texto2: #5b626b;
  --eq: #b9bec5;
  --eq-borda: #6b727c;
  --linha: #7a818a;
  --destaque: #2f4a66;
  --ok: #2e7d4f;        /* em operação */
  --ok-fundo: #dcebe1;
  --alerta: #c98a00;
  --alerta-fundo: #f6e7bf;
  --critico: #c0392b;
  --critico-fundo: #f5d5d1;
  --aviso: #4a6a8a;
  --aviso-fundo: #dce4ec;
  --faixa-normal: #cfd3d8;
  --barra: #3c434c;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #1b1e22;
  --cartao: #24282d;
  --borda: #363b42;
  --texto: #e3e6ea;
  --texto2: #9aa2ac;
  --eq: #3a4048;
  --eq-borda: #8a939e;
  --linha: #77808b;
  --destaque: #8fb0d3;
  --ok: #4fae74;
  --ok-fundo: #1f3328;
  --alerta: #e0a526;
  --alerta-fundo: #3b321b;
  --critico: #e5584a;
  --critico-fundo: #43221f;
  --aviso: #8fb0d3;
  --aviso-fundo: #26313d;
  --faixa-normal: #3a4048;
  --barra: #c9ced4;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.4 var(--fonte); }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--cartao);
  border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.id { display: flex; align-items: center; gap: 12px; }
.tag { font: 600 18px var(--mono); padding: 4px 10px; border: 2px solid var(--texto); border-radius: 4px; }
.eq-desc { font-weight: 600; }
.eq-local { color: var(--texto2); font-size: 12px; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.com { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto2); }
.com i { width: 10px; height: 10px; border-radius: 50%; background: var(--texto2); }
.com.ok i { background: var(--ok); }
.com.falha { color: var(--critico); font-weight: 600; }
.com.falha i { background: var(--critico); animation: pisca 1s steps(2) infinite; }
.relogio { font: 15px var(--mono); }
.btn-txt { background: none; border: 1px solid var(--borda); border-radius: 4px; padding: 5px 10px; }
.btn-usuario { background: var(--destaque); color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; }
:root[data-tema="escuro"] .btn-usuario { color: #111; }

.banner-alarme { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; max-width: 640px;
  border: 1px solid var(--borda); border-radius: 4px; padding: 6px 10px; background: var(--cartao); text-align: left; }
.banner-alarme.critico { background: var(--critico-fundo); border-color: var(--critico); }
.banner-alarme.alerta { background: var(--alerta-fundo); border-color: var(--alerta); }
.banner-alarme.nao-rec .ba-sev { animation: pisca 1s steps(2) infinite; }
.ba-sev { min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; }
.ba-cont { margin-left: auto; color: var(--texto2); font-size: 12px; white-space: nowrap; }
#baTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* símbolos de severidade (forma + cor, legível por daltônicos) */
.sev { display: inline-grid; place-items: center; width: 22px; height: 22px; font-weight: 700; font-size: 12px; color: #fff; }
.sev.critico { background: var(--critico); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 6px; }
.sev.alerta { background: var(--alerta); transform: rotate(45deg) scale(.8); }
.sev.alerta > span { transform: rotate(-45deg); }
.sev.aviso { background: var(--aviso); border-radius: 50%; }

/* ---------- menu ---------- */
.menu { display: flex; gap: 2px; padding: 0 16px; background: var(--cartao); border-bottom: 1px solid var(--borda);
  overflow-x: auto; }
.menu button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: var(--texto2);
  white-space: nowrap; }
.menu button.ativo { color: var(--texto); border-bottom-color: var(--destaque); font-weight: 600; }
.contador { background: var(--critico); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }

main { padding: 16px; max-width: 1600px; margin: 0 auto; }
.pagina { display: none; }
.pagina.ativa { display: block; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 6px; padding: 14px; margin-bottom: 16px; }
.cartao-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto2); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- visão geral ---------- */
.grade-geral { display: grid; gap: 16px; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  grid-template-areas: "sin ctl" "med mini" "kpi kpi"; }
.grade-geral .cartao { margin: 0; }
.sinotico { grid-area: sin; } .controle { grid-area: ctl; } .medidas { grid-area: med; }
.mini-tend { grid-area: mini; } .kpis { grid-area: kpi; }
@media (max-width: 980px) {
  .grade-geral { grid-template-columns: 1fr; grid-template-areas: "ctl" "sin" "med" "mini" "kpi"; }
}
#svgSinotico { width: 100%; height: auto; display: block; }
.eq { fill: var(--eq); stroke: var(--eq-borda); stroke-width: 1.5; }
.eq.rodando { fill: var(--ok-fundo); stroke: var(--ok); stroke-width: 2.5; }
.eq.falha { fill: var(--critico-fundo); stroke: var(--critico); stroke-width: 2.5; }
.eq-det { fill: none; stroke: var(--eq-borda); stroke-width: 1.2; }
.motor-m { font: 700 22px var(--fonte); text-anchor: middle; fill: var(--texto); }
.linha { fill: none; stroke: var(--linha); stroke-width: 4; }
.linha.oleo { stroke-dasharray: 6 5; stroke-width: 2.5; }
.linha.fluxo { stroke: var(--destaque); stroke-dasharray: 12 8; animation: fluxo 1s linear infinite; }
.seta { fill: var(--linha); }
.nivel { stroke: var(--eq-borda); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rot { font-size: 13px; text-anchor: middle; fill: var(--texto2); }
.rot-peq { font-size: 11px; fill: var(--texto2); }
.val-sin { font: 600 16px var(--mono); fill: var(--texto); }
.val-sin.grande { font-size: 24px; }
.val-sin.c { text-anchor: middle; }
.val-sin.anormal { fill: var(--critico); }
.val-sin.alerta { fill: var(--alerta); }

.estado-grande { border: 2px solid var(--borda); border-radius: 6px; padding: 16px; text-align: center;
  font: 700 22px var(--fonte); letter-spacing: .04em; margin-bottom: 12px; background: var(--fundo); }
.estado-grande.carga, .estado-grande.alivio, .estado-grande.standby, .estado-grande.transicao
  { border-color: var(--ok); color: var(--ok); background: var(--ok-fundo); }
.estado-grande.falha, .estado-grande.semcom { border-color: var(--critico); color: var(--critico); background: var(--critico-fundo); }
.linha-info { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.linha-info span { color: var(--texto2); }
.linha-info b.local { color: var(--alerta); }
.botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.btn { border: 1px solid var(--borda); background: var(--fundo); border-radius: 5px; padding: 9px 14px; font-weight: 600;
  text-decoration: none; color: var(--texto); display: inline-flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.partir, .btn.parar { padding: 16px; font-size: 16px; }
.btn.partir { border: 2px solid var(--ok); color: var(--ok); }
.btn.parar { border: 2px solid var(--critico); color: var(--critico); }
.btn.partir:not(:disabled):hover { background: var(--ok-fundo); }
.btn.parar:not(:disabled):hover { background: var(--critico-fundo); }
.btn.pri { background: var(--destaque); border-color: var(--destaque); color: #fff; }
:root[data-tema="escuro"] .btn.pri { color: #111; }
.btn.peq { padding: 4px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.btn.largo { width: 100%; }
.aviso-cmd { font-size: 12px; color: var(--texto2); margin-top: 10px; min-height: 2.8em; }
.contagem { border: 2px solid var(--alerta); background: var(--alerta-fundo); border-radius: 5px; padding: 10px;
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.contagem b { font-size: 20px; font-family: var(--mono); }

/* barras analógicas (estilo ISA-101) */
.barra-var { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.barra-var:last-child { border: 0; }
.bv-nome { font-size: 13px; color: var(--texto2); }
.bv-val { font: 600 18px var(--mono); text-align: right; grid-row: span 2; align-self: center; min-width: 110px; }
.bv-val small { font-size: 12px; color: var(--texto2); font-weight: 400; }
.bv-val.alerta { color: var(--alerta); } .bv-val.critico { color: var(--critico); }
.bv-trilho { position: relative; height: 12px; background: var(--fundo); border: 1px solid var(--borda); }
.bv-normal { position: absolute; top: 0; bottom: 0; background: var(--faixa-normal); }
.bv-lim { position: absolute; top: -3px; bottom: -3px; width: 2px; }
.bv-lim.alerta { background: var(--alerta); } .bv-lim.critico { background: var(--critico); }
.bv-ponteiro { position: absolute; top: -4px; width: 0; height: 0; border-left: 6px solid transparent;
  border-right: 6px solid transparent; border-top: 9px solid var(--barra); transform: translateX(-6px); transition: left .4s; }
.bv-escala { display: flex; justify-content: space-between; font-size: 10px; color: var(--texto2); }

.mini-tend canvas { width: 100%; height: 230px; display: block; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; border-left: 3px solid var(--borda); }
.kpi span { font-size: 12px; color: var(--texto2); }
.kpi b { font: 600 20px var(--mono); }

/* ---------- tendências ---------- */
.barra-ferr { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.grupo { display: inline-flex; border: 1px solid var(--borda); border-radius: 5px; overflow: hidden; }
.grupo button { background: var(--fundo); border: 0; border-right: 1px solid var(--borda); padding: 7px 12px; }
.grupo button:last-child { border: 0; }
.grupo button.ativo { background: var(--destaque); color: #fff; }
:root[data-tema="escuro"] .grupo button.ativo { color: #111; }
.grupo-tags { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; order: 3; }
#btnCsv { margin-left: auto; }
.grupo-tags label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; user-select: none; }
.grupo-tags label i { width: 10px; height: 3px; display: inline-block; }
.grafico { margin-bottom: 8px; }
.grafico-tit { font-size: 12px; color: var(--texto2); display: flex; justify-content: space-between; }
.grafico canvas { width: 100%; height: 150px; display: block; }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 600; color: var(--texto2); border-bottom: 2px solid var(--borda); padding: 6px 8px; }
.tabela td { border-bottom: 1px solid var(--borda); padding: 6px 8px; vertical-align: middle; }
.tabela tr.critico td:first-child { box-shadow: inset 3px 0 var(--critico); }
.tabela tr.alerta td:first-child { box-shadow: inset 3px 0 var(--alerta); }
.tabela tr.nao-rec { font-weight: 600; }
.tabela .vazio { color: var(--texto2); text-align: center; padding: 20px; }
.cartao:has(.tabela) { overflow-x: auto; }
.res-OK { color: var(--texto2); } .res-BLOQUEADO, .res-NEGADO { color: var(--alerta); font-weight: 600; }
.res-FALHA { color: var(--critico); font-weight: 600; }

/* ---------- manutenção ---------- */
.manut { display: grid; grid-template-columns: 200px 1fr 170px; gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--borda); }
.manut-barra { height: 14px; background: var(--fundo); border: 1px solid var(--borda); position: relative; }
.manut-barra div { height: 100%; background: var(--barra); opacity: .55; }
.manut.proximo .manut-barra div { background: var(--alerta); opacity: 1; }
.manut.vencido .manut-barra div { background: var(--critico); opacity: 1; }
.manut-txt { font: 13px var(--mono); text-align: right; }
.manut.vencido .manut-txt { color: var(--critico); font-weight: 600; }
.manut.proximo .manut-txt { color: var(--alerta); font-weight: 600; }
@media (max-width: 640px) { .manut { grid-template-columns: 1fr; } .manut-txt { text-align: left; } }
.nota { font-size: 12px; color: var(--texto2); }

/* ---------- modais ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 10; padding: 16px; }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 20px; width: min(380px, 100%); }
.modal-caixa h3 { margin: 0 0 8px; }
.modal-caixa p { color: var(--texto2); margin: 0 0 14px; }
.modal-caixa input { width: 100%; font: 22px var(--mono); padding: 8px; letter-spacing: .3em; text-align: center;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 5px; }
.modal-bot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.erro { color: var(--critico); font-size: 13px; min-height: 1.4em; margin-top: 6px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--cartao);
  padding: 10px 18px; border-radius: 5px; z-index: 20; max-width: 90vw; }
.toast.erro-t { background: var(--critico); color: #fff; }

/* ---------- setpoints ---------- */
.sp-dir { display: inline-flex; align-items: center; gap: 8px; }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 13px; color: var(--texto2); margin-bottom: 4px; }
.modal-caixa .campo input { width: 100%; font: 20px var(--mono); padding: 8px; text-align: right; letter-spacing: 0; background: var(--fundo);
  color: var(--texto); border: 1px solid var(--borda); border-radius: 5px; }
input.num { cursor: pointer; caret-color: transparent; }
input.num.editando { outline: 2px solid var(--destaque); outline-offset: 1px; }

/* ---------- tela de acesso ---------- */
.acesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acesso[hidden] { display: none !important; }
.acesso-caixa { width: min(400px, 100%); background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 24px; }
.acesso-topo { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--borda); }
.acesso h2 { font-size: 18px; margin: 12px 0 14px; }
.campo input:not(.num), .campo select { width: 100%; font: 15px var(--fonte); padding: 9px 10px; background: var(--fundo);
  color: var(--texto); border: 1px solid var(--borda); border-radius: 5px; }
.campo input.num { width: 100%; font: 18px var(--mono); padding: 8px 10px; background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 5px; letter-spacing: .15em; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
.acesso .btn.largo { margin-top: 6px; padding: 11px; }
.acesso-origem { margin: 14px 0 0; text-align: center; }

/* origem do acesso no topo */
.origem { font-size: 11px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--borda); color: var(--texto2); white-space: nowrap; }
.origem.internet { border-color: var(--aviso); color: var(--aviso); }

/* ---------- usuários / conta ---------- */
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; align-items: end; }
.grade-form-bot { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; grid-column: 1 / -1; }
.tabela select { font: 13px var(--fonte); padding: 4px; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 4px; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag-ok { color: var(--ok); font-weight: 600; } .tag-nao { color: var(--texto2); }
.grade-conta { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grade-conta .cartao { margin: 0; }
.passos { padding-left: 18px; margin: 0 0 10px; color: var(--texto2); font-size: 13px; }
.qr { background: #fff; width: max-content; padding: 4px; border-radius: 4px; margin: 6px 0; }
.qr svg { display: block; width: 190px; height: 190px; }
code { font: 13px var(--mono); background: var(--fundo); padding: 2px 6px; border-radius: 3px; word-break: break-all; }
.estado-2fa { padding: 10px 12px; border-radius: 5px; border: 1px solid var(--borda); margin-bottom: 12px; font-size: 14px; }
.estado-2fa.ativo { border-color: var(--ok); background: var(--ok-fundo); }

/* ---------- teclado virtual ---------- */
.teclado { position: fixed; z-index: 30; width: 272px; background: var(--cartao); border: 1px solid var(--eq-borda);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); user-select: none; touch-action: none; }
.tec-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; cursor: move;
  border-bottom: 1px solid var(--borda); font-size: 13px; color: var(--texto2); }
.tec-x { background: none; border: 0; font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 4px; color: var(--texto2); }
.tec-x:hover { background: var(--fundo); }
.tec-visor { margin: 10px 12px 2px; padding: 8px 10px; min-height: 46px; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 5px; font: 600 24px var(--mono); text-align: right; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px;
  overflow: hidden; }
.tec-visor small { font-size: 13px; font-weight: 400; color: var(--texto2); }
.tec-faixa { margin: 0 12px; min-height: 18px; font-size: 11px; color: var(--texto2); text-align: right; }
.tec-faixa.fora { color: var(--critico); font-weight: 600; }
.tec-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px 12px; }
.tec-grade button { height: 52px; font: 600 20px var(--fonte); background: var(--fundo); border: 1px solid var(--borda); border-radius: 5px; }
.tec-grade button:active { background: var(--faixa-normal); }
.tec-grade button:disabled { opacity: .3; }
.tec-grade .tec-f { font-size: 18px; color: var(--texto2); }
.tec-grade .tec-ok { grid-row: span 2; height: auto; background: var(--destaque); border-color: var(--destaque); color: #fff; }
:root[data-tema="escuro"] .tec-grade .tec-ok { color: #111; }
@media (max-width: 520px) {
  .teclado { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 10px 10px 0 0; }
  .tec-cab { cursor: default; }
}

@keyframes pisca { 50% { opacity: .25; } }
@keyframes fluxo { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (max-width: 640px) { .topo-dir { margin-left: 0; width: 100%; justify-content: space-between; } }