/* =====================================================================
   CFLOW WEB SCADA — tema estilo Ignition Perspective
   ===================================================================== */
:root {
  --bg: #d5d9dd;
  --bg2: #e4e7ea;
  --panel: #e9ecee;
  --panel-b: #b9bfc5;
  --hdr: #eceef0;
  --hdr-b: #a9afb5;
  --tab: #f4f5f6;
  --tab-act: #b4bac0;
  --txt: #1e2328;
  --txt2: #5b636b;
  --pipe: #50565c;
  --pipe2: #7d848b;
  --flow: #eaf6ff;
  --tank: #cfd3d7;
  --tank-b: #a6acb2;
  --water: #7d97a7;
  --water2: #6a8696;
  --vbox: #eef0f2;
  --vbox-b: #8e959c;
  --on: #2fbf4a;
  --on-d: #1f8a33;
  --off: #1b1d20;
  --off-l: #8e949a;
  --fault: #e0242a;
  --warn: #f2b705;
  --accent: #2c7fb8;
  --orange: #ff8c00;
  --p0: #7f8c8d; --p1: #2e86c1; --p2: #d4ac0d; --p3: #e67e22; --p4: #d62728;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
  --brand: #093341;
  --brand-mid: #5d8191;
  --brand-light: #aabfc5;
  --font: "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
  --bg: #2a2e33;
  --bg2: #22262a;
  --panel: #33383e;
  --panel-b: #4b5258;
  --hdr: #1c1f23;
  --hdr-b: #3b4148;
  --tab: #2d3237;
  --tab-act: #4c545c;
  --txt: #e3e6e9;
  --txt2: #a3aab1;
  --pipe: #9aa3ab;
  --pipe2: #6b737b;
  --flow: #43b3ff;
  --tank: #3d444a;
  --tank-b: #6d757d;
  --water: #3f6f8c;
  --water2: #335d77;
  --vbox: #1b1e22;
  --vbox-b: #59616a;
  --off: #0d0f11;
  --off-l: #6b737b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--font); font-size: 14px; overflow: hidden; }
button { font-family: inherit; }
a { color: var(--accent); }

/* --------------------------------------------------------- loading */
#loader { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 85% 15%, #d7e2e6 0, transparent 55%), radial-gradient(circle at 0% 100%, #aabfc5 0, transparent 50%), #eef3f5;
  color: #093341; transition: opacity .5s; }
#loader.hide { opacity: 0; pointer-events: none; }
#loader .logo { width: min(420px, 70vw); height: auto; }
#loader .tag { margin: 10px 0 34px; letter-spacing: 6px; font-size: 13px; font-weight: 600; color: #5d7f8c; }
#loader .steps div { text-align: center; font-size: 17px; margin: 20px 0; color: rgba(9,51,65,.25); transition: all .3s; }
#loader .steps div.cur { color: #093341; font-size: 24px; font-weight: 600; }
#loader .steps div.done { color: rgba(9,51,65,.55); }

/* ------------------------------------------------------------ shell */
#app { display: grid; grid-template-rows: 52px 34px 40px 1fr 26px; height: 100%; }
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--hdr); border-bottom: 2px solid var(--hdr-b); padding: 0 14px; }
.hdr .left { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.hdr .left .user { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.hdr .left .user:hover { color: var(--accent); }
.hdr .brand { display: flex; align-items: flex-end; gap: 10px; }
.hdr .brand .logo { height: 34px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.hdr .brand .logo-d { display: none; }
[data-theme="dark"] .hdr .brand .logo-l { display: none; }
[data-theme="dark"] .hdr .brand .logo-d { display: block; }
.hdr .brand small { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--brand-mid); margin-bottom: 2px; }
.hdr .right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-size: 18px; }
.cnt { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.cnt:hover { background: rgba(0,0,0,.07); }
.cnt.red { color: var(--fault); }
.cnt.red.blink svg { animation: blink 1s steps(1) infinite; }
.cnt svg { width: 20px; height: 20px; }
.clock { font-size: 13px; color: var(--txt2); text-align: right; line-height: 1.1; }
.icon-btn { background: none; border: 0; color: var(--txt); cursor: pointer; padding: 4px; border-radius: 4px; display: inline-flex; }
.icon-btn:hover { background: rgba(0,0,0,.08); }
.icon-btn svg { width: 22px; height: 22px; }

.sub { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--hdr); border-bottom: 2px solid var(--hdr-b); font-size: 17px; font-weight: 600; }
.sub .badge { font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 10px; }
.sub .badge span.sep { width: 1px; height: 16px; background: var(--txt2); }

.tabs { display: flex; justify-content: center; align-items: center; gap: 2px; background: var(--bg2); border-bottom: 1px solid var(--hdr-b); padding: 3px 8px; overflow-x: auto; }
.tabs a { flex: 0 0 auto; min-width: 104px; text-align: center; padding: 6px 12px; background: var(--tab); border: 1px solid var(--hdr-b); color: var(--txt); text-decoration: none; font-size: 15px; font-weight: 500; }
.tabs a:hover { filter: brightness(.95); }
.tabs a.act { background: var(--tab-act); font-weight: 600; }
.tabs .gap { width: 14px; }

main { position: relative; overflow: auto; }
.view { position: absolute; inset: 0; overflow: auto; }
.view.pad { padding: 14px 18px; }
.foot { display: flex; align-items: center; gap: 18px; padding: 0 12px; font-size: 12px; color: var(--txt2); background: var(--hdr); border-top: 1px solid var(--hdr-b); white-space: nowrap; overflow: hidden; }
.foot .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--off-l); margin-right: 5px; vertical-align: -1px; }
.foot .dot.ok { background: var(--on); }
.foot .dot.bad { background: var(--fault); }
.foot .ticker { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.foot .ticker b { color: var(--fault); }

/* ----------------------------------------------------------- drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 50; display: none; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; background: var(--panel); z-index: 51; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer.open + .drawer-bg { display: block; }
.drawer h3 { margin: 0; padding: 16px; background: var(--hdr); border-bottom: 1px solid var(--hdr-b); font-size: 16px; }
.drawer .grp { padding: 10px 16px 4px; font-size: 11px; color: var(--txt2); text-transform: uppercase; letter-spacing: 1px; }
.drawer a { display: flex; gap: 10px; align-items: center; padding: 8px 16px; color: var(--txt); text-decoration: none; }
.drawer a:hover, .drawer a.act { background: var(--tab-act); }
.drawer a .rad { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--txt2); }
.drawer a.act .rad { background: var(--txt); border-color: var(--txt); }
.drawer .scroll { overflow: auto; flex: 1; }
.drawer .opts { padding: 12px 16px; border-top: 1px solid var(--hdr-b); display: grid; gap: 8px; }

/* -------------------------------------------------------- P&ID svg */
svg.pid { width: 100%; height: 100%; display: block; user-select: none; }
svg.pid text { font-family: var(--font); fill: var(--txt); }
svg.pid .lbl { font-size: 11px; }
svg.pid .lbl.b { font-weight: 600; }
svg.pid .lbl.t { font-size: 15px; font-weight: 600; }
svg.pid .lbl.s { font-size: 9.5px; fill: var(--txt2); }
.pipe-body { fill: none; stroke: var(--pipe); stroke-linejoin: round; }
.pipe-flow { fill: none; stroke: var(--flow); stroke-dasharray: 5 11; opacity: 0; stroke-linecap: round; }
.anim .flowing .pipe-flow { opacity: .95; animation: dash 0.9s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.arrow { fill: var(--pipe); }
.tank-wall { fill: var(--tank); stroke: var(--tank-b); stroke-width: 2; }
.tank-in { fill: var(--bg2); }
.water { fill: var(--water); transition: y .9s, height .9s; }
.wave { fill: var(--water); }
.anim .wave { animation: wave 4s ease-in-out infinite alternate; }
@keyframes wave { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
.vbox rect { fill: var(--vbox); stroke: var(--vbox-b); stroke-width: 1; }
.vbox text { font-size: 11.5px; text-anchor: middle; dominant-baseline: central; }
.vbox { cursor: pointer; }
.vbox:hover rect { stroke: var(--accent); stroke-width: 2; }
.vbox.badq rect { stroke: var(--fault); stroke-dasharray: 3 2; fill: url(#badq); }
.vbox.alm rect { fill: #ffd6d6; stroke: var(--fault); }
.anim .vbox.alm.p4 rect, .anim .vbox.alm.p3 rect { animation: almfill 1s steps(1) infinite; }
@keyframes almfill { 50% { fill: var(--vbox); } }
.eq { cursor: pointer; }
.eq:hover .body { stroke: var(--accent); stroke-width: 2.5; }
.pump .body { fill: var(--off); stroke: #000; stroke-width: 1.5; transition: fill .3s; }
.pump .tri { fill: #fff; }
.pump.on .body { fill: var(--on); stroke: var(--on-d); }
.pump.fault .body { fill: var(--fault); stroke: #8b0000; }
.anim .pump.fault .body { animation: blinkf 0.8s steps(1) infinite; }
@keyframes blinkf { 50% { fill: var(--off); } }
.spin { fill: none; stroke: var(--on-d); stroke-width: 2.4; stroke-dasharray: 5 6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.on .spin { opacity: 1; }
.anim .on .spin { animation: rot var(--dur, 1.2s) linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.rotor { transform-box: fill-box; transform-origin: center; }
.anim .on .rotor { animation: rot var(--dur, 1.2s) linear infinite; }
.mode rect { fill: #bdc3c7; stroke: #7f8c8d; }
.mode text { font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: #333 !important; }
.mode.manual rect { fill: #f7e000; stroke: #9a8c00; }
.valve .v { fill: var(--off); stroke: #000; stroke-width: 1; transition: fill .3s; }
.valve.open .v { fill: var(--on); stroke: var(--on-d); }
.valve.fault .v { fill: var(--fault); }
.offp polygon { fill: var(--panel); stroke: var(--pipe2); }
.offp text { font-size: 11px; dominant-baseline: central; }
.offp.nav { cursor: pointer; }
.offp.nav:hover polygon { stroke: var(--accent); stroke-width: 2; }
.dot { fill: var(--off-l); stroke: rgba(0,0,0,.35); }
.dot.on { fill: var(--on); }
.dot.fault { fill: var(--fault); }
.gauge-bg { fill: var(--bg2); stroke: var(--tank-b); }
.gauge-fill { fill: #fff; transition: y .9s, height .9s; }
[data-theme="dark"] .gauge-fill { fill: #b9c4cc; }
.gauge-fill.alm { fill: var(--fault); }
.gauge-mk { fill: var(--txt); transition: transform .9s; }
.alm-flag { opacity: 0; }
.alm-flag.alm { opacity: 1; }
.anim .alm-flag.alm { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.bub { fill: rgba(255,255,255,.75); opacity: 0; }
.anim .on .bub { animation: bub 2.4s linear infinite; }
@keyframes bub { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-110px); } }
.lamp { fill: #6b737b; }
.lamp.on { fill: #b78cff; filter: drop-shadow(0 0 4px #b78cff); }
.anim .lamp.on { animation: glow 2s ease-in-out infinite alternate; }
@keyframes glow { to { fill: #d9c4ff; } }
.feeder .body { fill: var(--off-l); }
.feeder.on .body { fill: var(--on); }
.pellet { fill: #8d5a2b; opacity: 0; }
.anim .feeder.on .pellet { animation: pellet 1.2s linear infinite; }
@keyframes pellet { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(40px); } }
.clickable { cursor: pointer; }
.clickable:hover { filter: brightness(1.08); }
.panel-box { fill: var(--panel); stroke: var(--panel-b); stroke-width: 1.5; }
.hx { fill: #f1e4dc; stroke: var(--tank-b); }
[data-theme="dark"] .hx { fill: #4d433d; }

/* ------------------------------------------------------- HTML UI */
.card { background: var(--panel); border: 1px solid var(--panel-b); border-radius: 3px; }
.card > h4 { margin: 0; padding: 8px 12px; font-size: 14px; background: var(--hdr); border-bottom: 1px solid var(--panel-b); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .body { padding: 10px 12px; }
.grid { display: grid; gap: 12px; }
.btn { background: var(--tab); border: 1px solid var(--hdr-b); color: var(--txt); padding: 6px 12px; cursor: pointer; border-radius: 3px; font-size: 13px; }
.btn:hover { filter: brightness(.94); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pri { background: var(--accent); color: #fff; border-color: #1d5f8c; }
.btn.ok { background: var(--on); color: #fff; border-color: var(--on-d); }
.btn.danger { background: var(--fault); color: #fff; border-color: #8b0000; }
.btn.sel { background: var(--tab-act); font-weight: 600; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); }
.btn.sm { padding: 3px 8px; font-size: 12px; }
input, select, textarea { font-family: inherit; font-size: 13px; padding: 5px 7px; background: var(--vbox); color: var(--txt); border: 1px solid var(--vbox-b); border-radius: 2px; }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: middle; }
label.f { display: grid; gap: 3px; font-size: 12px; color: var(--txt2); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th { position: sticky; top: 0; background: var(--hdr); text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--panel-b); font-weight: 600; white-space: nowrap; z-index: 1; }
table.tbl td { padding: 5px 8px; border-bottom: 1px solid var(--panel-b); }
table.tbl tr:hover td { background: rgba(44,127,184,.08); }
table.tbl tr.sel td { background: rgba(44,127,184,.22); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 11px; font-size: 11.5px; border: 1px solid var(--panel-b); background: var(--tab); cursor: pointer; user-select: none; }
.chip.off { opacity: .45; text-decoration: line-through; }
.prio { display: inline-block; min-width: 72px; padding: 1px 6px; border-radius: 2px; color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.prio.p0 { background: var(--p0); } .prio.p1 { background: var(--p1); } .prio.p2 { background: var(--p2); color: #222; } .prio.p3 { background: var(--p3); } .prio.p4 { background: var(--p4); }
tr.st-ActiveUnacked td { font-weight: 600; }
tr.st-ActiveUnacked.p4 td:first-child, tr.st-ActiveUnacked.p3 td:first-child { animation: blink 1s steps(1) infinite; }
tr.st-ClearUnacked td { color: var(--txt2); }
.kpi { display: grid; gap: 2px; padding: 10px 12px; }
.kpi .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--txt2); margin-left: 4px; }
.kpi .l { font-size: 12px; color: var(--txt2); }
.bar { height: 14px; background: var(--bg2); border: 1px solid var(--panel-b); position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--on); transition: width .8s; }
.bar > span { position: absolute; inset: 0; font-size: 10.5px; text-align: center; line-height: 13px; }
.state-lbl { font-weight: 700; }
.state-lbl.off { background: var(--orange); color: #111; }
.muted { color: var(--txt2); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.tabbar { display: flex; gap: 2px; border-bottom: 2px solid var(--panel-b); margin-bottom: 12px; flex-wrap: wrap; }
.tabbar button { border: 1px solid var(--panel-b); border-bottom: 0; background: var(--tab); padding: 7px 14px; cursor: pointer; color: var(--txt); font-size: 13px; }
.tabbar button.act { background: var(--tab-act); font-weight: 600; }
.qbad { color: var(--fault); }

/* ----------------------------------------------------------- popups */
.popup { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--hdr-b); box-shadow: var(--shadow); min-width: 280px; display: flex; flex-direction: column; max-height: 92vh; }
.popup .ph { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--brand); color: #fff; cursor: move; font-weight: 600; font-size: 14px; user-select: none; }
.popup .ph .x { margin-left: auto; cursor: pointer; background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; }
.popup .pb { padding: 12px; overflow: auto; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 59; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.fp-grid .k { color: var(--txt2); }
.fp-grid .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-state { text-align: center; font-weight: 700; padding: 6px; margin-bottom: 10px; border-radius: 2px; color: #fff; background: var(--off-l); }
.fp-state.on { background: var(--on); }
.fp-state.fault { background: var(--fault); }
.fp-sec { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--panel-b); }
.fp-sec h5 { margin: 0 0 6px; font-size: 12px; color: var(--txt2); text-transform: uppercase; letter-spacing: .5px; }
.mini-chart { height: 170px; }

.toasts { position: fixed; right: 16px; bottom: 36px; z-index: 80; display: grid; gap: 8px; }
.toast { background: var(--brand); color: #fff; padding: 10px 14px; border-left: 5px solid var(--accent); box-shadow: var(--shadow); font-size: 13px; max-width: 380px; animation: tin .2s; }
.toast.err { border-color: var(--fault); }
.toast.ok { border-color: var(--on); }
@keyframes tin { from { transform: translateX(30px); opacity: 0; } }

/* -------------------------------------------------- tanks grid view */
.tk-grid { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 14px; height: 100%; box-sizing: border-box; }
.tk { background: var(--panel); border: 1px solid var(--panel-b); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tk-hd { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 12px; background: var(--bg2); border-bottom: 1px solid var(--panel-b); }
.tk h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; white-space: nowrap; }
.tk .ico { display: flex; gap: 2px; }
.tk .ico button { background: none; border: 0; padding: 3px 6px; cursor: pointer; color: var(--txt); border-radius: 3px; }
.tk .ico button:hover { background: var(--tab-act); }
.tk .ico svg { width: 22px; height: 17px; display: block; }
.tk svg.card-svg { width: 100%; flex: 1; min-height: 0; display: block; padding: 4px 6px 6px; box-sizing: border-box; }

/* trends */
.trend-wrap { display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.tag-tree { border-right: 1px solid var(--panel-b); overflow: auto; background: var(--panel); font-size: 12.5px; }
.tag-tree .fld { padding: 4px 8px; cursor: pointer; font-weight: 600; }
.tag-tree .fld:hover { background: var(--tab-act); }
.tag-tree .tg { padding: 3px 8px 3px 26px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.tag-tree .tg:hover { background: rgba(44,127,184,.12); }
.tag-tree .tg.sel { background: rgba(44,127,184,.25); }
.pen { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--panel-b); border-radius: 2px; font-size: 12px; background: var(--vbox); }
.pen i { width: 12px; height: 4px; display: inline-block; }
.pen b { cursor: pointer; margin-left: 4px; }

@media (max-width: 1100px) {
  .tk-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; height: auto; grid-auto-rows: auto; }
  .tk svg.card-svg { flex: none; height: auto; }
  .trend-wrap { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .hdr .brand small { display: none; }
  .clock { display: none; }
}
/* ventanas muy bajas: las tarjetas mantienen un tamaño legible y la vista se desplaza */
@media (max-height: 560px) and (min-width: 1101px) {
  .tk-grid { height: auto; grid-template-rows: none; grid-auto-rows: 260px; }
}
@media (max-width: 700px) {
  #app { grid-template-rows: 48px 30px 40px 1fr 0; }
  .tk-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; grid-auto-rows: auto; }
  .hdr .brand { font-size: 20px; }
  .hdr .left .uname { display: none; }
  .tabs { justify-content: flex-start; }
  .sub { padding: 0 10px; font-size: 14px; }
  .sub .badge { display: none; }
}

/* extras */
.media { opacity: .55; transform-box: fill-box; }
.anim .on .media { animation: drift 2.6s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-6px, 4px); } to { transform: translate(6px, -6px); } }
.dot.alm { fill: var(--fault); }
.anim .dot.alm { animation: blink 1s steps(1) infinite; }
.state-lbl.on.alm { background: #ffd6d6; color: var(--fault); }
.anim .state-lbl.on.alm.p4, .anim .state-lbl.on.alm.p3 { animation: blink 1s steps(1) infinite; }
text.on { fill: var(--on-d) !important; font-weight: 700; }
text.off { fill: var(--txt2) !important; }
text.neg.off { fill: var(--fault) !important; font-weight: 700; }
.packing { fill: url(#pack); }

td.alm { color: var(--fault); font-weight: 700; }
.vbox.badq text { fill: #8b0000 !important; font-style: italic; }
@media (max-width: 700px) {
  .hdr { padding: 0 8px; }
  .hdr .brand small { display: none; }
  .hdr .brand .logo { height: 24px; }
  .hdr .right { gap: 4px; font-size: 15px; }
  .view svg.pid { min-width: 1100px; height: auto; }
  .view:has(svg.pid) { overflow: auto; }
}
/* botón de comando (Designer) */
.cmd-btn { cursor: pointer; }
.cmd-btn rect { fill: var(--tab); stroke: var(--hdr-b); }
.cmd-btn:hover rect { fill: var(--tab-act); }
.cmd-btn text { font-size: 13px; font-weight: 600; }
.vbox.notag rect { stroke-dasharray: 2 2; }

/* =====================================================================
   Biblioteca de símbolos (symbols.js) — apariencias P&ID / mímico / simple
   Estados: .on (marcha) .open (abierta) .fault (falla) .bq (calidad mala)
   ===================================================================== */
:root { --sym-line: #2b3034; --sym-bg: #ffffff; --sym-flat: #c9ced3; --sym-flat2: #9aa2a9; --s-on: var(--on); --s-on-d: var(--on-d); --s-off: var(--off); --s-fault: var(--fault); }
[data-theme="dark"] { --sym-line: #c6cdd3; --sym-bg: #2b3036; --sym-flat: #59616a; --sym-flat2: #7a838c; }
[data-hmi="isa101"] { --on: #5b6268; --on-d: #2f3438; --off: #f3f4f5; --s-on: #5b6268; --s-on-d: #2f3438; --s-off: var(--sym-bg); --flow: #9fb4c2; }
[data-theme="dark"][data-hmi="isa101"] { --on: #c9cfd4; --on-d: #eef1f3; --off: #2b3036; --s-on: #c9cfd4; --s-on-d: #eef1f3; }
[data-hmi="isa101"] .pump:not(.on) .tri { fill: var(--pipe); }
[data-hmi="isa101"] .pump .body, [data-hmi="isa101"] .valve .v { stroke: var(--sym-line); }
.sym .m, .sym .n, .sym .b { stroke: var(--sym-line); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .3s; }
.sym .l, .sym .mv, .sym .mvs { fill: none; stroke: var(--sym-line); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sym .mvs { stroke-width: 2; }
.sym .k { fill: var(--sym-line); stroke: none; }
.sym .w { fill: var(--sym-bg); stroke: var(--sym-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sym .t { fill: var(--sym-line); stroke: none; font-family: var(--font); font-weight: 700; pointer-events: none; }
.sym .wt { fill: var(--water); stroke: none; transition: y .9s, height .9s; }
.sym .sol { fill: url(#sgSol); stroke: none; transition: y .9s, height .9s; }
.sym .gl, .sym .glu, .sym .glr { fill: var(--sym-flat2); stroke: var(--sym-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sym path.glu, .sym path.glr { fill: none; stroke-width: 2; }
.sym .bb { fill: var(--sym-bg); stroke: var(--sym-line); stroke-width: .8; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; }
.sym .pel circle { opacity: 0; }
.sym .ovl .m, .sym .ovl .n, .sym .ovl .b, .sym .ovl .w, .sym .ovl .wt, .sym .ovl .sol { fill: none !important; }
.sym .ovl .bb, .sym .ovl .gl { display: none; }
.sym.k-inst .m, .sym.k-inst .w { fill: var(--sym-bg) !important; stroke: var(--sym-line) !important; }
.sym.k-inst .l { stroke: var(--sym-line) !important; }
.sym.k-inst .t { fill: var(--sym-line) !important; }
.sym .needle .l { stroke: #c0392b; stroke-width: 2.4; }
.sym .rotor, .sym .prop { transform-box: fill-box; transform-origin: center; }
/* P&ID (ISO 10628): línea negra sobre fondo, sin degradados */
.sym.ap-pid .m, .sym.ap-pid .n, .sym.ap-pid .b { fill: var(--sym-bg); }
.sym.ap-pid .wt { fill: var(--water); fill-opacity: .4; }
/* mímico: volumen con degradados metálicos */
.sym.ap-mimic .m, .sym.ap-mimic .b { fill: url(#sgM); stroke: #3d4348; }
.sym.ap-mimic .n { fill: url(#sgN); stroke: #33393e; }
.sym.ap-mimic .wt { fill: url(#sgW); }
.sym.ap-mimic .w { fill: #f4f6f7; stroke: #3d4348; }
.sym.ap-mimic .l { stroke: #3d4348; }
/* simple: silueta plana (alto rendimiento) */
.sym.ap-simple .m, .sym.ap-simple .b { fill: var(--sym-flat); stroke: var(--sym-flat2); }
.sym.ap-simple .n { fill: var(--sym-flat2); stroke: var(--sym-flat2); }
.sym.ap-simple .l, .sym.ap-simple .mv { stroke: var(--sym-flat2); }
.sym.ap-simple .w { fill: var(--sym-bg); stroke: var(--sym-flat2); }
.sym.ap-simple .k, .sym.ap-simple .t { fill: #5d656c; }
[data-theme="dark"] .sym.ap-simple .k, [data-theme="dark"] .sym.ap-simple .t { fill: #d4d9de; }
/* estados (solo símbolos enlazados a una señal de estado) */
.sym.st .b { fill: var(--s-off); stroke: var(--sym-line); }
.sym.st.ap-mimic .b { fill: url(#sgOff); }
.sym.st.on .b, .sym.st.open .b { fill: var(--s-on); stroke: var(--s-on-d); }
.sym.st.ap-mimic.on .b, .sym.st.ap-mimic.open .b { fill: url(#sgOn); }
[data-hmi="isa101"] .sym.st.ap-mimic .b { fill: url(#sgOffI); }
[data-hmi="isa101"] .sym.st.ap-mimic.on .b, [data-hmi="isa101"] .sym.st.ap-mimic.open .b { fill: url(#sgOnI); }
.sym.st.fault .b, .sym.st.ap-mimic.fault .b { fill: var(--s-fault); stroke: #8b0000; }
.anim .sym.st.fault .b { animation: symblink .8s steps(1) infinite; }
@keyframes symblink { 50% { fill: var(--s-off); } }
.sym.bq .b, .sym.bq .m { fill: url(#badq) !important; stroke-dasharray: 3 2; }
.sym.on .gl { fill: #ffd84a; }
.sym.on .glu { fill: #b78cff; }
.sym.on path.glu { fill: none; stroke: #9b6bff; }
.sym.on .glr { fill: #ff4a4a; }
.sym.on path.glr { fill: none; stroke: #e0242a; }
.sym.fault .glr { fill: #ff4a4a; }
.anim .sym.on .glu, .anim .sym.on .gl { animation: glow 2s ease-in-out infinite alternate; }
/* movimiento */
.anim .sym.on .rotor { animation: rot var(--dur, 1.6s) linear infinite; }
.anim .sym.on .prop { animation: symprop .3s linear infinite alternate; }
@keyframes symprop { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
.anim .sym.on .mv { stroke-dasharray: 6 6; animation: symdash 1s linear infinite; }
@keyframes symdash { to { stroke-dashoffset: -12; } }
.anim .sym.on .vib { animation: symvib .18s linear infinite alternate; }
@keyframes symvib { from { transform: translate(-.8px, 0); } to { transform: translate(.8px, .4px); } }
.sym.on .bb { opacity: .8; }
.anim .sym.on .bb { animation: symbub 2.2s linear infinite; }
@keyframes symbub { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
.anim .sym.on .pel circle { animation: pellet 1.2s linear infinite; }
.sym.noanim *, .sym.noanim { animation: none !important; }
.sym-wrap.clickable:hover .sym .m, .sym-wrap.clickable:hover .sym .b { stroke: var(--accent); }
.sym-lbl { font-size: 11.5px; font-weight: 600; fill: var(--txt); }
/* tuberías por servicio (colores atenuados, base BS 1710 / ISO 14726) */
.pipe.svc-agua .pipe-body { stroke: #5f8a6b; } .pipe.svc-aire .pipe-body { stroke: #7fa6be; } .pipe.svc-oxigeno .pipe-body { stroke: #b39a45; }
.pipe.svc-gas .pipe-body { stroke: #a88a3c; } .pipe.svc-quimico .pipe-body { stroke: #8a6fa8; } .pipe.svc-lodo .pipe-body { stroke: #8b6b4a; }
.pipe.svc-caliente .pipe-body { stroke: #b0685a; } .pipe.svc-fria .pipe-body { stroke: #5b86b0; }
.pipe.svc-electrica .pipe-body { stroke: var(--sym-line); stroke-dasharray: 8 4; }
.pipe.svc-neumatica .pipe-body { stroke: var(--sym-line); }
.pipe.svc-datos .pipe-body { stroke: var(--sym-line); stroke-dasharray: 2 4; stroke-linecap: round; }
[data-hmi="isa101"] .pipe .pipe-body { stroke: #8a9299; }

/* ------------------------------------------- robustez: sin comunicación / error de vista */
#offline-ban { position: fixed; left: 50%; top: 96px; transform: translateX(-50%); z-index: 900; background: #b3141b; color: #fff; padding: 9px 18px; border-radius: 6px; box-shadow: var(--shadow); font-size: 14px; max-width: 92vw; text-align: center; }
body.offline #main { filter: grayscale(1) opacity(.72); }
body.offline #main .vbox rect { fill: url(#badq); }
.view-err { margin: 40px auto; max-width: 560px; background: var(--panel); border: 1px solid var(--panel-b); border-left: 5px solid var(--fault); padding: 18px 22px; border-radius: 6px; line-height: 1.6; }
.view-err .btn { margin-top: 10px; }

/* ------------------------------------------- fondos de pantalla, formas, imágenes y textos */
.pv-wrap { position: absolute; inset: 0; overflow: auto; background: var(--bg); }
.pv-wrap > svg.pid { display: block; }
.has-bgimg .sym-lbl:not([style]), .has-bgimg .lbl:not(.notxt):not(.cc) { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.forma .fs { vector-effect: non-scaling-stroke; transition: fill .3s, fill-opacity .3s; }
.forma.on .fs.dyn { fill: var(--fon) !important; fill-opacity: var(--fop, .45) !important; }
.forma.alm .fs { stroke: var(--fault) !important; stroke-width: 3 !important; }
.anim .forma.alm .fs { animation: formablink 1s steps(1) infinite; }
@keyframes formablink { 50% { stroke-opacity: .2; } }
.tx-box { stroke-width: 1; }
.tx-lbl { font-family: var(--font); }
.img-ph { fill: none; stroke: var(--fault); stroke-dasharray: 5 4; }
/* colores personalizados de símbolos */
.sym.cf.ap-mimic .m, .sym.cf.ap-mimic:not(.st) .b { fill: var(--sym-bg); }
.sym.cf.ap-mimic .n { fill: var(--sym-bg); filter: brightness(.82); }
.sym.cl.ap-mimic .m, .sym.cl.ap-mimic .n, .sym.cl.ap-mimic .l, .sym.cl.ap-mimic .w, .sym.cl.ap-mimic:not(.st) .b { stroke: var(--sym-line); }
.sym.cl.ap-simple .m, .sym.cl.ap-simple .n, .sym.cl.ap-simple .l, .sym.cl.ap-simple .mv, .sym.cl.ap-simple .w, .sym.cl.ap-simple:not(.st) .b { stroke: var(--sym-line); }

.navz { cursor: pointer; }
.navz:hover .fs { stroke: var(--accent) !important; }

/* faceplate de lazo PID (v1.4) */
.pid-big { display: flex; justify-content: space-around; gap: 8px; margin: 4px 0 8px; }
.pid-big > div { display: flex; flex-direction: column; align-items: center; min-width: 90px; padding: 6px 8px; border: 1px solid var(--panel-b); border-radius: 4px; }
.pid-big b { font-size: 20px; }
/* tarjeta de equipo sobre imagen 3D */
.tj .tj-bg { fill: #0f1f36; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.tj .tj-t { fill: #fff; font-size: 12.5px; font-weight: 700; }
.tj .tj-l { fill: #c9d6e3; font-size: 11.5px; }
.tj .tj-v { fill: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tj .tj-v.badq { fill: #ff9b9b; text-decoration: line-through; }
.tj .tj-sep { stroke: rgba(255,255,255,.25); stroke-width: 1; }
.tj.light .tj-bg { fill: #ffffff; stroke: rgba(21,41,75,.35); }
.tj.light .tj-t, .tj.light .tj-v { fill: #15294b; }
.tj.light .tj-l { fill: #4d5b6a; }
.tj.light .tj-sep { stroke: rgba(21,41,75,.2); }
.tj.alm .tj-bg { stroke: var(--fault); stroke-width: 2.5; }
.anim .tj.alm.p4 .tj-bg, .anim .tj.alm.p3 .tj-bg { animation: blink 1s steps(1) infinite; }
.tj-lead { stroke: #ffffff; stroke-width: 1.6; stroke-dasharray: 4 3; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.9)); }
.tj-pt { fill: #2fbf4a; stroke: #fff; stroke-width: 1.6; }