/* ========================================================================
   VEDETTA — Tema dark industriale (default, stile Ignition / HMI ISA-101)
   Palette neutra quasi monocromatica: il colore 'pop' è solo per gli
   stati (verde=marcia, rosso=allarme, ambra=warning, blu=info/manuale).
   Accento UI: azzurro industriale, distinto dai colori di stato.
   ======================================================================== */
:root {
  --bg: #0f1216;
  --sidebar-bg: #141821;
  --sidebar: #1a1f2a;
  --sidebar-active: #252c3b;
  --accent: #3ba2e6;
  --accent-hover: #57b4f0;
  --accent-subtle: rgba(59,162,230,.15);
  --accent-bg: rgba(59,162,230,.12);
  --hdr-fg: #e8eef4;
  --card-bg: #171c26;
  --card-border: rgba(255,255,255,.06);
  --row-odd: #171c26;
  --row-even: #1d2330;
  --green: #41c877;
  --green-bg: rgba(65,200,119,.15);
  --red: #f4525c;
  --red-bg: rgba(244,82,92,.15);
  --blue: #4aa3f5;
  --blue-bg: rgba(74,163,245,.15);
  --amber: #f0b83d;
  --amber-bg: rgba(240,184,61,.16);
  --orange: var(--amber);
  --orange-bg: var(--amber-bg);
  --grey: #94a3b8;
  --grey-bg: rgba(148,163,184,.15);
  --steel: #a3b1c2;
  --steel-bg: rgba(163,177,194,.16);
  --text: #e3e9f1;
  --sub-text: #93a2b6;
  --muted: #7f8ea3;
  --border: #29303d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.5);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', 'Fira Code', monospace;
  --radius: 6px;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* Tema chiaro (opzionale, toggle in header) — mantiene la palette storica */
[data-theme="light"] {
  --bg: #eef1f5;
  --sidebar-bg: #ffffff;
  --sidebar: #1e293b;
  --sidebar-active: #334155;
  --accent: #0b7285;
  --accent-hover: #085d6e;
  --accent-subtle: rgba(11,114,133,.12);
  --accent-bg: rgba(11,114,133,.1);
  --hdr-fg: #f1f5f9;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.06);
  --row-odd: #ffffff;
  --row-even: #f1f5f9;
  --green: #16a34a;
  --green-bg: rgba(22,163,74,.1);
  --red: #dc2626;
  --red-bg: rgba(220,38,38,.1);
  --blue: #2563eb;
  --blue-bg: rgba(37,99,235,.1);
  --amber: #b45309;
  --amber-bg: rgba(180,83,9,.12);
  --orange: var(--amber);
  --orange-bg: var(--amber-bg);
  --grey: #64748b;
  --grey-bg: rgba(100,116,139,.12);
  --steel: #64748b;
  --steel-bg: rgba(100,116,139,.14);
  --text: #1e293b;
  --sub-text: #64748b;
  --muted: #6b7888;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 3px 10px rgba(0,0,0,.06);
  --shadow-lg: 0 6px 20px rgba(0,0,0,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ──────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sub-text); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Header ─────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-active) 100%);
  color: var(--hdr-fg);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 100;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.brand-icon { font-size: 24px; }
.brand-sub { font-size: 13px; opacity: .7; font-weight: 400; }

.header-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-link.active { background: var(--accent); color: #fff; }

/* Lista dispositivi nell'header: su desktop è nascosta (i device stanno già
   nella sidebar sinistra); torna visibile solo nel menu mobile a scomparsa. */
.nav-devices { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  background: rgba(255,255,255,.08);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.theme-toggle:hover { background: rgba(255,255,255,.16); }

.header-status {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: rgba(255,255,255,.06);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* ── Layout ──────────────────────────────────── */
.app-layout {
  display: flex;
  padding-top: 64px;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition), padding var(--transition);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sidebar-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sub-text);
  font-weight: 600;
}

.sidebar-toggle {
  border: none;
  background: var(--accent);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.sidebar-toggle:hover { background: var(--accent-hover); }

/* Stato collassato: resta una colonna stretta con il solo pulsante per riaprire */
.sidebar.collapsed {
  width: 44px;
  padding: 20px 0;
}
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .device-list { display: none; }
.sidebar.collapsed .sidebar-header { justify-content: center; margin-bottom: 0; }
.sidebar.collapsed .sidebar-toggle { margin: 0 auto; }

.device-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.device-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.device-item:hover { background: var(--accent-subtle); }

.dev-name { flex: 1; font-weight: 500; }

.main-content {
  flex: 1;
  min-width: 0;
  padding: 28px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Barra allarmi persistente ───────────────── */
/* Ticker compatto in testa a main-content: dimensione fissa (36px),
   contenuto che scorre/tronca, mai instabile di layout. */
.alarm-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  margin-bottom: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  font-size: 12px;
  overflow: hidden;
}

.alarm-ticker-title {
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  color: var(--sub-text);
  flex-shrink: 0;
}

.alarm-ticker-chips {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.alarm-ticker-chips::-webkit-scrollbar { display: none; }

.alarm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.alarm-chip .dot { width: 6px; height: 6px; }
.alarm-chip.fault, .alarm-chip.alarm { background: var(--red-bg); color: var(--red); }
.alarm-chip.warning { background: var(--amber-bg); color: var(--amber); }
.alarm-chip.info { background: var(--blue-bg); color: var(--blue); }

.alarm-ticker-link {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--accent);
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
}

.alarm-ticker-link:hover { text-decoration: underline; }

/* ── Dots ────────────────────────────────────── */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.dot-blue { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.dot-grey { background: var(--grey); }

/* ── Cards ───────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--card-border);
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.card-header .card-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ── Dashboard tag grid ──────────────────────── */
.tag-detail {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}

.tag-detail summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub-text);
  user-select: none;
}

.tag-detail summary:hover {
  color: var(--accent);
}

.tag-detail[open] summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.tag-detail .tag-grid {
  padding: 0 14px 14px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.tag-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.tag-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--accent);
}

.tag-card-name {
  font-size: 11px;
  color: var(--sub-text);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.tag-card-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tag-card-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1.2;
  transition: color var(--transition);
}

.tag-card-uom {
  font-size: 13px;
  color: var(--sub-text);
}

.tag-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--sub-text);
}

.tag-card-sparkline {
  margin-top: 8px;
  height: 28px;
  width: 100%;
}

.tag-card-sparkline canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
}

.tag-card.alarm {
  border-left: 4px solid var(--red);
}
.tag-card.alarm .tag-card-value { color: var(--red); }

.tag-card.bad {
  opacity: .55;
}

.tag-card-anomaly {
  margin-top: 6px;
  font-size: 11px;
  color: var(--red);
  font-weight: 700;
  padding: 3px 8px;
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  animation: pulse-anomaly 1s ease-in-out 3;
}

@keyframes pulse-anomaly {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tag-card-prediction {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  padding: 3px 8px;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
}

.tag-card-cmd-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.tag-card-cmd-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  touch-action: manipulation;
}

.tag-card-cmd-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.tag-card-cmd-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.tag-card-sp-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.tag-card-sp-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-family: var(--mono);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.tag-card-sp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.tag-card-sp-btn {
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition);
  touch-action: manipulation;
}

.tag-card-sp-btn:hover { background: var(--accent-hover); }
.tag-card-sp-btn:disabled { opacity: .6; cursor: wait; }

.tag-card-err {
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  background: var(--red-bg);
  border-radius: var(--radius-sm);
}

/* ── Piantina impianto (grid responsive) ────── */
.impianto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  .impianto-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .impianto-grid { grid-template-columns: 1fr; }
}

.impianto-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sub-text);
}

.impianto-mode-val {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.impianto-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Toggle vista Sinottico / Schede */
.impianto-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--card-bg);
}

.impianto-view-btn {
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--sub-text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}

.impianto-view-btn + .impianto-view-btn {
  border-left: 1px solid var(--border);
}

.impianto-view-btn:hover {
  color: var(--accent);
}

.impianto-view-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Toggle "Manuale" (attiva/termina manutenzione) */
.impianto-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.impianto-switch-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sub-text);
}

.impianto-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.impianto-switch-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: var(--radius-pill);
  transition: background var(--transition);
  flex-shrink: 0;
}

.impianto-switch-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.impianto-switch input:checked + .impianto-switch-slider {
  background: var(--blue);
}

.impianto-switch input:checked + .impianto-switch-slider::after {
  transform: translateX(20px);
}

.impianto-switch input:checked ~ .impianto-switch-label {
  color: var(--blue);
}

.impianto-temp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-temp {
  flex: 1;
  min-width: 90px;
  text-align: center;
}

.impianto-temp-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.impianto-temp-num {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--mono);
  margin-top: 2px;
}

.impianto-temp-arrow {
  color: var(--sub-text);
  font-size: 16px;
}

.impianto-stato-row {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-alarmi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.impianto-alarmi .impianto-panel-label { flex-shrink: 0; }
.impianto-alarmi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* ── Pannello comandi impianto (restyle) ─────── */
.impianto-panel { margin-top: 14px; }

.impianto-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: stretch;
}

.impianto-panel-cmds { min-width: 0; }

.impianto-panel-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sub-text);
  font-weight: 600;
}

/* Riga abilitazione generale (Avvio impianto): sempre visibile */
.impianto-avvio-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.impianto-avvio-row .impianto-unit-cmd { margin-top: 0; }
.impianto-avvio-row .impianto-cmd-btn { min-width: 56px; padding: 6px 10px; }

/* Card diagnostica */
.impianto-diag {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.impianto-diag-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sub-text);
  font-weight: 600;
  margin-bottom: 10px;
}
.impianto-diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: auto 0;
}
.impianto-diag-grid .impianto-val { min-width: 0; text-align: center; }
.impianto-diag-grid .impianto-val-num { font-size: 20px; }

/* ── Sinottico SVG ──────────────────────────── */
/* Il sinottico usa sempre una palette chiara, indipendentemente dal tema */
.impianto-synop {
  margin-top: 12px;
  padding: 4px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #f8fafc;
  overflow-x: auto;
}

.impianto-synop-svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

.impianto-synop .unit-name { fill: #1e293b; }
.impianto-synop .unit-sub { fill: #64748b; }
.impianto-synop .unit-pct { fill: var(--accent); }
.impianto-synop .unit-ore { fill: #64748b; }

/* Corpo unità: default spento, on = verde */
.impianto-synop .unit-body {
  fill: rgba(148,163,184,.16);
  stroke: #cbd5e1;
  stroke-width: 1.5;
  transition: fill var(--transition), stroke var(--transition);
}

.impianto-synop .unit-body.on {
  fill: rgba(22,163,74,.14);
  stroke: #16a34a;
}

/* Pictogrammi colorati delle unità: si "accendono" quando la macchina è attiva */
.impianto-synop .impianto-unit-svg:has(.unit-body.on) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(22,163,74,.45));
}

.impianto-synop .unit-picto {
  transition: filter var(--transition);
}

/* Icone unità (legacy) */
.impianto-synop .unit-icon {
  stroke: #64748b;
  transition: stroke var(--transition);
}

.impianto-synop .unit-icon.on { stroke: #16a34a; }

/* Badge allarme nell'angolo (visibile solo quando attivo) */
.impianto-synop .unit-alarm {
  display: none;
}

.impianto-synop .unit-alarm.on {
  display: inline;
  animation: impianto-blink 1s steps(2, start) infinite;
}

@keyframes impianto-blink {
  50% { opacity: 0; }
}

/* Testo "In servizio" (utenza) */
.impianto-synop .unit-txt-on {
  display: none;
  fill: #16a34a;
}

.impianto-synop .unit-txt-on.on { display: inline; }

/* Tubi: base sempre visibile, flusso animato solo a impianto acceso */
.impianto-synop .pipe-flow {
  opacity: 0;
  transition: opacity var(--transition);
}

.impianto-synop .impianto-pipes.on .pipe-flow {
  opacity: 1;
  animation: impianto-flow 1s linear infinite;
}

.impianto-synop .pipe-flow-hot { stroke-dasharray: 10 26; }
.impianto-synop .pipe-flow-cold { stroke-dasharray: 10 26; }

@keyframes impianto-flow {
  to { stroke-dashoffset: -36; }
}

/* Sensori / temperature */
.impianto-synop .impianto-sensor circle {
  transition: stroke var(--transition);
}

/* Misuratore di portata (turbina in linea) */
.impianto-synop .impianto-misuratore circle.meter-body {
  transition: stroke var(--transition), fill var(--transition);
}

.impianto-synop .sensor-v {
  font-family: var(--mono);
  fill: #1e293b;
}

.impianto-synop .impianto-legend text { fill: #64748b; }

/* ── Sinottici: tema dark (override) ──────────────────────
   I template SVG dei sinottici usano una palette chiara hardcoded
   (in linea con l'HMI storico). In tema dark li rimappiamo a toni
   scuri industriali: le unità restano neutre-grigie e si accendono
   solo verde/rosso/ambra secondo lo stato (ISA-101). */
[data-theme="dark"] .impianto-synop {
  background: #14181f;
  border-color: #232a36;
}

[data-theme="dark"] .impianto-synop stop[offset="0"],
[data-theme="dark"] .impianto-synop stop[offset="0%"] { stop-color: #14181f; }
[data-theme="dark"] .impianto-synop stop[offset="1"],
[data-theme="dark"] .impianto-synop stop[offset="100%"] { stop-color: #1a2129; }

[data-theme="dark"] .impianto-synop text { fill: #93a2b4; }
[data-theme="dark"] .impianto-synop .unit-name { fill: #dbe4f0; }
[data-theme="dark"] .impianto-synop .unit-sub,
[data-theme="dark"] .impianto-synop .unit-ore { fill: #93a2b4; }
[data-theme="dark"] .impianto-synop .unit-pct { fill: #4cb8e8; }
[data-theme="dark"] .impianto-synop .sensor-v,
[data-theme="dark"] .impianto-synop .sensor-t,
[data-theme="dark"] .impianto-synop .sensor-u,
[data-theme="dark"] .impianto-synop .px-value,
[data-theme="dark"] .impianto-synop .px-step-val,
[data-theme="dark"] .impianto-synop .dep-value,
[data-theme="dark"] .impianto-synop .dep-stato-val,
[data-theme="dark"] .impianto-synop .fl-value,
[data-theme="dark"] .impianto-synop .fl-step-val,
[data-theme="dark"] .impianto-synop .mv-speed { fill: #c8d6e6; }
[data-theme="dark"] .impianto-synop .unit-alarm { fill: #ff5d67; }
[data-theme="dark"] .impianto-synop .unit-txt-on { fill: #2fbf71; }
[data-theme="dark"] .impianto-synop .tank-pct { fill: #4cb8e8; }

[data-theme="dark"] .impianto-synop .unit-body {
  fill: rgba(148,163,184,.08);
  stroke: #39414f;
}
[data-theme="dark"] .impianto-synop .unit-body.on {
  fill: rgba(47,191,113,.16);
  stroke: #2fbf71;
}
[data-theme="dark"] .impianto-synop .unit-icon { stroke: #7e8da1; }
[data-theme="dark"] .impianto-synop .unit-icon.on { stroke: #2fbf71; }

[data-theme="dark"] .impianto-synop .tank-body {
  fill: #1d242f;
  stroke: #4b5a6c;
}
[data-theme="dark"] .impianto-synop .tank-fill {
  fill: rgba(34,180,230,.28);
  stroke: #3ab8e0;
}

[data-theme="dark"] .impianto-synop .dep-canale .canale-body {
  fill: rgba(148,163,184,.10);
  stroke: #4b5a6c;
}

[data-theme="dark"] .impianto-synop .dep-canale .canale-fill {
  fill: rgba(34,180,230,.30);
  stroke: #3ab8e0;
}

[data-theme="dark"] .impianto-synop .dep-canale .canale-arrow,
[data-theme="dark"] .impianto-synop .dep-canale .canale-bank { stroke: #7e8da1; }

[data-theme="dark"] .impianto-synop .dep-canale .canale-bank.on,
[data-theme="dark"] .impianto-synop .dep-canale .canale-arrow.on { stroke: #4cb8e8; }

[data-theme="dark"] .impianto-synop .fl-filter-body {
  fill: #1d242f;
  stroke: #4b5a6c;
}
[data-theme="dark"] .impianto-synop .fl-filter-fill {
  fill: rgba(34,180,230,.28);
  stroke: #3ab8e0;
}
[data-theme="dark"] .impianto-synop .fl-filter-mesh path { stroke: #39414f; }
[data-theme="dark"] .impianto-synop .fl-sporcizia { fill: #d97706; }

[data-theme="dark"] .impianto-synop .dep-valvola .valve-body,
[data-theme="dark"] .impianto-synop .fl-valvola .valve-body { fill: #39414f; stroke: #4b5a6c; }
[data-theme="dark"] .impianto-synop .dep-valvola.on .valve-body,
[data-theme="dark"] .impianto-synop .fl-valvola.on .valve-body { fill: rgba(47,191,113,.22); stroke: #2fbf71; }

[data-theme="dark"] .impianto-synop .dep-semaforo rect[fill="#1e293b"] { fill: #2a313d; }
[data-theme="dark"] .impianto-synop .impianto-legend rect { fill: #1c232e; stroke: #39414f; }

/* Rimappatura attributi colori dal template chiaro -> scuro */
[data-theme="dark"] .impianto-synop [fill="#64748b"] { fill: #93a2b4; }
[data-theme="dark"] .impianto-synop [fill="#475569"] { fill: #a9b8c7; }
[data-theme="dark"] .impianto-synop [fill="#94a3b8"] { fill: #5b6a7c; }
[data-theme="dark"] .impianto-synop [fill="#cbd5e1"] { fill: #39414f; }
[data-theme="dark"] .impianto-synop [fill="#e2e8f0"] { fill: #252c38; }
[data-theme="dark"] .impianto-synop [fill="#f1f5f9"] { fill: #1d242f; }
[data-theme="dark"] .impianto-synop [fill="#f8fafc"] { fill: #14181f; }
[data-theme="dark"] .impianto-synop [fill="#fff"],
[data-theme="dark"] .impianto-synop [fill="#ffffff"] { fill: #1c232e; }
[data-theme="dark"] .impianto-synop [fill="#dcfce7"] { fill: #1c3b2d; }
[data-theme="dark"] .impianto-synop [fill="#bbf7d0"] { fill: #1e3c2f; }
[data-theme="dark"] .impianto-synop [fill="#fee2e2"] { fill: #3d2226; }
[data-theme="dark"] .impianto-synop [fill="#0369a1"],
[data-theme="dark"] .impianto-synop [fill="#0e7490"] { fill: #4cb8e8; }
[data-theme="dark"] .impianto-synop [fill="#e0e7ff"] { fill: #1e2a4d; }
[data-theme="dark"] .impianto-synop [fill="#c7d2fe"] { fill: #2c3e72; }
[data-theme="dark"] .impianto-synop [fill="#dbeafe"] { fill: #16243f; }
[data-theme="dark"] .impianto-synop [fill="#ccfbf1"] { fill: #0f3d38; }
[data-theme="dark"] .impianto-synop [fill="#99f6e4"] { fill: #155e5a; }
[data-theme="dark"] .impianto-synop [fill="#334155"] { fill: #405066; }
[data-theme="dark"] .impianto-synop [fill="#0284c7"] { fill: #3f9fed; }
[data-theme="dark"] .impianto-synop [fill="#e0f2fe"] { fill: #1d3550; }
[data-theme="dark"] .impianto-synop [fill="#dc2626"] { fill: #ff5d67; }
[data-theme="dark"] .impianto-synop [fill="#ef4444"] { fill: #ff6b6b; }
[data-theme="dark"] .impianto-synop [fill="#16a34a"] { fill: #2fbf71; }
[data-theme="dark"] .impianto-synop [fill="#15803d"] { fill: #4fd087; }
[data-theme="dark"] .impianto-synop [fill="#2f7d7d"] { fill: #35b3b3; }
[data-theme="dark"] .impianto-synop [fill="#e04f5f"] { fill: #f26b80; }
[data-theme="dark"] .impianto-synop [fill="#b45309"] { fill: #d97706; }

[data-theme="dark"] .impianto-synop [stroke="#64748b"] { stroke: #7e8da1; }
[data-theme="dark"] .impianto-synop [stroke="#94a3b8"] { stroke: #5b6a7c; }
[data-theme="dark"] .impianto-synop [stroke="#cbd5e1"] { stroke: #39414f; }
[data-theme="dark"] .impianto-synop [stroke="#e2e8f0"] { stroke: #39414f; }
[data-theme="dark"] .impianto-synop [stroke="#1e293b"] { stroke: #3b4554; }
[data-theme="dark"] .impianto-synop [stroke="#0284c7"] { stroke: #3f9fed; }
[data-theme="dark"] .impianto-synop [stroke="#dc2626"] { stroke: #ff5d67; }
[data-theme="dark"] .impianto-synop [stroke="#ef4444"] { stroke: #ff6b6b; }
[data-theme="dark"] .impianto-synop [stroke="#16a34a"] { stroke: #2fbf71; }
[data-theme="dark"] .impianto-synop [stroke="#2f7d7d"] { stroke: #35b3b3; }
[data-theme="dark"] .impianto-synop [stroke="#e04f5f"] { stroke: #f26b80; }
[data-theme="dark"] .impianto-synop [stroke="#6366f1"] { stroke: #8a95ff; }
[data-theme="dark"] .impianto-synop [stroke="#3b82f6"] { stroke: #58a6ff; }
[data-theme="dark"] .impianto-synop [stroke="#f59e0b"],
[data-theme="dark"] .impianto-synop [stroke="#d97706"] { stroke: #f5b04c; }

/* ── Sinottico Depuratore ───────────────────── */
/* Vasche: corpo sempre visibile, riempimento proporzionale al livello */
.impianto-synop .tank-body {
  fill: #f1f5f9;
  stroke: #94a3b8;
  stroke-width: 2;
}

.impianto-synop .tank-fill {
  fill: rgba(34,211,238,.45);
  stroke: #06b6d4;
  stroke-width: 1;
  transition: height .3s cubic-bezier(.4,0,.2,1), y .3s cubic-bezier(.4,0,.2,1);
}

.impianto-synop .tank-pct {
  fill: #0369a1;
  font-family: var(--mono);
  font-weight: 700;
}

/* Canale / corso d'acqua a cielo aperto (fiume o canale di bonifica):
   banda bassa e larga, acqua trattenuta dalle sponde, freccia di deflusso. */
.impianto-synop .dep-canale .canale-body {
  fill: rgba(224,242,254,.75);
  stroke: #94a3b8;
  stroke-width: 2;
}

.impianto-synop .dep-canale .canale-fill {
  fill: rgba(34,211,238,.55);
  stroke: #06b6d4;
  stroke-width: 1;
  transition: height .3s cubic-bezier(.4,0,.2,1), y .3s cubic-bezier(.4,0,.2,1);
}

.impianto-synop .dep-canale .canale-arrow {
  stroke: #0369a1;
  stroke-width: 2.5;
}

.impianto-synop .dep-canale .canale-bank {
  stroke: #94a3b8;
  stroke-width: 2;
}

.impianto-synop .dep-canale .canale-bank.on,
.impianto-synop .dep-canale .canale-arrow.on { stroke: #0284c7; }

/* Valvola ingresso: spenta = grigia, aperta = verde */
.impianto-synop .dep-valvola .valve-body { fill: #cbd5e1; stroke: #64748b; }
.impianto-synop .dep-valvola.on .valve-body { fill: #bbf7d0; stroke: #16a34a; }

/* Semaforo: 2 lampade legate a Luce_Verde / Luce_Rossa */
.impianto-synop .dep-lamp { fill: #334155; stroke: #1e293b; stroke-width: 2; }
.impianto-synop .dep-lamp-verde.on { fill: #22c55e; stroke: #16a34a; filter: drop-shadow(0 0 8px rgba(34,197,94,.8)); }
.impianto-synop .dep-lamp-rossa.on { fill: #ef4444; stroke: #dc2626; filter: drop-shadow(0 0 8px rgba(239,68,68,.8)); }

/* Readout numerici / stato (testo SVG del sinottico) */
.impianto-synop .dep-value,
.impianto-synop .dep-stato-val {
  fill: #1e293b;
  font-family: var(--mono);
}

/* Riga comandi ON/OFF pompe + valvola (sotto il sinottico) */
.impianto-dep-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-dep-cmd {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}

.impianto-dep-cmd-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sub-text);
  white-space: nowrap;
}

.impianto-dep-cmd .impianto-cmd { display: flex; gap: 6px; }

.impianto-dep-cmd .tag-card-cmd-btn {
  flex: 0 0 auto;
  min-width: 52px;
}

/* ── Depuratore ISA-101 (pilota Fase 1 restyling): grigio-quieto ────
   Con la palette al var(--steel) lo stato NORMALE/MARCIA di ogni unità è
   grigio-acciaio e NON più colorato; il colore è riservato alle anomalie:
   blu=manuale/override, ambra=manutenzione, rosso=guasto (l'unico che
   lampeggia e risalta). Regole scoped su .impianto-depuratore per non
   toccare Centrale/Pixsys/Filtro (che continuano a usare i colori storici
   via le regole .impianto-synop generiche). */

.impianto-depuratore .impianto-synop .unit-body[data-stato] {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .unit-body.on[data-stato="normale"] {
  fill: rgba(148,163,184,.24);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .unit-body.on[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .unit-body.on[data-stato="manutenzione"] {
  fill: var(--amber-bg);
  stroke: var(--amber);
}
.impianto-depuratore .impianto-synop .unit-body.on[data-stato="guasto"] {
  fill: var(--red-bg);
  stroke: var(--red);
  animation: impianto-blink 1s steps(2, start) infinite;
}
.impianto-depuratore .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="normale"]) .unit-picto {
  filter: drop-shadow(0 0 5px rgba(148,163,184,.45));
}
.impianto-depuratore .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manuale"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(74,163,245,.55));
}
.impianto-depuratore .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manutenzione"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(240,184,61,.55));
}
.impianto-depuratore .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="guasto"]) .unit-picto {
  filter: drop-shadow(0 0 7px rgba(244,82,92,.7)) saturate(1.2);
}

/* Valvola ingresso: spenta = grigio, aperta = acciaio (non più verde) */
.impianto-depuratore .impianto-synop .dep-valvola[data-stato] .valve-body {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .dep-valvola.on[data-stato="normale"] .valve-body {
  fill: rgba(148,163,184,.30);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .dep-valvola.on[data-stato="guasto"] .valve-body {
  fill: var(--red-bg);
  stroke: var(--red);
  animation: impianto-blink 1s steps(2, start) infinite;
}

/* Vasche: livello come valore di processo, acciaio quieto (rosso = guasto) */
.impianto-depuratore .impianto-synop .tank-fill[data-stato="normale"] {
  fill: rgba(148,163,184,.40);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .tank-fill[data-stato="guasto"] {
  fill: var(--red-bg);
  stroke: var(--red);
}
.impianto-depuratore .impianto-synop .tank-pct[data-stato] {
  fill: var(--steel);
}

/* Readout: anello sensore neutro (il kicker testuale resta caratterizzante) */
.impianto-depuratore .impianto-synop .impianto-sensor[data-stato="normale"] circle {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .impianto-sensor[data-stato="guasto"] circle {
  stroke: var(--red);
}

/* Misuratore di portata (bolla FT/FQ): anello neutro a riposo, colorato
   solo su guasto/manuale come le altre bolle (il tag identificativo resta
   caratterizzante, stesso trattamento del kicker dei readout sopra). */
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="normale"] circle.meter-body {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="normale"] .meter-stub {
  stroke: var(--steel);
}
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="guasto"] circle.meter-body {
  stroke: var(--red);
}
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="guasto"] .meter-stub {
  stroke: var(--red);
}

/* Semaforo: verde "Normale" non è più uno stato permanente acceso —
   diventa acciaio quieto; la lampada rossa (fermo/allarme) resta l'unico
   elemento rosso del sinottico e lampeggia. */
.impianto-depuratore .impianto-synop .dep-semaforo[data-stato="normale"] .dep-lamp-verde.on {
  fill: #94a3b8;
  stroke: #64748b;
  filter: drop-shadow(0 0 8px rgba(148,163,184,.55));
}
.impianto-depuratore .impianto-synop .dep-semaforo[data-stato="normale"] .dep-lamp-rossa.on {
  fill: var(--red);
  stroke: var(--red);
  filter: drop-shadow(0 0 8px rgba(244,82,92,.85));
  animation: impianto-blink 1s steps(2, start) infinite;
}

/* Modo manuale (blu): stesso linguaggio delle unità — override operatore
   sugli elementi di processo (nella palette ISA-101 il blu è riservato
   al manuale; solo il guasto rosso resta più "forte"). */
.impianto-depuratore .impianto-synop .dep-valvola.on[data-stato="manuale"] .valve-body {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .tank-fill[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .tank-pct[data-stato="manuale"] {
  fill: var(--blue);
}
.impianto-depuratore .impianto-synop .impianto-sensor[data-stato="manuale"] circle {
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="manuale"] circle.meter-body {
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .impianto-misuratore[data-stato="manuale"] .meter-stub {
  stroke: var(--blue);
}
.impianto-depuratore .impianto-synop .dep-semaforo[data-stato="manuale"] .dep-lamp-verde.on {
  fill: var(--blue);
  stroke: var(--blue);
  filter: drop-shadow(0 0 8px rgba(74,163,245,.55));
}

/* Tubi in acciaio (niente pastello azzurro sul flusso) */
.impianto-depuratore .impianto-synop .dep-pipes .pipe {
  stroke: #94a3b8;
}
.impianto-depuratore .impianto-synop .dep-pipes .pipe-flow {
  stroke: var(--steel);
}

/* ── Centrale frigorifera ISA-101 (Fase 2): grigio-quieto ──────────
   Stesso linguaggio del pilota depuratore: stato NORMALE/MARCIA a
   grigio-acciaio, colore riservato alle anomalie (blu=manuale,
   ambra=manutenzione, rosso=guasto). I tubi di processo rimangono
   colorati (ritorno caldo rosso / mandata fredda blu): sono semantici
   di processo, non di stato. Scoped su .impianto-centrale. */

.impianto-centrale .impianto-synop .unit-body[data-stato] {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-centrale .impianto-synop .unit-body.on[data-stato="normale"] {
  fill: rgba(148,163,184,.24);
  stroke: var(--steel);
}
.impianto-centrale .impianto-synop .unit-body.on[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-centrale .impianto-synop .unit-body.on[data-stato="manutenzione"] {
  fill: var(--amber-bg);
  stroke: var(--amber);
}
.impianto-centrale .impianto-synop .unit-body.on[data-stato="guasto"] {
  fill: var(--red-bg);
  stroke: var(--red);
  animation: impianto-blink 1s steps(2, start) infinite;
}
.impianto-centrale .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="normale"]) .unit-picto {
  filter: drop-shadow(0 0 5px rgba(148,163,184,.45));
}
.impianto-centrale .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manuale"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(74,163,245,.55));
}
.impianto-centrale .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manutenzione"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(240,184,61,.55));
}
.impianto-centrale .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="guasto"]) .unit-picto {
  filter: drop-shadow(0 0 7px rgba(244,82,92,.7)) saturate(1.2);
}

/* Readout: anello sensore neutro (il kicker testuale resta colorato) */
.impianto-centrale .impianto-synop .impianto-sensor[data-stato="normale"] circle {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-centrale .impianto-synop .impianto-sensor[data-stato="guasto"] circle {
  stroke: var(--red);
}

/* Riga comandi macchine (D207) dentro i comandi manuali */
.impianto-cmd-macchine {
  margin-top: 4px;
}

.impianto-cmd-macchine .impianto-unit-cmd {
  margin-top: 0;
  align-items: center;
}

.impianto-cmd-macchina {
  font-size: 11px;
  font-weight: 700;
  color: var(--sub-text);
  white-space: nowrap;
}

.impianto-cmd-macchine .impianto-cmd-btn {
  max-width: 56px;
}

/* ── Sinottico Pixsys (ETD1644-AD) ───────────── */
.impianto-synop .px-value,
.impianto-synop .px-step-val {
  fill: #1e293b;
  font-family: var(--mono);
}

.impianto-synop .px-diag { fill: #64748b; }

/* Pulsanti ON/OFF del blocco comandi "Pompa" (bitmask DigitalOutputs) */
.impianto-pixsys .impianto-unit-cmd {
  display: flex;
  gap: 6px;
}

.impianto-pixsys .impianto-cmd-btn {
  max-width: 56px;
}

/* Badge allarme mandata alta: nascosto, appare (lampeggiante) sopra soglia */
.impianto-synop .px-alarm[data-as="alarm-high"] {
  display: none;
}

.impianto-synop .px-alarm[data-as="alarm-high"].on {
  display: inline;
  animation: impianto-blink 1s steps(2, start) infinite;
}

/* Riga comandi Pixsys (pompa + slider valvola) */
.impianto-pixsys .px-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-pixsys .px-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
}

.impianto-pixsys .px-cmd-label {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--sub-text);
   white-space: nowrap;
}

/* Riga comandi Hoppe (pompa) */
/* Hoppe panels (B) */
.impianto-hoppe .hoppe-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .impianto-hoppe .hoppe-panels {
    grid-template-columns: 1fr;
  }
}
.impianto-hoppe .hoppe-panel {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.impianto-hoppe .hoppe-panel-title {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.impianto-hoppe .hoppe-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text);
}
.impianto-hoppe .hoppe-panel-row:last-child {
  border-bottom: none;
}
.impianto-hoppe .hoppe-panel-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.impianto-hoppe .impianto-badge[data-off]:not(.on) { font-size: 0; }
.impianto-hoppe .impianto-badge[data-off]:not(.on)::before { content: attr(data-off); font-size: 11px; color: var(--green); }
.impianto-hoppe .hoppe-panel-note { margin-top: 12px; font-size: 12px; color: var(--sub-text, #94a3b8); font-style: italic; }

.impianto-pixsys .px-cmd .impianto-sp-row {
  align-items: center;
  gap: 10px;
}

/* ── Pixsys ISA-101 (Fase 2): grigio-quieto ─────────────────────
   Stesso linguaggio del depuratore: stato NORMALE/MARCIA in acciaio
   grigio, colore riservato alle anomalie. Scoped su .impianto-pixsys. */
.impianto-pixsys .impianto-synop .unit-body[data-stato] {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-pixsys .impianto-synop .unit-body.on[data-stato="normale"] {
  fill: rgba(148,163,184,.24);
  stroke: var(--steel);
}
.impianto-pixsys .impianto-synop .unit-body.on[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-pixsys .impianto-synop .unit-body.on[data-stato="manutenzione"] {
  fill: var(--amber-bg);
  stroke: var(--amber);
}
.impianto-pixsys .impianto-synop .unit-body.on[data-stato="guasto"] {
  fill: var(--red-bg);
  stroke: var(--red);
  animation: impianto-blink 1s steps(2, start) infinite;
}
.impianto-pixsys .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="normale"]) .unit-picto {
  filter: drop-shadow(0 0 5px rgba(148,163,184,.45));
}
.impianto-pixsys .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manuale"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(74,163,245,.55));
}
.impianto-pixsys .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manutenzione"]) .unit-picto {
  filter: drop-shadow(0 0 6px rgba(240,184,61,.55));
}
.impianto-pixsys .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="guasto"]) .unit-picto {
  filter: drop-shadow(0 0 7px rgba(244,82,92,.7)) saturate(1.2);
}

/* Readout: anello sensore neutro (il kicker testuale resta colorato) */
.impianto-pixsys .impianto-synop .impianto-sensor[data-stato="normale"] circle {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-pixsys .impianto-synop .impianto-sensor[data-stato="guasto"] circle {
  stroke: var(--red);
}
.impianto-pixsys .impianto-synop .impianto-sensor[data-stato="manuale"] circle {
  stroke: var(--blue);
}

/* Misuratore di portata (turbina in linea): anello neutro a riposo,
   colorato solo su stato manuale/guasto come le altre bolle */
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="normale"] circle.meter-body {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="normale"] .meter-stub {
  stroke: var(--steel);
}
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="guasto"] circle.meter-body {
  stroke: var(--red);
}
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="guasto"] .meter-stub {
  stroke: var(--red);
}
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="manuale"] circle.meter-body {
  stroke: var(--blue);
}
.impianto-pixsys .impianto-synop .impianto-misuratore[data-stato="manuale"] .meter-stub {
  stroke: var(--blue);
}

/* Tubi in acciaio (niente pastello azzurro sul flusso) */
.impianto-pixsys .impianto-synop .px-pipes .pipe-flow {
  stroke: var(--steel);
}

/* ── Sinottico Lavaggio filtro ──────────────── */
.impianto-synop .fl-value,
.impianto-synop .fl-step-val {
  fill: #1e293b;
  font-family: var(--mono);
}

.impianto-synop .fl-sporcizia {
  fill: #b45309;
  font-family: var(--mono);
}

/* Timeline step: casella attiva evidenziata */
.impianto-synop .fl-step [data-step-label] rect {
  transition: fill var(--transition), stroke var(--transition);
}

.impianto-synop .fl-step [data-step-label].on rect {
  fill: rgba(22,163,74,.14);
  stroke: #16a34a;
}

.impianto-synop .fl-step [data-step-label].on text {
  fill: #16a34a;
}

/* Corpo filtro */
.impianto-synop .fl-filter-body {
  fill: #f1f5f9;
  stroke: #94a3b8;
  stroke-width: 2;
}

.impianto-synop .fl-filter-fill {
  fill: rgba(34,211,238,.4);
  stroke: #06b6d4;
  stroke-width: 1;
  transition: height .3s cubic-bezier(.4,0,.2,1), y .3s cubic-bezier(.4,0,.2,1);
}

.impianto-synop .fl-filter-mesh path {
  stroke: #cbd5e1;
  stroke-width: 3;
}

/* Valvole filtro: spenta = grigia, aperta = verde */
.impianto-synop .fl-valvola .valve-body { fill: #cbd5e1; stroke: #64748b; }
.impianto-synop .fl-valvola.on .valve-body { fill: #bbf7d0; stroke: #16a34a; }

/* Badge allarme filtro intasato: nascosto, appare quando attivo */
.impianto-synop .fl-alarm-badge {
  display: none;
}

.impianto-synop .fl-alarm-badge.on {
  display: inline;
  animation: impianto-blink 1s steps(2, start) infinite;
}

/* Badge "lavaggio in corso": nascosto quando la sequenza non è attiva */
.impianto-synop .fl-running {
  display: none;
}

.impianto-synop .fl-running.on {
  display: inline;
}

/* Badge "ΔP sopra soglia": nascosto sotto soglia */
.impianto-synop .fl-delta-alarm {
  display: none;
}

.impianto-synop .fl-delta-alarm.on {
  display: inline;
}

/* Riga comandi lavaggio filtro (AVVIA / RESET) */
.impianto-filtro .fl-cmds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-filtro .fl-cmd {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}

.impianto-filtro .fl-cmd-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sub-text);
  white-space: nowrap;
}

.impianto-filtro .fl-cmd .tag-card-cmd-btn {
  flex: 0 0 auto;
  min-width: 72px;
}

/* ── Lavaggio filtro ISA-101 (Fase 2): grigio-quieto ──────────────
    Stesso linguaggio del depuratore: valvole e pompa in acciaio a riposo,
    colore riservato alle anomalie (intasato / ΔP sopra soglia restano
    rossi e lampeggianti). Scoped su .impianto-filtro. */
.impianto-filtro .impianto-synop .unit-body[data-stato] {
   fill: var(--steel-bg);
   stroke: var(--steel);
}
.impianto-filtro .impianto-synop .unit-body.on[data-stato="normale"] {
   fill: rgba(148,163,184,.24);
   stroke: var(--steel);
}
.impianto-filtro .impianto-synop .unit-body.on[data-stato="manuale"] {
   fill: var(--blue-bg);
   stroke: var(--blue);
}
.impianto-filtro .impianto-synop .unit-body.on[data-stato="manutenzione"] {
   fill: var(--amber-bg);
   stroke: var(--amber);
}
.impianto-filtro .impianto-synop .unit-body.on[data-stato="guasto"] {
   fill: var(--red-bg);
   stroke: var(--red);
   animation: impianto-blink 1s steps(2, start) infinite;
}
.impianto-filtro .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="normale"]) .unit-picto {
   filter: drop-shadow(0 0 5px rgba(148,163,184,.45));
}
.impianto-filtro .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manuale"]) .unit-picto {
   filter: drop-shadow(0 0 6px rgba(74,163,245,.55));
}
.impianto-filtro .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="manutenzione"]) .unit-picto {
   filter: drop-shadow(0 0 6px rgba(240,184,61,.55));
}
.impianto-filtro .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="guasto"]) .unit-picto {
   filter: drop-shadow(0 0 7px rgba(244,82,92,.7)) saturate(1.2);
}

/* Valvole filtro: spenta = grigio, aperta = acciaio (non più verde) */
.impianto-filtro .impianto-synop .fl-valvola[data-stato] .valve-body {
   fill: var(--steel-bg);
   stroke: var(--steel);
}
.impianto-filtro .impianto-synop .fl-valvola.on[data-stato="normale"] .valve-body {
   fill: rgba(148,163,184,.30);
   stroke: var(--steel);
}
.impianto-filtro .impianto-synop .fl-valvola.on[data-stato="guasto"] .valve-body {
   fill: var(--red-bg);
   stroke: var(--red);
   animation: impianto-blink 1s steps(2, start) infinite;
}

/* Readout: anello sensore neutro (il kicker testuale resta colorato) */
.impianto-filtro .impianto-synop .impianto-sensor[data-stato="normale"] circle {
   fill: var(--card-bg);
   stroke: var(--steel);
}
.impianto-filtro .impianto-synop .impianto-sensor[data-stato="guasto"] circle {
   stroke: var(--red);
}

/* ===== Teleassistenza Panel Styling ===== */
.teleassistenza-panel {
  /* Apply dashboard card styling */
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  transition: all var(--transition);
}

.teleassistenza-panel:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border);
}

.teleassistenza-panel .card-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.teleassistenza-panel .card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ta-status {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}

.ta-channel-state {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.ta-channel-state.attivo {
  background: var(--green-bg);
  color: var(--green);
}

.ta-channel-state.non-attivo {
  background: var(--grey-bg);
  color: var(--grey);
}

.ta-instructions {
  margin-bottom: 16px;
}

.ta-instruction-row {
  display: flex;
  margin-bottom: 12px;
  gap: 12px;
}

.ta-label {
  font-size: 11px;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  min-width: 80px;
  flex-shrink: 0;
}

.ta-value {
  flex: 1;
  font-size: 11px;
  color: var(--text);
}

.ta-value code {
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--mono);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  display: block;
}

.ta-registry {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}

.ta-registry .card-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sub-text);
  margin-bottom: 12px;
}

.ta-access-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.ta-access-table th,
.ta-access-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}

.ta-access-table th {
  background: var(--card-bg);
  font-weight: 600;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ta-access-table tbody tr:hover {
  background: var(--accent-subtle);
}

.ta-empty {
  text-align: center;
  color: var(--sub-text);
  font-style: italic;
  padding: 16px;
}

.ta-note {
  font-size: 11px;
  color: var(--sub-text);
  font-style: italic;
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}

/* Livello sporcizia: valore di processo in acciaio quieto */
.impianto-filtro .impianto-synop .fl-filter-fill[data-stato="normale"] {
  fill: rgba(148,163,184,.4);
  stroke: var(--steel);
}

/* Modo manuale (blu): override operatore su valvola/readout/filtro */
.impianto-filtro .impianto-synop .fl-valvola.on[data-stato="manuale"] .valve-body {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-filtro .impianto-synop .impianto-sensor[data-stato="manuale"] circle {
  stroke: var(--blue);
}
.impianto-filtro .impianto-synop .fl-filter-fill[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}

/* Tubi in acciaio (niente pastello azzurro/ambra sul flusso) */
.impianto-filtro .impianto-synop .fl-pipes-main .pipe-flow,
.impianto-filtro .impianto-synop .fl-pipes-drain .pipe-flow,
.impianto-filtro .impianto-synop .fl-pipes-wash .pipe-flow {
  stroke: var(--steel);
}

/* Step timeline: il passo corrente è acciaio, non più verde */
.impianto-filtro .impianto-synop .fl-step [data-step-label].on rect {
  fill: rgba(148,163,184,.24);
  stroke: var(--steel);
}
.impianto-filtro .impianto-synop .fl-step [data-step-label].on text {
  fill: var(--steel);
}

/* Badge "lavaggio in corso": acciaio quieto (stato normale, non anomalia) */
.impianto-filtro .impianto-synop .fl-running.on rect {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-filtro .impianto-synop .fl-running.on circle {
  fill: var(--steel);
}

/* ── S.C.E. stato macchina ─────────────────────────────────────────
   Colori di stato su TUTTI gli oggetti: unità in marcia (stato normale
   + on) = verde, a riposo = acciaio. Il blu/ambra/rosso restano per
   modo manuale / manutenzione / guasto. I glifi reindirizzano --steel
   su --green così anche i pictogrammi si accendono quando la macchina
   gira. Eccezione: i tubi mandata fredda / ritorno caldo restano
   colorati perché semantici di processo. */
.impianto-sce .impianto-synop .unit-body[data-stato] {
  fill: var(--steel-bg);
  stroke: var(--steel);
}
.impianto-sce .impianto-synop .unit-body.on[data-stato="normale"] {
  fill: var(--green-bg);
  stroke: var(--green);
}
.impianto-sce .impianto-synop .impianto-unit-svg:has(.unit-body.on[data-stato="normale"]) .unit-picto {
  --steel: var(--green);
  --steel-bg: var(--green-bg);
}
.impianto-sce .impianto-synop [data-mode="marcia"] {
  fill: #334155;
  transition: fill var(--transition);
}
.impianto-sce .impianto-synop [data-mode="marcia"].on {
  fill: var(--green);
}
.impianto-sce .impianto-synop .unit-body.on[data-stato="manuale"] {
  fill: var(--blue-bg);
  stroke: var(--blue);
}
.impianto-sce .impianto-synop .unit-body.on[data-stato="manutenzione"] {
  fill: var(--amber-bg);
  stroke: var(--amber);
}
.impianto-sce .impianto-synop .unit-body.on[data-stato="guasto"] {
  fill: var(--red-bg);
  stroke: var(--red);
  animation: impianto-blink 1s steps(2, start) infinite;
}

/* Anello readout in acciaio a riposo (il kicker testuale resta colorato) */
.impianto-sce .impianto-synop .impianto-sensor[data-stato="normale"] circle {
  fill: var(--card-bg);
  stroke: var(--steel);
}
.impianto-sce .impianto-synop .impianto-sensor[data-stato="guasto"] circle {
  stroke: var(--red);
}
.impianto-sce .impianto-synop .impianto-sensor[data-stato="manuale"] circle {
  stroke: var(--blue);
}

.impianto-setpoint-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-unit {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
  transition: all var(--transition);
}

.impianto-unit:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.impianto-unit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.impianto-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--sub-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition);
}

.impianto-icon.on { stroke: var(--green); }

.impianto-unit-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.impianto-unit-vals {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.impianto-val {
  min-width: 90px;
}

.impianto-val-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}

.impianto-val-num {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1.1;
}

.impianto-uom {
  font-size: 12px;
  font-weight: 500;
  color: var(--sub-text);
  font-family: var(--font);
}

.impianto-val-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0 2px;
}

.impianto-bar-fill {
  height: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 4px;
  transition: height .3s cubic-bezier(.4,0,.2,1);
}

.impianto-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.impianto-badge {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--border);
  color: var(--sub-text);
  transition: all var(--transition);
}

.impianto-badge.on.green { background: var(--green-bg); color: var(--green); }
.impianto-badge.on.blue { background: var(--blue-bg); color: var(--blue); }
.impianto-badge.on.red { background: var(--red-bg); color: var(--red); }
.impianto-badge.on.orange { background: var(--amber-bg); color: var(--amber); }
.impianto-badge.on.grey { background: var(--grey-bg); color: var(--grey); }

.impianto-cmd {
  display: flex;
  gap: 6px;
}

.impianto-cmd-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  touch-action: manipulation;
}

.impianto-cmd-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.impianto-cmd-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.impianto-cmd-btn.on {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-bg);
}

/* Comandi ON/OFF per unità: visibili solo a modo manuale attivo */
.impianto-unit-cmd {
  display: none;
  gap: 6px;
  margin-top: 10px;
}

.modo-manuale-on .impianto-unit-cmd {
  display: flex;
}

/* Comandi "master" (es. Avvio impianto): visibili SEMPRE, anche in auto */
.impianto-unit-cmd.always {
  display: flex;
}

.impianto-unit-cmd .impianto-cmd-btn {
  flex: 1;
  padding: 6px 8px;
  font-weight: 700;
}

.impianto-unit-cmd .impianto-cmd-btn.on {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-bg);
}

.impianto-cmd-manuali {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.impianto-cmd-manuali-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.impianto-cmd-manuali-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.impianto-cmd-manuali-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.impianto-cmd-manuali-row .impianto-sp-row {
  flex: 1 1 240px;
  margin-top: 8px;
}

.impianto-cmd-manuali-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.impianto-err {
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  background: var(--red-bg);
  border-radius: var(--radius-sm);
}

.impianto-sp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.impianto-sp-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.impianto-sp-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-family: var(--mono);
  -moz-appearance: textfield;
}

.impianto-sp-input::-webkit-inner-spin-button,
.impianto-sp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.impianto-sp-input:focus {
  outline: none;
  border-color: var(--accent);
}

.impianto-sp-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  touch-action: manipulation;
}

.impianto-sp-btn:hover {
  background: var(--accent);
  color: #fff;
}

.impianto-sp-btn:disabled {
  opacity: .6;
  cursor: wait;
}

.impianto-sp-btn.ok {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* Stepper setpoint (+/-) */
.impianto-step {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  touch-action: manipulation;
  flex-shrink: 0;
}

.impianto-step:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.impianto-step:disabled {
  opacity: .6;
  cursor: wait;
}

.impianto-step.ok {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-bg);
}

.impianto-sp-row .impianto-sp-input {
  flex: 0 0 72px;
  width: 72px;
}

/* Slider regolazioni manuali */
.impianto-range {
  flex: 1;
  min-width: 120px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.impianto-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform var(--transition);
}

.impianto-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

.impianto-range.ok {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-bg);
}

.impianto-range-val {
  min-width: 40px;
  text-align: right;
  font-family: var(--mono);
  font-weight: 600;
}

/* In modo automatico i comandi manuali sono nascosti */
.impianto-cmd-manuali .impianto-range,
.impianto-cmd-manuali .impianto-sp-row {
  opacity: 1;
}

.impianto-cmd-manuali:not(.attivo) .impianto-range,
.impianto-cmd-manuali:not(.attivo) .impianto-sp-row {
  pointer-events: none;
  opacity: .45;
}

/* ── Tables ──────────────────────────────────── */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data-table th {
  background: var(--sidebar);
  color: var(--hdr-fg);
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

table.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table tr:nth-child(even) td {
  background: var(--row-even);
}

table.data-table tbody tr:hover td {
  background: var(--accent-subtle);
}

/* ── Badges ──────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.badge-red { background: var(--red-bg); color: var(--red); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-amber, .badge-orange { background: var(--amber-bg); color: var(--amber); }
.badge-grey { background: var(--grey-bg); color: var(--grey); }

.badge-red.hidden { display: none; }

.muted { color: var(--muted, var(--sub-text)); }

.hidden { display: none !important; }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  touch-action: manipulation;
}

.btn:hover { opacity: .9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 2px 8px rgba(11,114,133,.35); }
.btn-secondary { background: var(--sidebar); color: var(--hdr-fg); }
.btn-secondary:hover { background: var(--sidebar-active); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { box-shadow: 0 2px 8px rgba(220,38,38,.35); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* ── Forms ───────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  background: var(--card-bg);
  color: var(--text);
  transition: all var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.filter-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pill {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text);
}

.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Alarm severity row colors ───────────────── */
.alarm-row-fault td { background: var(--red-bg) !important; }
.alarm-row-alarm td { background: var(--red-bg) !important; }
.alarm-row-warning td { background: var(--amber-bg) !important; }
.alarm-row-info td { background: var(--blue-bg) !important; }

/* ── Status bar / Stats ──────────────────────── */
.stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 130px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  text-align: center;
  transition: all var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--mono);
  line-height: 1.2;
}

.stat-card-label {
  font-size: 11px;
  color: var(--sub-text);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

/* ── Process / Valve page ────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .process-grid { grid-template-columns: 1fr; }
}

.tank-card .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tank-visual {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.tank-svg {
  max-width: 350px;
  height: auto;
}

.controls-card .control-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.controls-card .control-section:last-child { border-bottom: none; }

.control-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sub-text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.btn-group {
  display: flex;
  gap: 6px;
}

.mode-btn {
  transition: all var(--transition);
}

.mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.valve-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  transition: background var(--transition);
}

.valve-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform var(--transition);
}
.valve-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.slider-value {
  min-width: 44px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
}

.seq-label {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* Process variables */
.process-vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.var-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.var-item:hover { background: var(--accent-subtle); }

.var-label {
  font-size: 11px;
  color: var(--sub-text);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}

.var-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  margin-left: auto;
}

.var-uom {
  font-size: 12px;
  color: var(--sub-text);
}

/* Valve indicators */
.valve-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.valve-status-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.valve-indicator {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.valve-pip {
  width: 4px;
  height: 28px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(0deg);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.valve-status-text {
  font-size: 13px;
}

.valve-status-text div {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  margin-top: 4px;
}

.interlock-msg {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

.interlock-msg.hidden { display: none; }

/* ── AI Chat ─────────────────────────────────── */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  max-height: 700px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeIn .25s cubic-bezier(.4,0,.2,1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg.ai {
  align-self: flex-start;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 0;
}

.chat-input-row input {
  flex: 1;
}

.chat-tool-badge, .chat-tool-used {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 20px;
  margin-top: 6px;
  display: inline-block;
  font-weight: 600;
}

/* ── Hamburger ────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: background var(--transition);
}
.hamburger:hover { background: rgba(255,255,255,.16); }
.hamburger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  transition: opacity .3s;
  visibility: hidden;
  pointer-events: none;
}
.nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ── Page transitions ───────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.main-content > * { animation: pageIn .35s cubic-bezier(.4,0,.2,1); }

/* ── Tablet ───────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { width: 180px; padding: 16px 10px; }
  .main-content { padding: 20px; }
  .tag-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .impianto-panel-grid { grid-template-columns: 1fr; }
  .impianto-diag-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Header responsive: con gap/padding ridotti (16px header, 6px nav-link)
   gli 8 link + brand + azioni stanno su una riga fino a 1024px incluso
   (misurato ~1007px). Sotto 1023px il menu passa a hamburger/slide-out; la
   sidebar desktop coi device resta visibile fino a 768px (blocco Mobile). ─── */
@media (max-width: 1023px) {
  html.menu-open, html.menu-open body { overflow: hidden; }
  .hamburger { display: flex; }
  .nav-overlay { display: block; }
  .header-nav {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: min(280px, 75vw);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-active) 100%);
    flex-direction: column;
    padding: 72px 12px 16px;
    gap: 2px;
    margin: 0;
    z-index: 101;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .header-nav.open { transform: translateX(0); }
  .nav-link {
    font-size: 14px;
    padding: 12px 16px;
    width: 100%;
    text-align: left;
    border-radius: var(--radius-sm);
    touch-action: manipulation;
  }
  .nav-link:hover { background: rgba(255,255,255,.08); }
  .nav-devices { display: flex; flex-direction: column; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
  .nav-device-list { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-devices-title { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.4); padding: 8px 16px 4px; font-weight: 600; }
  .nav-device-item { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: rgba(255,255,255,.6); }
  .header-actions { margin-left: auto; }
}

/* ── Mobile ───────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { padding: 12px; }
  .tag-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .form-inline { grid-template-columns: 1fr; }
  .stats-bar { flex-direction: column; }
  .card { padding: 14px; }
  .process-vars { grid-template-columns: 1fr; }
  .valve-status-grid { grid-template-columns: 1fr; }
  .impianto-diag-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-container { height: calc(100vh - 160px); height: calc(100dvh - 160px); }
  .chat-msg { max-width: 90%; }
}

/* ── Editor sinottici (Fase 2) ────────────────────────────── */
.synop-editor-header .card-title { display:flex; align-items:center; gap:10px; }
.synop-editor-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.synop-save-status { font-size:12px; color:var(--accent); }
.synop-save-status.err { color:var(--danger,#e03131); }
.synop-help { margin:8px 0 0; font-size:12.5px; color:var(--sub-text); max-width:900px; line-height:1.5; }

.synop-editor {
  display:grid;
  grid-template-columns: 200px minmax(0,1fr) 260px;
  gap:12px;
  align-items:start;
}

.synop-palette-list { display:flex; flex-direction:column; gap:6px; }
.synop-palette-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:grab;
  user-select:none;
  font-size:13px;
}
.synop-palette-item:hover { border-color:var(--accent); }
.synop-palette-item:active { cursor:grabbing; }
.synop-palette-icon { font-size:16px; line-height:1; }

.synop-canvas-card { min-width:0; }
.synop-canvas-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.synop-field-inline { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--sub-text); }
.synop-canvas-scroll {
  overflow:auto;
  max-height:calc(100vh - 250px);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.25);
  padding:8px;
}
.synop-canvas-slot.rendering { opacity:.55; pointer-events:none; }
#synop-canvas-svg { display:block; width:100%; height:auto; background:#0f172a; border-radius:6px; }
.synop-item.selected { outline:1.5px dashed var(--accent); outline-offset:3px; }
.synop-item { pointer-events:bounding-box; }

.synop-props-body { display:flex; flex-direction:column; gap:8px; }
.synop-props-empty { color:var(--sub-text); font-size:13px; line-height:1.5; padding:6px 0; }
.synop-prop-row { display:flex; flex-direction:column; gap:4px; }
.synop-prop-row label { font-size:12px; color:var(--sub-text); }
.synop-prop-value { font-size:13px; font-weight:600; color:var(--accent); }
.synop-prop-select { padding:7px 8px; background:var(--sidebar); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; }

@media (max-width: 1024px) {
  .synop-editor { grid-template-columns: 1fr; }
  .synop-canvas-scroll { max-height:55vh; }
}

/* ── Bozza AI editor sinottici (Fase 3) ─────────────────────── */
.synop-canvas-card .card-header { flex-wrap:wrap; row-gap:8px; }
.synop-ai-row {
  display:flex; align-items:center; gap:8px;
  flex-basis:100%; padding-top:6px; border-top:1px solid var(--border);
}
.synop-ai-draft-status { font-size:12px; color:var(--accent); }
.synop-ai-draft-status.err { color:var(--danger,#e03131); }

/* ── SOLL-01: animazioni e rifiniture sinottico (additive, solo questo device) ── */
.impianto-soll .so-title {
  font-family: var(--mono);
  letter-spacing: .06em;
}
.impianto-soll .so-panel-title {
  font-family: var(--mono);
  letter-spacing: .08em;
}
/* Riempimento vasca: livello che sale/scende in modo fluido (SVG2 geometry props) */
.impianto-soll .impianto-synop .tank-fill {
  transition: height .55s ease, y .55s ease;
}
/* Rotore girante: nascosto a pompa ferma, ruota quando il suo tag marcia è 1 */
.impianto-soll .impianto-synop .impianto-rotore {
  opacity: 0;
}
.impianto-soll .impianto-synop .impianto-rotore.on {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: impianto-spin 1.1s linear infinite;
}
@keyframes impianto-spin {
  to { transform: rotate(360deg); }
}
/* Pompe isolate + flusso del collettore: tutte scorrono quando il gruppo è .on */
.impianto-soll .impianto-synop .impianto-pipes.on .pipe-flow {
  animation-duration: .9s;
}
/* La mandata scorre piu' in freccia. Il selettore DEVE avere la stessa
   struttura di quello sopra (stessa specificita 0,5,0): con una classe in
   meno la regola perde per specificita' e questa accelerazione non veniva
   mai applicata. */
.impianto-soll .impianto-synop .impianto-pipes.on .pipe-flow-mandata {
  animation-duration: .55s;
}
/* Lampade semaforo SOLL-01: verde con bagliore pulsante, rossa lampeggia */
.impianto-soll .dep-lamp-verde.on {
  animation: soll-lamp-pulse 2.4s ease-in-out infinite;
}
.impianto-soll .dep-lamp-rossa.on {
  animation: soll-lamp-blink 1.1s steps(2, start) infinite;
}
@keyframes soll-lamp-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(34,197,94,.45)); }
  50%      { filter: drop-shadow(0 0 12px rgba(34,197,94,.9)); }
}
@keyframes soll-lamp-blink {
  50% { opacity: .3; }
}
/* Bolla strumento: cambio stato dolce */
.impianto-soll .impianto-synop .impianto-sensor circle {
  transition: fill .3s ease, stroke .3s ease, filter .3s ease;
}
/* Allarmi SOLL-01: LED singolo = lampada verde trasparente quando spenta, così
   la lampada rossa (allarme) resta visibile sotto. */
.impianto-soll .dep-lamp-verde:not(.on) {
  fill: transparent;
  stroke: none;
}
/* Lampada senza tag (semaforo a una sola spia): non disegnarla, altrimenti
   coprirebbe la lampata dell'altra coppia sepolta sotto. */
.impianto-soll .dep-lamp[data-tag-name=""] {
  display: none;
}