:root {
  color-scheme: dark;
  --bg: #090f1b; --panel: #101a2a; --panel2: #131f30; --line: #263349;
  --txt: #e8effb; --muted: #8493a9; --faint: #5d7189;
  --mint: #50dec4; --orange: #ff997a; --blue: #6ea9ff;
  --shadow: 0 14px 44px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:#0d1624;border-right:1px solid #202c40;padding:28px 17px 20px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 36px}
.brandmark{height:38px;width:38px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:12px;background:#153c3b;border:1px solid #24645a;transform:rotate(-8deg)}
.brand-pulse{display:block;width:5px;height:24px;border-radius:5px;background:var(--mint);transform:skew(-13deg)}
.brand-pulse.small{height:14px;opacity:.6}
.brand strong{font-weight:800;font-size:18px;letter-spacing:-.7px}
.brand small{display:block;color:#5f9b9a;font-size:9px;letter-spacing:1.7px;font-weight:800;margin-top:4px}
.nav-heading{color:#667892;letter-spacing:1.8px;font-size:10px;font-weight:800;padding:0 13px;margin-bottom:12px}
nav{display:grid;gap:5px}
.nav-link{display:flex;align-items:center;gap:13px;padding:13px;border-radius:9px;color:#95a4ba;font-size:13px;font-weight:600;transition:background .18s}
.nav-link:hover,.nav-link.active{background:#19302e;color:#73efdc}
.nav-link.active{box-shadow:inset 3px 0 0 var(--mint)}
.nav-icon{font-size:19px;width:20px;text-align:center}
.sidebar-info{margin-top:auto;border:1px solid #244038;border-radius:10px;padding:15px 12px 12px;color:#81dcc7;font-size:9px;font-weight:800;letter-spacing:.7px;line-height:1.5}
.sidebar-info p{color:#778c9b;font-size:11px;letter-spacing:0;font-weight:400;margin:8px 0 0;line-height:1.6}
.online-dot{display:inline-block;border-radius:50%;background:var(--mint);width:7px;height:7px;margin-right:5px;box-shadow:0 0 11px #50dec477}
.sidebar-footer{margin:20px 5px 0;padding-top:17px;border-top:1px solid #233149;color:#64748c;font-size:10px;line-height:1.7;letter-spacing:.7px;font-weight:700}
.sidebar-footer span{color:#9aa8b9}
.content{min-width:0}
.topbar{height:68px;border-bottom:1px solid #202d42;padding:0 37px;display:flex;justify-content:space-between;align-items:center;background:#0c1422}
.breadcrumbs{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#8899b1}
.breadcrumbs span{color:#485a6c;padding:0 10px}
.top-actions{display:flex;align-items:center;gap:20px}
.clock{font-size:11px;color:#8999ae;font-variant-numeric:tabular-nums}
.connection{font-size:11px;border:1px solid #4b5652;color:#e7d3a4;border-radius:100px;padding:8px 12px;font-weight:750;white-space:nowrap}
.connection i{display:inline-block;background:#e9c179;width:7px;height:7px;border-radius:50%;margin-right:5px}
.connection.ok{color:#81e3cb;border-color:#275f50;background:#132923}
.connection.ok i{background:#55dfc1;box-shadow:0 0 9px #55dfc199}
.connection.bad{color:#ffb5a3;border-color:#70423e;background:#341c24}
.connection.bad i{background:#ff8170}
.page-container{max-width:1500px;margin:auto;padding:39px 37px 26px}
.heading-block{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.eyebrow{font-size:10px;color:var(--mint);font-weight:850;letter-spacing:2.4px}
.head-line{display:inline-block;vertical-align:middle;width:23px;height:1px;background:#275e53;margin-left:9px}
h1{font-size:clamp(26px,2.7vw,37px);margin:12px 0 10px;letter-spacing:-1.5px;line-height:1.16}
h1 span{color:#a6b7cb;font-weight:450}
.heading-block p{color:#8698b0;margin:0;font-size:13px;line-height:1.7}
.last-sync{text-align:right;white-space:nowrap;padding-bottom:3px}
.last-sync span{display:block;font-size:9px;color:#637792;font-weight:850;letter-spacing:1.8px;margin-bottom:7px}
.last-sync strong{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.alert{margin:0 0 23px;padding:12px 15px;border-radius:8px;border:1px solid #8b5a27;background:#302717;color:#f8d28a;line-height:1.5;font-size:12px}
.alert.hidden,.chart-tooltip.hidden{display:none}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{background:linear-gradient(140deg,#142134,#111c2c);border:1px solid #25364b;border-radius:11px;padding:19px 18px 18px;box-shadow:var(--shadow)}
.stat-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;font-weight:850;letter-spacing:1.1px;color:#93a4b8}
.stat-icon{color:#8e99a8;font-size:20px;font-weight:400}
.stat-icon.tempico{color:var(--orange)}.stat-icon.pressureico{color:var(--mint)}
.stat strong{display:block;font-size:30px;letter-spacing:-1.2px;margin:9px 0 6px;font-variant-numeric:tabular-nums}
.stat strong small{font-size:14px;color:#7a90a7;font-weight:500;letter-spacing:0}
.stat-caption{display:flex;align-items:center;gap:6px;color:#8799ad;font-size:11px}
.tiny-dot{height:6px;width:6px;border-radius:50%;display:inline-block}
.tiny-dot.coral{background:var(--orange)}.tiny-dot.teal{background:var(--mint)}
.section{margin-top:34px;scroll-margin-top:26px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-label{display:flex;align-items:center;gap:13px}
.section-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#1d2736;color:#95a9bf;font-size:21px}
.section-icon.hot{background:#3c282d;color:#ff957c}
.section-icon.cool{background:#173b3d;color:#59dcc8}
.section-label h2{font-size:19px;letter-spacing:-.4px;margin:0 0 4px}
.section-label p{font-size:11px;color:#8c9db1;margin:0}
.unit-badge{font-size:9px;font-weight:850;letter-spacing:1.1px;color:#f3ad9b;padding:8px 11px;border:1px solid #593a3b;border-radius:6px;background:#281e29}
.sensor-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px}
.sensor{border:1px solid #26364a;background:linear-gradient(147deg,#162135,#111a29);border-radius:10px;padding:14px 12px 12px;min-width:0;transition:border-color .16s,background .16s,transform .16s;text-align:left}
.sensor:hover{border-color:#62778d;transform:translateY(-1px)}
.sensor.disabled-sensor{opacity:.48}
.sensor-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a1b0c2;font-weight:700;letter-spacing:.4px}
.sensor-top .sensor-led{height:6px;width:6px;border-radius:50%;background:var(--sc);box-shadow:0 0 8px var(--sc)}
.sensor-value{display:flex;align-items:baseline;gap:3px;white-space:nowrap;font-size:clamp(17px,1.7vw,24px);font-weight:800;letter-spacing:-1.1px;margin:16px 0 6px;font-variant-numeric:tabular-nums}
.sensor-value span{font-size:11px;font-weight:600;color:#8698ab;letter-spacing:0}
.sensor-bottom{font-size:9px;color:#778ba3;white-space:nowrap}
.sensor-value.no-value{color:#73849a}
.sensor-value.no-value span{font-size:10px}
.segmented{display:flex;background:#101a28;border:1px solid #26374d;padding:3px;border-radius:8px;gap:2px}
.segmented button{border:0;background:transparent;color:#8c9eb5;font-size:11px;font-weight:650;padding:8px 11px;border-radius:6px;white-space:nowrap}
.segmented button.selected{background:#2b4546;color:#a2f1dd}
.notice{font-size:11px;color:#889bb1;line-height:1.6;margin:12px 0 0}
.notice span{color:#6bddd0;margin-right:5px}
.chart-heading{margin-bottom:15px}
.time-toolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:14px 16px;border-radius:10px 10px 0 0;border:1px solid #28364a;background:#121e2e}
.time-toolbar>span:first-child{color:#93a3b7;font-size:10px;letter-spacing:1.3px;font-weight:800}
.time-options{display:flex;gap:4px;flex-wrap:wrap}
.range{border:1px solid transparent;border-radius:6px;color:#98a9bd;background:transparent;padding:7px 11px;font-size:11px;font-weight:700}
.range:hover,.range.selected{color:#9cf0de;background:#1e403c;border-color:#2e655c}
.live-tag{margin-left:auto;color:#64dfb3;background:#153a33;font-size:9px;letter-spacing:1px;font-weight:850;border-radius:5px;padding:8px 10px;white-space:nowrap}
.live-tag span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#54e6bb;vertical-align:middle;margin-right:5px;animation:pulse 2s infinite}
.live-tag.history-mode{background:#273448;color:#c2d2e4}
.live-tag.history-mode span{background:#c2d2e4;animation:none}
@keyframes pulse{50%{opacity:.35}}
.graph-card{border:1px solid #28364a;border-top:0;background:#111b2b;padding:23px 23px 17px}
.graph-card + .graph-card{margin-top:14px;border-top:1px solid #28364a;border-radius:10px}
.time-toolbar + .graph-card{border-radius:0 0 10px 10px}
.graph-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.graph-eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#697e98}
.graph-top h3{margin:8px 0 4px;font-size:19px;font-weight:750;letter-spacing:-.5px}
.graph-top h3 span{color:#748ba5;font-weight:450}
.graph-caption{font-size:10px;color:#7187a0}
.chart-wrap{position:relative;width:100%;height:310px;margin-top:12px;cursor:crosshair}
canvas{width:100%;height:100%;display:block}
.legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 18px;padding-top:16px;border-top:1px solid #243147}
.legend button{border:0;padding:4px 0;background:transparent;color:#8fa3b8;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700}
.legend button.faded{opacity:.35;text-decoration:line-through}
.legend button i{width:13px;height:3px;border-radius:3px;display:inline-block}
.chart-tooltip{pointer-events:none;position:absolute;z-index:3;max-width:250px;min-width:150px;background:#1a293d;border:1px solid #3b536b;box-shadow:0 8px 30px #0008;border-radius:9px;padding:11px 12px;top:10px;left:10px;color:#d9e9f9;font-size:11px;line-height:1.8}
.chart-tooltip strong{display:block;color:#d0deeb;padding-bottom:5px}
.chart-tooltip .tip-row{display:flex;justify-content:space-between;gap:16px}
.tool-card{background:#121d2c;border:1px solid #28384e;border-radius:11px;padding:21px}
.form-grid{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto auto;gap:13px;align-items:end}
.form-grid label{display:grid;gap:9px;color:#879bb2;letter-spacing:1.3px;font-size:9px;font-weight:800}
input[type=datetime-local]{width:100%;min-width:0;border-radius:7px;border:1px solid #34465e;background:#0c1626;color:#e3ecfa;padding:11px 10px;outline:0;font-size:12px;color-scheme:dark}
input:focus{border-color:#5bafaa}
.primary-button,.secondary-button{border-radius:7px;padding:12px 15px;font-size:11px;font-weight:800;white-space:nowrap}
.primary-button{background:#45d1b2;color:#0b2530;border:1px solid #64e3c4}
.primary-button:hover{background:#77efd3}
.secondary-button{background:#1c2b3e;color:#bed0e4;border:1px solid #355068}
.secondary-button:hover{background:#2a4358}
.tool-subtext{color:#7d92ac;font-size:11px;margin-top:14px;line-height:1.5}
.tool-subtext.error{color:#ffad9c}
footer{margin-top:45px;padding:20px 0 0;border-top:1px solid #223146;font-size:10px;color:#6b7d93;line-height:1.7}
footer span{padding:0 8px;color:#506276}
@media(max-width:1280px){
 .shell{grid-template-columns:214px minmax(0,1fr)}
 .page-container{padding-left:26px;padding-right:26px}
 .topbar{padding:0 26px}
 .sensor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sensor-value{font-size:23px}
}
@media(max-width:900px){
 .shell{display:block}
 .sidebar{position:static;height:auto;display:block;padding:14px 17px}
 .brand{padding:0;display:inline-flex;vertical-align:middle}
 .brand small{font-size:8px}
 .nav-heading,.sidebar-info,.sidebar-footer{display:none}
 nav{display:flex;overflow-x:auto;gap:4px;margin-top:15px}
 .nav-link{padding:9px 11px;font-size:11px;white-space:nowrap}
 .nav-icon{display:none}
 .topbar{height:50px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .form-grid button{width:100%}
}
@media(max-width:590px){
 .page-container{padding:25px 15px}
 .topbar{padding:0 15px}
 .breadcrumbs{font-size:9px}
 .top-actions{gap:8px}
 .clock{display:none}
 .heading-block{display:block}
 .last-sync{text-align:left;padding-top:18px}
 .heading-block p{font-size:12px}
 .stat{padding:13px 12px}
 .stat-label{font-size:8px;letter-spacing:.4px}
 .stat strong{font-size:25px}
 .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .sensor-value{font-size:24px}
 .section-heading{align-items:flex-start;flex-direction:column}
 .graph-card{padding:16px 10px 14px}
 .chart-wrap{height:270px}
 .time-toolbar{padding:12px;gap:9px}
 .time-options{order:3;width:100%}
 .range{padding:7px 10px}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 .unit-badge{margin-left:52px}
 .graph-caption{display:none}
 .stat-caption{font-size:10px}
}


/* Alarmas por canal: señales informativas; NO son un sistema de corte físico. */
.alarm-summary{margin:0 0 22px;border:1px solid #536079;background:#19243a;border-radius:12px;padding:17px 18px;color:#d4e2f4}
.alarm-heading{display:flex;gap:12px;align-items:flex-start}
#alarmSymbol{font-size:27px;line-height:1;min-width:29px}
.alarm-heading strong{font-size:13px;letter-spacing:.6px}
.alarm-heading p{margin:6px 0 0;color:#adbfce;font-size:11px;line-height:1.6}
.alarm-events{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.alarm-event{display:inline-flex;gap:6px;align-items:center;border:1px solid currentColor;border-radius:6px;padding:6px 9px;font-size:11px;font-weight:650}
.alarm-disclaimer{margin:10px 0 0;font-size:10px;color:#a8bacc;line-height:1.5}
.alarm-summary.alarm-normal{border-color:#285c4b;background:#13251f}
.alarm-summary.alarm-normal #alarmSymbol{color:#6fd9b3}
.alarm-summary.alarm-warning{border-color:#b2863c;background:#392b17}
.alarm-summary.alarm-warning #alarmSymbol{color:#ffcc65}
.alarm-summary.alarm-trip,.alarm-summary.alarm-out_of_range{border-color:#c65b5f;background:#421e28}
.alarm-summary.alarm-trip #alarmSymbol,.alarm-summary.alarm-out_of_range #alarmSymbol{color:#ff8585}
.alarm-summary.alarm-unknown #alarmSymbol{color:#adc0db}
.alarm-summary.alarm-trip .alarm-disclaimer{color:#ffd2d2;font-weight:700}
.alarm-event.trip,.alarm-event.out_of_range{color:#ffb5b5}
.alarm-event.warning{color:#ffd27b}
.alarm-event.unknown{color:#b9cfe0}
.sensor.alarm-warning{border-color:#e0ac49;background:linear-gradient(147deg,#372816,#1d202c)}
.sensor.alarm-trip,.sensor.alarm-out_of_range{border-color:#ff6878;background:linear-gradient(147deg,#451d2a,#211925)}
.sensor.alarm-unknown{border-color:#5b6977}
.sensor.alarm-warning .sensor-bottom{color:#ffca6b;font-weight:700}
.sensor.alarm-trip .sensor-bottom,.sensor.alarm-out_of_range .sensor-bottom{color:#ff969c;font-weight:800}
.sensor.alarm-unknown .sensor-bottom{color:#a3b4c6}