:root{
  --bg:#dfe3ea;
  --panel:#f7f9fc;
  --line:#c8d0dc;
  --text:#172033;
  --muted:#627089;
  --blue:#1d4ed8;
  --red:#b4192f;
  --red-bright:#ef2c3c;
  --lime:#1a1f28;
  --black:#131926;
  --purple:#473e8c;
  --ok:#15803d;
  --warn:#b45309;
  --bad:#b91c1c;
  --shadow:0 12px 28px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#ebeff5 0%, #dfe4ec 100%);
}

.shell{
  min-height:100vh;
  padding:18px 18px 96px;
}

.topbar,
.menu-bar,
.panel,
.bottom-bar{
  background:rgba(248,250,252,.96);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.topbar{
  border-radius:20px;
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}

.brand-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#18233a,#2c477c);
  color:#fff;
  font-weight:800;
}

.brand h1{
  margin:0;
  font-size:1.8rem;
}

.brand p{
  margin:5px 0 0;
  color:var(--muted);
}

.top-status{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.mini-status{
  min-width:180px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}

.mini-status span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:4px;
}

.menu-bar{
  border-radius:18px;
  padding:10px;
  display:flex;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.menu-btn{
  border:1px solid #cfd7e5;
  background:linear-gradient(180deg,#fff,#eef3fb);
  color:#18376d;
  font-weight:700;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
}

.menu-btn.active{
  background:linear-gradient(180deg,#1d6cf0,#184aa7);
  border-color:#184aa7;
  color:#fff;
}

.content{
  display:grid;
  gap:14px;
}

.view{display:none}
.view.active{display:block}

.panel{
  border-radius:20px;
  padding:16px;
}

.controls-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}

.action-btn,
.save-btn{
  border:1px solid #bfd0eb;
  background:linear-gradient(180deg,#fff,#edf3ff);
  color:#163968;
  font-weight:800;
  border-radius:12px;
  padding:11px 14px;
  cursor:pointer;
}

.save-btn{
  background:linear-gradient(180deg,#2c75f6,#1b52b8);
  border-color:#1b52b8;
  color:#fff;
}

.quick-input{
  display:grid;
  gap:5px;
}

.quick-input label{
  font-size:.78rem;
  color:var(--muted);
  font-weight:700;
}

.quick-input input,
.input-row input{
  width:110px;
  border:1px solid #c9d3e3;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}

.hmi-panel{
  padding:14px;
}

.hmi-board{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  aspect-ratio:1536 / 1024;
  border-radius:18px;
  overflow:hidden;
  background:#e3e6ec;
  border:1px solid #c6cfda;
}

.hmi-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* tags sobre la imagen */
.tag{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
  white-space:nowrap;
  user-select:none;
}

.tag.red{
  background:#a91e34;
  color:#fff;
}

.tag.blue{
  background:#314f85;
  color:#fff;
}

.tag.black{
  background:#111827;
  color:#fff;
}

.tag.lime{
  background:#1a1f28;
  color:#f8f18a;
}

.t-avg-temp{ left:47.1%; top:18.3%; width:8.8%; height:4.5%; font-size:clamp(12px,1.7vw,19px); }
.t-sp-temp{ left:64.0%; top:18.3%; width:8.8%; height:4.5%; font-size:clamp(12px,1.7vw,19px); }
.t-sp-hum{ left:77.8%; top:18.3%; width:8.8%; height:4.5%; font-size:clamp(12px,1.7vw,19px); }

.t-temp{ left:64.5%; top:38.2%; width:7.2%; height:4.2%; font-size:clamp(11px,1.45vw,17px); }
.t-hum{ left:74.2%; top:38.2%; width:6.0%; height:4.2%; font-size:clamp(11px,1.45vw,17px); }
.t-airvel{ left:87.2%; top:38.2%; width:7.2%; height:4.2%; font-size:clamp(10px,1.25vw,16px); }

.t-bin{ left:26.6%; top:54.1%; width:6.0%; height:4.3%; font-size:clamp(11px,1.4vw,17px); }
.t-suminst{ left:46.9%; top:53.8%; width:8.3%; height:4.3%; font-size:clamp(10px,1.18vw,16px); }
.t-dp-filter{ left:56.6%; top:53.8%; width:4.3%; height:4.1%; font-size:clamp(10px,1.18vw,16px); }
.t-alarm{ left:91.0%; top:53.9%; width:7.0%; height:4.2%; font-size:clamp(10px,1.18vw,16px); }

.t-ca{ left:50.0%; top:79.7%; width:10.2%; height:4.2%; font-size:clamp(9px,1.02vw,14px); }
.t-vdf{ left:55.4%; top:77.5%; width:6.2%; height:3.8%; font-size:clamp(10px,1.05vw,14px); }
.t-spress-sp{ left:72.2%; top:78.7%; width:6.4%; height:4.3%; font-size:clamp(11px,1.35vw,18px); }
.t-spress{ left:84.4%; top:78.7%; width:6.4%; height:4.3%; font-size:clamp(11px,1.35vw,18px); }

.fan-rotor{
  position:absolute;
  left:47.0%;
  top:57.6%;
  width:6.0%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.fan-rotor.on{ opacity:.95; }
.fan-rotor.on svg{ animation:spin 1.2s linear infinite; }

.alarm-beacon{
  position:absolute;
  left:84.5%;
  top:59.4%;
  width:1.6%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#ef4444;
  opacity:.0;
  box-shadow:0 0 0 rgba(239,68,68,0);
}

.alarm-beacon.on{
  animation:beacon 0.8s infinite;
}

.tag.alarm{
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 0 14px rgba(239,68,68,.55);
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid{
  display:grid;
  gap:14px;
}

.form-grid label span{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color:#41526e;
}

.input-row{
  display:flex;
  gap:10px;
}

.kv{
  margin:0;
  display:grid;
  gap:10px;
}

.kv div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}

.kv dt{
  color:var(--muted);
  font-weight:700;
}

.kv dd{
  margin:0;
  font-weight:800;
}

.alarm-list{
  display:grid;
  gap:10px;
}

.alarm-item{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  font-weight:700;
  background:#fff;
}

.alarm-item.ok{
  background:#ecfdf3;
  border-color:#bbf7d0;
  color:#166534;
}

.alarm-item.warn{
  background:#fff7ed;
  border-color:#fdba74;
  color:#9a3412;
}

.alarm-item.bad{
  background:#fef2f2;
  border-color:#fca5a5;
  color:#991b1b;
}

.event-log{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  max-height:320px;
  overflow:auto;
}

.raw-box{
  margin:0;
  padding:14px;
  border-radius:14px;
  background:#0f172a;
  color:#dbeafe;
  min-height:320px;
  overflow:auto;
}

.diag-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.muted{
  color:var(--muted);
  line-height:1.5;
}

.bottom-bar{
  position:fixed;
  left:18px;
  right:18px;
  bottom:14px;
  border-radius:18px;
  padding:10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.bottom-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}

.bottom-item span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:4px;
}

.state-ok{ color:var(--ok); }
.state-warn{ color:var(--warn); }
.state-bad{ color:var(--bad); }

@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes beacon{
  0%,100%{ opacity:.25; box-shadow:0 0 0 rgba(239,68,68,0); }
  50%{ opacity:1; box-shadow:0 0 18px rgba(239,68,68,.9); }
}

@media (max-width:1100px){
  .topbar{flex-direction:column;align-items:flex-start}
  .grid-2,
  .bottom-bar{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .shell{padding:12px 12px 130px}
  .grid-2,
  .bottom-bar{grid-template-columns:1fr}
  .controls-row{align-items:stretch}
  .quick-input input,
  .input-row input{width:100%}
  .input-row{flex-direction:column}
}