/* SCADA · Ocean Deep v5.0 · ETAP + Lodos · Fabricio M. Toso */

:root {
  --bg-0:#061320; --bg-1:#0a1e30; --bg-2:#0f2940;
  --card:#0d2238; --card-2:#112c47;
  --border:rgba(92,189,185,0.14); --border-strong:rgba(92,189,185,0.32);
  --teal:#5cbdb9; --teal-glow:rgba(92,189,185,0.55);
  --cyan:#2dd4e0; --amber:#f5b945; --red:#ff5c7a; --green:#4ade80; --violet:#a78bfa;
  --text:#e6f1f7; --muted:#7aa0b8; --muted-2:#4f7691;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow:0 8px 32px -12px rgba(0,0,0,0.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg-0);color:var(--text);font-family:var(--font-display);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(ellipse at top,var(--bg-2) 0%,var(--bg-0) 60%);padding-bottom:56px}
a{color:var(--teal);text-decoration:none}a:hover{color:var(--cyan)}
h1,h2{font-weight:600}
h2{font-size:.8rem;letter-spacing:.04em;color:var(--text);display:inline-flex;align-items:center;gap:6px}
button{font-family:inherit;cursor:pointer}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(10,30,48,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{color:var(--teal);display:grid;place-items:center;width:36px;height:36px;background:rgba(92,189,185,.08);border:1px solid var(--border-strong);border-radius:8px}
.brand-text strong{display:block;font-size:1rem;letter-spacing:.02em}
.brand-text span{font-family:var(--font-mono);font-size:.65rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase}
.topbar-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(13,34,56,.6)}
.meta-pill strong{color:var(--text);font-weight:600}
.meta-pill .dot{width:7px;height:7px;border-radius:50%}
.dot-ok{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s ease-in-out infinite}
.clock{color:var(--teal);font-weight:600}
@keyframes pulse{50%{opacity:.35}}

/* RAIL */
.rail{position:sticky;top:65px;z-index:49;display:flex;gap:6px;padding:10px 24px;background:rgba(10,30,48,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-node{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(13,34,56,.5);color:var(--muted);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:all .2s}
.rail-node:hover{color:var(--text);border-color:var(--border-strong)}
.rail-node .rn-i{width:18px;height:18px;border-radius:50%;background:rgba(92,189,185,.15);color:var(--teal);display:grid;place-items:center;font-size:.6rem;font-weight:600}
.rail-alt .rn-i{background:rgba(167,139,250,.18);color:var(--violet)}
.rail-alt{border-color:rgba(167,139,250,.3)}

/* STAGE */
.stage{max-width:1600px;margin:0 auto}
.proc{padding:22px 24px 8px}
.proc-title{font-size:1rem;font-weight:600;letter-spacing:.02em;color:var(--text);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.proc-title em{font-style:normal;font-family:var(--font-mono);font-size:.65rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.proc-num{font-family:var(--font-mono);font-size:.7rem;background:rgba(92,189,185,.12);color:var(--teal);padding:3px 8px;border-radius:6px;letter-spacing:.1em}
.proc-alt .proc-num{background:rgba(167,139,250,.15);color:var(--violet)}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
@media (max-width:1100px){.grid > *{grid-column:span 6 !important}}
@media (max-width:640px){.proc{padding:16px 12px 4px}.grid{gap:10px}.grid > *{grid-column:span 12 !important}.topbar{padding:12px 14px;flex-direction:column;gap:10px;align-items:flex-start}.rail{top:auto;padding:8px 12px}}

/* CARD */
.card{background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);border:1px solid var(--border);border-radius:14px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;min-height:200px;position:relative;box-shadow:var(--shadow);transition:border-color .25s}
.card:hover{border-color:var(--border-strong)}
.card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--teal-glow),transparent);opacity:.5}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.card-head .sub{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.tag{font-family:var(--font-mono);font-size:.55rem;color:var(--teal);padding:3px 8px;border:1px solid var(--border-strong);border-radius:999px;letter-spacing:.12em;text-transform:uppercase}
.tag-info{color:var(--cyan);border-color:rgba(45,212,224,.4)}
.card-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.65rem;color:var(--muted);padding-top:6px;border-top:1px dashed var(--border)}
.card-foot strong{color:var(--text);font-weight:600;font-family:var(--font-display);font-size:.85rem}
.kv{display:inline-flex;align-items:baseline;gap:6px}

/* INFO DOT (tooltip trigger) */
.info{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--border-strong);color:var(--cyan);font-style:normal;font-family:var(--font-mono);font-size:.55rem;font-weight:600;cursor:help;background:rgba(45,212,224,.08);transition:all .2s}
.info::before{content:"i"}
.info:hover,.info:focus{background:rgba(45,212,224,.25);border-color:var(--cyan);outline:none;transform:scale(1.15)}
#tip{position:fixed;z-index:200;max-width:280px;background:rgba(6,19,32,.97);border:1px solid var(--border-strong);border-radius:8px;padding:10px 12px;font-family:var(--font-mono);font-size:.68rem;line-height:1.5;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
#tip.show{opacity:1;transform:translateY(0)}
#tip strong{color:var(--cyan);display:block;margin-bottom:4px;font-family:var(--font-display);font-size:.75rem;letter-spacing:.02em}

/* CHARTS / GAUGES */
canvas.chart{width:100%;flex:1;min-height:110px;display:block}
canvas.chart-bars{min-height:140px}
.gauge-stage{position:relative;flex:1;display:grid;place-items:center;min-height:140px}
canvas.gauge{width:100%;max-width:220px;aspect-ratio:2/1.2;display:block}
canvas.gauge-sm{max-width:130px;aspect-ratio:2/1.2}
.gauge-readout{position:absolute;bottom:8px;left:0;right:0;text-align:center;pointer-events:none}
.gauge-readout .gv{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--teal);text-shadow:0 0 16px var(--teal-glow)}
.gauge-readout .gu{display:block;font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:2px}
.gauge-readout.sm .gv{font-size:1.3rem}
.mini-row{display:grid;place-items:center;flex:1;position:relative}
.mini-row .gauge-readout{bottom:4px}
.mini-num{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--teal);text-shadow:0 0 14px var(--teal-glow);display:flex;align-items:baseline;gap:6px;flex:1}
.mini-num small{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

/* KPI */
.kpi-stage{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center}
.kpi-num{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--teal);text-shadow:0 0 16px var(--teal-glow);display:flex;align-items:baseline;gap:6px}
.kpi-num small{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.kpi-bar{height:6px;background:rgba(92,189,185,.1);border-radius:3px;overflow:hidden}
.kpi-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan));border-radius:3px;transition:width .5s,background .3s;box-shadow:0 0 8px var(--teal-glow)}
.kpi-bar-fill.warn{background:linear-gradient(90deg,var(--amber),#ffd668);box-shadow:0 0 8px rgba(245,185,69,.6)}
.kpi-bar-fill.crit{background:linear-gradient(90deg,var(--red),#ff8aa3);box-shadow:0 0 8px rgba(255,92,122,.6)}
.kpi-note{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.06em}
.kpi-note strong{color:var(--text)}

/* FORM FIELDS */
.field{display:flex;flex-direction:column;gap:4px}
.field > span{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.field select{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:var(--font-mono);font-size:.7rem;outline:none}
.field select:focus{border-color:var(--teal)}

/* KV GRID */
.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.kv-grid .dn{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.kv-grid .dv{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);margin-top:2px}
.kv-grid .dv span{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);font-weight:400;margin-left:2px}

/* FILTERS */
.filter-grid{display:flex;flex-direction:column;gap:8px;flex:1}
.filter-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 10px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px}
.filter-row .fn{font-family:var(--font-mono);font-size:.7rem;color:var(--text)}
.filter-row .fb{height:5px;background:rgba(92,189,185,.1);border-radius:3px;overflow:hidden;min-width:60px}
.filter-row .fb > div{height:100%;background:var(--teal);border-radius:3px;transition:width .4s,background .3s}
.filter-row .fb > div.warn{background:var(--amber)}
.filter-row .fb > div.crit{background:var(--red)}
.filter-row .fs{font-family:var(--font-mono);font-size:.55rem;padding:3px 7px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase}
.fs.svc{background:rgba(74,222,128,.15);color:var(--green)}
.fs.bw{background:rgba(245,185,69,.18);color:var(--amber)}

/* LOWER */
.lower{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px;padding:22px 24px 8px;max-width:1600px;margin:0 auto}
@media (max-width:1100px){.lower{grid-template-columns:1fr;padding:18px 12px 4px}}

/* PUMPS */
.pump-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pump-card{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:10px;position:relative;overflow:hidden}
.pump-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted-2)}
.pump-card.on::after{background:var(--green);box-shadow:0 0 14px var(--green)}
.pump-card.warn::after{background:var(--amber);box-shadow:0 0 14px var(--amber)}
.pump-card.off::after{background:var(--muted-2)}
.pump-name{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.pump-rpm{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-top:4px}
.pump-card.on .pump-rpm{color:var(--green)}
.pump-card.warn .pump-rpm{color:var(--amber)}
.pump-card.off .pump-rpm{color:var(--muted)}
.pump-state{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* DOSE */
.dose-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.dose-list li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border)}
.dose-list li:last-child{border-bottom:none}
.sw{width:6px;height:32px;border-radius:2px;flex-shrink:0}
.sw-pac{background:var(--teal);box-shadow:0 0 10px var(--teal-glow)}
.sw-cl{background:var(--cyan);box-shadow:0 0 10px rgba(45,212,224,.5)}
.sw-floc{background:var(--amber)}
.sw-hcl{background:var(--red)}
.sw-pol{background:var(--violet);box-shadow:0 0 10px rgba(167,139,250,.5)}
.dn{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.dv{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);margin-top:2px}
.dv span{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);font-weight:400;margin-left:2px}

/* ALARMS */
.card--alarms{min-height:380px}
.alarm-tools{display:flex;gap:6px}
.btn-sm{background:rgba(92,189,185,.08);color:var(--teal);border:1px solid var(--border-strong);border-radius:6px;padding:4px 8px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;transition:all .2s}
.btn-sm:hover{background:rgba(92,189,185,.18);color:var(--cyan)}
.btn-sm.btn-danger{color:var(--red);border-color:rgba(255,92,122,.4)}
.btn-sm.btn-danger:hover{background:rgba(255,92,122,.15)}
.alarm-summary{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;color:var(--muted);transition:all .2s}
.chip:hover{color:var(--text);border-color:var(--border-strong)}
.chip.active{background:rgba(92,189,185,.15);border-color:var(--teal);color:var(--text)}
.chip-n{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:999px;font-weight:600;color:var(--text);min-width:18px;text-align:center}
.chip-crit{color:var(--red)}.chip-crit.active{background:rgba(255,92,122,.18);border-color:var(--red)}
.chip-warn{color:var(--amber)}.chip-warn.active{background:rgba(245,185,69,.18);border-color:var(--amber)}
.chip-info{color:var(--cyan)}.chip-info.active{background:rgba(45,212,224,.15);border-color:var(--cyan)}
.chip-ok{color:var(--green)}.chip-ok.active{background:rgba(74,222,128,.15);border-color:var(--green)}
.alarm-search input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:var(--font-mono);font-size:.7rem;color:var(--text);outline:none;transition:border-color .2s}
.alarm-search input::placeholder{color:var(--muted-2)}
.alarm-search input:focus{border-color:var(--teal)}
.alarm-log{list-style:none;max-height:320px;overflow-y:auto;font-family:var(--font-mono);font-size:.68rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.alarm-log::-webkit-scrollbar{width:6px}
.alarm-log::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.alarm-log li{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px dashed var(--border);cursor:pointer;transition:background .15s}
.alarm-log li:hover{background:rgba(92,189,185,.05)}
.alarm-log li.ack{opacity:.5}.alarm-log li.ack .msg{text-decoration:line-through}
.alarm-log li .t{color:var(--muted-2);font-size:.62rem}
.alarm-log li .sev{font-size:.55rem;padding:1px 6px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.alarm-log li .ack-btn{background:none;border:none;color:var(--muted);font-size:.7rem;opacity:0;transition:opacity .2s}
.alarm-log li:hover .ack-btn{opacity:1}
.alarm-log li.ack .ack-btn{color:var(--green);opacity:1}
.sev-ok{background:rgba(74,222,128,.18);color:var(--green)}
.sev-warn{background:rgba(245,185,69,.18);color:var(--amber);animation:blink 1.5s infinite}
.sev-crit{background:rgba(255,92,122,.22);color:var(--red);animation:blink 1s infinite}
.sev-info{background:rgba(45,212,224,.15);color:var(--cyan)}
.al-empty{text-align:center;color:var(--muted-2);padding:20px 0;font-style:italic}
@keyframes blink{50%{opacity:.55}}

/* FOOTER */
.footbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 24px;background:rgba(10,30,48,.92);backdrop-filter:blur(10px);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;z-index:40}
.ticker{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-inner{display:inline-flex;gap:28px;white-space:nowrap;animation:tk 60s linear infinite;padding-left:100%}
.ticker-inner span.ok{color:var(--green)}.ticker-inner span.warn{color:var(--amber)}
@keyframes tk{to{transform:translateX(-100%)}}
@media (max-width:640px){.footbar{font-size:.55rem;padding:6px 10px;gap:8px}.ticker{display:none}.card--alarms{min-height:320px}}