/* ============================================================
   SCADA / SUPERVISÓRIO — styles
   Tema escuro #0f172a · cores de supervisório
   ============================================================ */

:root{
  --bg:#0f172a;
  --bg-2:#111c33;
  --panel:#152238;
  --panel-2:#1a2a45;
  --line:#25374f;
  --line-2:#31445f;
  --txt:#dbe4f0;
  --muted:#8496ae;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#f59e0b;
  --grey:#64748b;
  --blue:#38bdf8;
  --accent:#38bdf8;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(56,189,248,.3)}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0c1526}
::-webkit-scrollbar-thumb{background:#263852;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#33496a}

/* ============ BARRA SUPERIOR ============ */
.topbar{position:fixed;inset:0 0 auto;height:62px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;background:linear-gradient(180deg,#12203a,#0e1830);border-bottom:1px solid var(--line)}
.topbar__left{display:flex;align-items:center;gap:12px}
.topbar__logo{width:34px;height:34px;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5e9,#2563eb);border-radius:8px;color:#fff;font-size:1.1rem}
.topbar__plant b{display:block;font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;color:#fff}
.topbar__plant small{color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.topbar__center{text-align:center}
.clock{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1.1}
.clock__date{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topbar__right{display:flex;align-items:center;gap:14px}
.comm{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--green);border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.1);padding:6px 12px;border-radius:99px}
.comm__dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.8s infinite}
.comm.off{color:var(--red);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}
.comm.off .comm__dot{background:var(--red);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.op{font-size:.8rem;color:var(--muted)}
.op b{color:var(--txt)}
.simBtn{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.4);color:var(--blue);font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;padding:7px 13px;border-radius:7px;transition:.2s}
.simBtn:hover{background:rgba(56,189,248,.22)}
.simBtn.on{background:var(--blue);color:#062033;border-color:var(--blue)}

/* ============ SHELL ============ */
.shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh;padding-top:62px}

/* ============ LATERAL ============ */
.side{position:fixed;top:62px;bottom:0;left:0;width:246px;background:var(--bg-2);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;z-index:40}
.side__nav{display:grid;gap:6px}
.side__nav button{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:1px solid transparent;color:var(--muted);font-size:.9rem;font-weight:500;padding:11px 13px;border-radius:9px;text-align:left;transition:.2s}
.side__nav button i{font-style:normal;width:18px;text-align:center;opacity:.85}
.side__nav button:hover{background:var(--panel);color:var(--txt)}
.side__nav button.on{background:linear-gradient(90deg,rgba(56,189,248,.18),transparent);border-color:rgba(56,189,248,.35);color:#fff}
.badge{margin-left:auto;background:var(--red);color:#fff;font-family:var(--mono);font-size:.68rem;min-width:21px;height:19px;display:grid;place-items:center;border-radius:99px;padding:0 6px}
.badge:empty,.badge[data-n="0"]{display:none}

.side__info{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px 0}
.side__info div{display:flex;justify-content:space-between;padding:7px 13px;font-size:.8rem;border-bottom:1px dashed rgba(255,255,255,.06)}
.side__info div:last-child{border-bottom:0}
.side__info span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
.side__info b{font-family:var(--mono);color:var(--blue)}

.interlock{margin-top:auto;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.35);border-radius:11px;padding:13px}
.interlock b{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--yellow);margin-bottom:7px}
.interlock p{font-size:.76rem;color:#c4b79c;line-height:1.55}
.interlock strong{color:#fff}
.interlock__st{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--green)}
.interlock__st.bad{color:var(--red)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.interlock__st.bad .dot{background:var(--red)}

/* ============ PRINCIPAL ============ */
.main{grid-column:2;padding:20px;display:grid;gap:18px;align-content:start;position:relative}
.view{display:none;gap:18px}
.view.on{display:grid;gap:18px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 17px;position:relative;overflow:hidden;opacity:0;transform:translateY(16px);animation:kpiIn .55s cubic-bezier(.2,.8,.3,1) forwards}
.kpi:nth-child(1){animation-delay:.02s}.kpi:nth-child(2){animation-delay:.1s}
.kpi:nth-child(3){animation-delay:.18s}.kpi:nth-child(4){animation-delay:.26s}
@keyframes kpiIn{to{opacity:1;transform:none}}
.kpi__lbl{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kpi__val{display:block;font-family:var(--mono);font-weight:700;font-size:2.1rem;color:#fff;margin:8px 0 3px;font-variant-numeric:tabular-nums;line-height:1}
.kpi__val--acc{color:var(--yellow)}
.kpi__unit{display:block;font-size:.72rem;color:var(--muted)}
.kpi__bar{height:5px;background:#0d1729;border-radius:99px;margin-top:12px;overflow:hidden}
.kpi__bar i{display:block;height:100%;background:linear-gradient(90deg,#0ea5e9,#22c55e);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.kpi__bar--warn i{background:linear-gradient(90deg,#f59e0b,#ef4444)}

/* ---------- PAINÉIS ---------- */
.grid2{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.panel__head h2{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700}
.panel__head--sub{margin-top:18px;border-top:1px solid var(--line)}
.panel__sub{font-family:var(--mono);font-size:.74rem;color:var(--muted)}

.legend{display:flex;gap:12px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lg::before{content:"";width:9px;height:9px;border-radius:2px}
.lg--green::before{background:var(--green)}
.lg--grey::before{background:var(--grey)}
.lg--red::before{background:var(--red)}
.lg--yellow::before{background:var(--yellow)}
.lg--blue::before{background:var(--blue)}

/* ---------- MÍMICO ---------- */
.mimic{padding:14px 16px 18px}
.mimic svg{width:100%;height:auto;background:radial-gradient(circle at 50% 40%,#132340,#0d1729 80%);border:1px solid var(--line);border-radius:10px}
.svgLbl{font-family:var(--mono);font-size:13px;fill:#94a3b8;letter-spacing:1px}
.svgVal{font-family:var(--mono);font-size:13px;fill:#7dd3fc;letter-spacing:.5px}
.svgMin{font-family:var(--mono);font-size:9.5px;fill:#f59e0b}
#pumpTxt,#valveTxt,#beltTxt{fill:#cbd5e1}
.flow{stroke-dashoffset:0;animation:flow 1.1s linear infinite;opacity:0}
.flow.on{opacity:1}
@keyframes flow{to{stroke-dashoffset:-56}}
.rotor{transform-box:fill-box;transform-origin:center;transition:.3s}
.rotor.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boxMv{animation:boxMove 3s linear infinite;animation-play-state:paused}
.beltRun .boxMv{animation-play-state:running}
@keyframes boxMove{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(180px);opacity:0}}

.cmds{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cmd{background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;padding:9px 15px;border-radius:7px;transition:.2s}
.cmd:hover{border-color:var(--blue);color:#fff;background:rgba(56,189,248,.12)}
.cmd.on{background:rgba(34,197,94,.16);border-color:var(--green);color:#86efac}
.cmd--stop{border-color:rgba(239,68,68,.5);color:#fca5a5}
.cmd--stop:hover{background:rgba(239,68,68,.16);border-color:var(--red);color:#fff}
.cmd--stop.on{background:rgba(239,68,68,.28);border-color:var(--red);color:#fff;animation:estopBlink .7s steps(2) infinite}
@keyframes estopBlink{50%{background:rgba(239,68,68,.1)}}
.mimic__msg{margin-top:11px;font-family:var(--mono);font-size:.76rem;min-height:19px;color:var(--yellow)}
.mimic__msg.ok{color:var(--green)}
.mimic__msg.err{color:var(--red)}

/* ---------- MÁQUINAS ---------- */
.machines{padding:14px 16px;display:grid;gap:10px}
.mach{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--grey);border-radius:9px;padding:11px 13px;transition:.25s}
.mach.run{border-left-color:var(--green)}
.mach.stop{border-left-color:var(--grey)}
.mach.fault{border-left-color:var(--red);animation:flashRed .9s ease infinite}
@keyframes flashRed{0%,100%{background:var(--bg-2)}50%{background:rgba(239,68,68,.14)}}
.mach__name{font-weight:600;color:#fff;font-size:.92rem}
.mach__state{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;justify-self:end;padding:3px 9px;border-radius:5px;background:rgba(100,116,139,.2);color:#cbd5e1}
.mach.run .mach__state{background:rgba(34,197,94,.16);color:#86efac}
.mach.fault .mach__state{background:rgba(239,68,68,.18);color:#fca5a5}
.mach__meta{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.mach__btn{grid-row:1/3;justify-self:end;background:transparent;border:1px solid var(--line-2);color:var(--muted);font-family:var(--mono);font-size:.72rem;padding:6px 12px;border-radius:6px;transition:.2s}
.mach__btn:hover{border-color:var(--blue);color:#fff}
.mach__btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- GRÁFICO ---------- */
.chartBox{position:relative;height:210px;padding:12px 14px 16px}
.chartBox--lg{height:380px;padding:16px 18px 22px}
.trendStats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.trendStats div{background:var(--panel);padding:13px 15px}
.trendStats span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trendStats b{font-family:var(--mono);font-size:1.15rem;color:#fff}

/* ---------- TABELAS ---------- */
.tableWrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.86rem}
.table th{background:var(--bg-2);color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.05);color:#c3cede}
.table tbody tr{transition:.2s}
.table tbody tr:hover{background:rgba(56,189,248,.05)}
.table .time{font-family:var(--mono);color:var(--blue);white-space:nowrap}
.table .eq{font-family:var(--mono);color:#fff}
.emptyRow td{text-align:center;color:var(--muted);padding:26px;font-style:italic}
.prio{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:4px 10px;border-radius:5px;white-space:nowrap}
.prio--crit{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.prio--warn{background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.4)}
.prio--ack{background:rgba(100,116,139,.16);color:#94a3b8;border:1px solid rgba(100,116,139,.4)}
tr.acked td{color:#6b7c94}
tr.acked .prio{background:rgba(100,116,139,.14);color:#94a3b8;border-color:rgba(100,116,139,.4)}
.ackBtn{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.4);color:var(--blue);font-family:var(--mono);font-size:.7rem;padding:5px 12px;border-radius:6px;transition:.2s}
.ackBtn:hover{background:var(--blue);color:#062033}
tr.rowNew{animation:rowFlash .8s ease 3}
@keyframes rowFlash{0%,100%{background:transparent}50%{background:rgba(239,68,68,.2)}}
.table--rep td:nth-child(n+3){font-family:var(--mono)}
.oee-ok{color:var(--green)}.oee-warn{color:var(--yellow)}.oee-bad{color:var(--red)}
.repNote{padding:13px 17px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- PAINEL DE SIMULAÇÃO ---------- */
.simPanel{position:fixed;right:18px;bottom:18px;width:310px;background:var(--panel-2);border:1px solid rgba(56,189,248,.45);border-radius:14px;padding:16px 17px 18px;box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:60;animation:popIn .3s cubic-bezier(.2,.8,.3,1)}
.simPanel[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.simPanel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.simPanel header b{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--blue)}
.simPanel header button{background:none;border:1px solid var(--line-2);color:var(--muted);width:26px;height:26px;border-radius:6px}
.simPanel header button:hover{border-color:var(--red);color:#fff}
.simPanel>p{font-size:.78rem;color:var(--muted);margin-bottom:14px}
.simPanel label{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.simPanel label b{float:right;font-family:var(--mono);color:var(--blue);letter-spacing:0}
.simPanel input[type=range]{width:100%;margin-top:8px;accent-color:var(--blue);height:5px}
.simPanel .cmd{width:100%;margin-top:2px}

/* ---------- TOAST DE ALARME ---------- */
.alarmToast{position:fixed;top:74px;right:18px;z-index:80;display:flex;gap:12px;align-items:center;background:#2a1216;border:1px solid var(--red);border-left:4px solid var(--red);border-radius:10px;padding:13px 18px;box-shadow:0 20px 44px rgba(0,0,0,.55);animation:toastIn .35s cubic-bezier(.2,.8,.3,1);max-width:330px}
.alarmToast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
.alarmToast__ic{font-size:1.4rem;color:var(--red);animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.alarmToast b{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:#fff}
.alarmToast small{color:#fca5a5;font-size:.8rem}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ============ RESPONSIVO ============ */
@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .main{grid-column:1;padding:16px}
  .side{position:static;width:auto;top:auto;height:auto;flex-direction:column;border-right:0;border-bottom:1px solid var(--line);margin-top:62px;padding:12px}
  .side__nav{grid-template-columns:repeat(2,1fr);display:grid}
  .interlock{margin-top:4px}
  .topbar__center{display:none}
  .op{display:none}
  .trendStats{grid-template-columns:repeat(2,1fr)}
  .simPanel{right:10px;left:10px;width:auto;bottom:10px}
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr}
  .topbar{padding:0 12px;gap:8px}
  .topbar__plant small{display:none}
  .comm{padding:5px 9px;font-size:.7rem}
  .simBtn{font-size:.68rem;padding:6px 9px}
  .cmd{flex:1 1 calc(50% - 5px);text-align:center}
}