/* ============================================================================
   Quadro celle frigorifere.

   Questo foglio NON e' una reinterpretazione: e' tokens.css + styles.css del kit
   "pouncherx-celle-demo-kit" fornito da Gabriele, con valori, ombre, raggi e
   proporzioni presi tali e quali.

   Due sole differenze, obbligate dallo stack:
   1. ogni selettore e' annidato sotto .px-celle. Il kit usa nomi generici
      (.header, .sidebar, .main, .panel, .toast) che nell'app esistono gia' e si
      sovrascriverebbero a vicenda;
   2. le regole su html/body del kit (compreso min-width:1180px) sono state
      tolte: qui la pagina vive dentro l'app, non da sola.
   ============================================================================ */

/* Font a sette segmenti dei display, fornito da Gabriele. Viaggia con l'app, non
   va installato: il "Regular" accende solo i segmenti della cifra, mentre il
   "Solid" disegnerebbe anche quelli spenti, che nella brochure non compaiono. */
@font-face {
  font-family: 'UpperClock';
  src: url('assets/celle/font/UpperClock-Regular.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}

.px-celle {
  --px-bg:#f4f5f7;
  --px-plastic:#f9fafb;
  --px-plastic-2:#eef1f4;
  --px-border:#d8dde4;
  --px-border-dark:#bfc6cf;
  --px-navy:#0b2554;
  --px-blue:#086ff5;
  --px-blue-2:#20a5ff;
  --px-cyan:#58c8ff;
  --px-green:#24b45b;
  --px-red:#ef3838;
  --px-yellow:#f5c62f;
  --px-black:#080b10;
  --px-muted:#667085;
  --px-shadow: 0 14px 28px rgba(55,65,81,.14), inset 0 1px 0 rgba(255,255,255,.95);
  --px-shadow-soft: 0 7px 16px rgba(55,65,81,.12), inset 0 1px 0 rgba(255,255,255,.92);
  --px-radius:22px;
  --px-radius-sm:14px;
  --px-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  font-family: var(--px-font);
  color: #121826;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.px-celle *, .px-celle *::before, .px-celle *::after { box-sizing: border-box; }
.px-celle button, .px-celle input, .px-celle select { font: inherit; }

.px-celle .shell {
  width:100%;
  padding:18px;
  border-radius:34px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.95), transparent 38%),
    linear-gradient(180deg,#f4f6f8,#e6eaee);
}
.px-celle .console {
  border-radius:34px;
  border:1px solid #d9dee5;
  background:linear-gradient(145deg,#ffffff 0%,#f4f6f8 58%,#eceff2 100%);
  box-shadow:0 24px 60px rgba(37,48,63,.20), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 2px rgba(160,170,182,.16);
  padding:18px;
  position:relative;
}

/* ---- Testata ---- */
.px-celle .header {
  height:72px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:0 16px 0 20px;
  border-bottom:1px solid #dfe4e9;
}
.px-celle .brand{font-size:29px;font-weight:800;letter-spacing:-1.2px;white-space:nowrap}
.px-celle .brand .x{color:var(--px-blue)}
.px-celle .brand .life{font-weight:500}
.px-celle .title h1{margin:0;font-size:24px;letter-spacing:-.4px}
.px-celle .title p{margin:2px 0 0;font-size:13px;color:#394150}
.px-celle .topstatus{display:flex;align-items:center;gap:18px;font-size:12px}
.px-celle .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;box-shadow:0 0 0 3px rgba(36,180,91,.08)}
.px-celle .dot.green{background:var(--px-green)}
.px-celle .dot.red{background:var(--px-red)}
.px-celle .dot.yellow{background:var(--px-yellow)}
.px-celle .dot.cyan{background:var(--px-cyan)}

/* ---- Menu laterale ---- */
/* Il menu e' stato ristretto da 148 a 92px: lo spazio guadagnato va al quadro di
   destra, dove stanno display e grafici, che e' quello che si guarda. */
.px-celle .layout {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  margin-top:14px;
}
.px-celle .side { display:flex;flex-direction:column;gap:9px; padding:6px 2px; }
.px-celle .navbtn {
  min-height:58px;border:1px solid #cbd2da;border-radius:12px;
  background:linear-gradient(145deg,#fff,#edf0f3);
  box-shadow:var(--px-shadow-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-weight:700;font-size:8.5px;letter-spacing:.02em;color:#202938;
  cursor:pointer;transition:.15s;padding:6px 3px;line-height:1.15;
}
.px-celle .navbtn img{width:22px;height:22px}
/* Richiamo del menu dell'applicazione, staccato dalle voci del quadro. */
.px-celle .navbtn.menuApp{margin-top:auto;min-height:48px;color:#667085;background:linear-gradient(145deg,#f7f9fb,#e8ecf1)}
.px-celle .navbtn.menuApp .ham{font-size:17px;line-height:1}

/* Il menu dell'applicazione sparisce mentre si sta nel quadro celle: e' l'unico
   modulo che ha una sua navigazione completa, quindi puo' prendersi la pagina. */
body.celle-piena .sidebar{display:none}
.px-celle .navbtn.active {
  color:#005ad8;border-color:#8fc0ff;
  box-shadow:0 0 0 2px rgba(8,111,245,.12), 0 10px 22px rgba(8,111,245,.18), inset 0 1px 0 #fff;
}
.px-celle .navbtn:active{transform:translateY(2px)}

.px-celle .mainarea{display:flex;flex-direction:column;gap:14px}

/* ---- Strumenti di testata ---- */
.px-celle .metrics{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}
.px-celle .metric {
  min-height:122px;
  border:1px solid var(--px-border);
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#f0f3f6);
  box-shadow:var(--px-shadow-soft);
  padding:17px 20px;
  display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;
}
.px-celle .metricIcon {
  width:68px;height:68px;border-radius:50%;
  border:1px solid #c8d0d8;
  background:linear-gradient(145deg,#fff,#e6e9ed);
  box-shadow:inset 0 2px 4px #fff, 0 5px 12px rgba(60,70,80,.14);
  display:grid;place-items:center;
}
.px-celle .metricIcon img{width:36px;height:36px}
.px-celle .metric small{font-size:11px;font-weight:700}
.px-celle .metric strong{display:block;font-size:30px;margin:4px 0}
.px-celle .metric .sub{font-size:11px;color:#178d43}

/* ---- Pannello panoramica ---- */
.px-celle .panel {
  border:1px solid var(--px-border);
  border-radius:20px;
  background:linear-gradient(145deg,#fbfcfd,#eef1f4);
  box-shadow:var(--px-shadow);
  padding:14px;
}
.px-celle .panelHeader {
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;flex-wrap:wrap;
}
.px-celle .panelHeader h2{font-size:19px;margin:0}
.px-celle .controls{display:flex;gap:10px;flex-wrap:wrap}
.px-celle .control {
  border:1px solid #c8d0d8;border-radius:10px;background:#f8f9fb;
  padding:9px 13px;color:#1c2735;box-shadow:inset 0 1px 0 #fff;cursor:pointer;
}
.px-celle .control.active{background:var(--px-blue);color:#fff;border-color:#0b5fd0}

/* ---- Le celle ---- */
.px-celle .rooms{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}
.px-celle .rooms.list{grid-template-columns:1fr}
.px-celle .room {
  min-height:252px;
  border:1px solid #cfd6de;border-radius:17px;
  background:linear-gradient(150deg,#fff,#f1f4f7);
  box-shadow:0 9px 18px rgba(60,72,86,.11), inset 0 1px 0 #fff;
  padding:15px;
  cursor:pointer;transition:.15s;
  text-align:left;width:100%;font:inherit;color:inherit;display:block;
}
.px-celle .room:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(60,72,86,.16)}
.px-celle .room:focus-visible{outline:2px solid var(--px-blue);outline-offset:2px}
.px-celle .room.selected{border-color:#2685ff;box-shadow:0 0 0 2px rgba(8,111,245,.10),0 12px 24px rgba(8,111,245,.16)}
.px-celle .room.alarm{border-color:#ff5d5d}
.px-celle .roomTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.px-celle .roomTitle{display:flex;gap:10px}
.px-celle .number {
  width:34px;height:34px;border-radius:7px;color:white;font-weight:800;
  display:grid;place-items:center;background:linear-gradient(#116ae4,#06449e);
  box-shadow:0 4px 10px rgba(5,79,173,.25)
}
.px-celle .alarm .number{background:linear-gradient(#ff4d4d,#c81616)}
.px-celle .room h3{font-size:14px;margin:1px 0 1px}
.px-celle .room .type{font-size:11px;color:#4b5563}

/* ---- Display nero -------------------------------------------------------
   Valori presi dalla brochure "DISPLAY NERI": LED #00B7FF, fondo #0B0B0B,
   cornice ABS nero, vetro acrilico lucido con riflesso diagonale in alto a
   sinistra, luminosita' 80 / bagliore 60 / riflessione 40.                  */
.px-celle .display {
  /* Cifre bianche per scelta di Gabriele. La brochure indicava #00B7FF, ma sul
     nero il bianco stacca di piu' e il colore resta libero per dire lo stato:
     rosso quando c'e' un allarme. */
  --led:#FFFFFF;
  position:relative;overflow:hidden;
  margin-top:13px;border-radius:11px;
  background:radial-gradient(120% 90% at 50% 0%, #16181b 0%, #0B0B0B 60%, #050607 100%);
  border:2px solid #22262b;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06), 0 5px 10px rgba(0,0,0,.18);
  padding:12px 14px 10px;color:var(--led);
}
/* Il riflesso: una diagonale chiara che parte dall'angolo alto a sinistra.
   Sta sopra le cifre, come il vetro sopra i LED. */
.px-celle .display::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(126deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 46%);
}
.px-celle .display.alarm{--led:#ff3b3b}

/* Il display e' il contenitore di riferimento per la misura delle cifre.
   In colonna perche' la riga del setpoint possa andare in fondo al vetro. */
.px-celle .display{container-type:inline-size;position:relative;
  display:flex;flex-direction:column}

/* Le spie, piccole in colonna sul lato sinistro del vetro. Da spente si
   intravedono appena, come il segmento non acceso di un display: sono li' anche
   quando non servono, perche' e' cosi' che si legge una spia. */
/* Un filo piu' compatte da quando sono tre: in colonna occupavano piu' di
   meta' vetro e arrivavano fin sopra la riga del setpoint. */
.px-celle .segSpie{position:absolute;left:11px;top:10px;display:flex;
  flex-direction:column;gap:5px}
.px-celle .segSpia{width:13px;height:13px;background:rgba(255,255,255,.14);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;
  transition:background .25s ease, filter .25s ease}
/* Accesa: bianca con lo stesso alone delle cifre, cosi' appartiene al vetro. */
.px-celle .segSpia.accesa{background:#fff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.65)) drop-shadow(0 0 11px rgba(255,255,255,.35))}
/* La porta aperta e' l'unica delle due che segnala qualcosa da guardare, e sui
   quadri quella spia e' sempre ambrata: lo sbrinamento e' un ciclo normale, una
   porta lasciata aperta no. */
.px-celle .segSpia.accesa.allerta{background:#ffb020;
  filter:drop-shadow(0 0 4px rgba(255,176,32,.7)) drop-shadow(0 0 11px rgba(255,176,32,.4))}
.px-celle .segRiga{display:flex;align-items:flex-start;gap:6px;justify-content:center;min-width:0}
.px-celle .segCifre{
  font-family:'UpperClock','DS-Digital','Courier New',monospace;
  line-height:.9;letter-spacing:1px;display:inline-block;white-space:nowrap;
  /* Il minore fra la misura voluta e quanto sta nel vetro: cosi' "-17.6" si
     rimpicciolisce da solo invece di uscire dal display e farsi tagliare. */
  font-size:min(var(--dim,40px), 26cqi);
  /* Bagliore neutro: un alone colorato su cifre bianche le sporcherebbe. */
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(255,255,255,.26));
}
.px-celle .display.alarm .segCifre{filter:drop-shadow(0 0 5px rgba(255,59,59,.85)) drop-shadow(0 0 14px rgba(255,59,59,.4))}
.px-celle .segUnita{font-size:15px;font-weight:700;line-height:1;margin-top:3px;
  text-shadow:0 0 7px rgba(255,255,255,.5)}
.px-celle .display.alarm .segUnita{text-shadow:0 0 7px rgba(255,59,59,.6)}

/* La riga bianca del setpoint sta a sinistra, come nel display originale, e in
   fondo al vetro: piu' in alto finirebbe accanto alla colonna delle spie e le
   due cose si accavallerebbero. */
.px-celle .set{
  font-size:11px;color:#dbe6f2;margin-top:auto;padding-top:20px;
  display:flex;align-items:center;gap:6px;
}
.px-celle .display.alarm .set{color:#ffc9c9}
.px-celle .segAvviso{margin-left:auto;color:#ff3b3b;font-size:14px;text-shadow:0 0 8px rgba(255,59,59,.7)}

.px-celle .sottoDisplay{font-size:12px;color:#178d43;margin-top:8px;text-align:center;font-weight:700}
.px-celle .sottoDisplay.ko{color:#d52d2d}
.px-celle .status{font-size:11px;font-weight:800;display:flex;align-items:center;gap:5px;margin-top:11px}
.px-celle .status.ok{color:#14863d}
.px-celle .status.bad{color:#d52d2d}

.px-celle .miniGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px;border-top:1px solid #e0e4e8;padding-top:11px}
/* min-width:0 e' indispensabile: senza, una colonna 1fr non scende mai sotto la
   larghezza della parola piu' lunga, e "COMUNICAZIONE" allargava la sua colonna
   rubando spazio alle altre. Le quattro colonne risultavano 38, 68, 66 e 77 px
   invece che uguali, e le icone non erano in asse fra una cella e l'altra. */
.px-celle .mini{text-align:center;font-size:9px;color:#3b4653;min-width:0;overflow-wrap:anywhere;line-height:1.25}
/* Due righe riservate a tutte: in una colonna da 62px "COMUNICAZIONE" a 9px non
   ci sta su una riga sola (ne servirebbero 77). Riservandole a tutte e quattro,
   le icone e i valori restano sulla stessa quota. */
.px-celle .mini .et{display:block;min-height:22px}
.px-celle .mini b{display:block;margin-top:3px;color:#147b39;font-size:9px}
.px-celle .alarm .mini.door b{color:#d52d2d}
/* L'icona e' il file SVG del kit usato come maschera: il disegno resta il loro,
   il colore lo da' lo stato, come nel PNG di riferimento (porta rossa se aperta). */
.px-celle .mini .ico {
  width:19px;height:19px;display:block;margin:0 auto 4px;background:var(--px-navy);
  -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat;
}
.px-celle .mini.ok .ico{background:#147b39}
.px-celle .mini.ko .ico{background:#d52d2d}
.px-celle .mini.blu .ico{background:var(--px-blue-2)}
.px-celle .mini.off .ico{background:#9aa4b0}

.px-celle .legend {
  display:flex;gap:18px;align-items:center;font-size:10px;color:#394150;
  margin-top:12px;padding-left:6px;flex-wrap:wrap;
}
.px-celle .legend span{display:flex;align-items:center;gap:4px}

/* ---- Barra comandi ---- */
/* La barra sta su un livello suo. Sugli schermi impostati al 125 o 150 per cento
   — la norma su Windows — gli elementi cadono su posizioni frazionarie, e a ogni
   scatto di rotella ombre, bordi tondi e gradienti vengono ricampionati in modo
   leggermente diverso: restano fermi ma sembrano vibrare. Su un livello proprio
   la barra viene disegnata una volta sola e poi soltanto spostata, e il
   tremolio sparisce. Gli interruttori sono i piu' colpiti perche' hanno l'ombra
   interna su fondo scuro, dove ogni sfumatura si nota. */
.px-celle .bottom {
  transform:translateZ(0);
  margin-top:14px;
  min-height:126px;
  display:grid;
  grid-template-columns:minmax(360px, 460px) minmax(0,1fr);
  gap:14px;
  border:1px solid var(--px-border);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#edf0f3);
  box-shadow:var(--px-shadow);
  padding:12px 18px;
}
.px-celle .bigbuttons{display:flex;align-items:center;gap:56px}
.px-celle .bigbtnWrap{text-align:center;font-size:11px;font-weight:700;position:relative}

/* Il pulsante ALLARME pulsa solo quando c'e' davvero qualcosa che suona: due
   anelli sfasati che si allargano e svaniscono, gli stessi del punto sullo
   scatto nel grafico, cosi' i due si leggono come la stessa cosa.
   Si fermano a 1,65 volte il pulsante: piu' larghi sconfinerebbero sui vicini. */
.px-celle .bigbtnWrap.suona::before,
.px-celle .bigbtnWrap.suona::after{
  content:'';position:absolute;left:50%;top:41px;width:82px;height:82px;
  margin:-41px 0 0 -41px;border-radius:50%;
  border:2.5px solid rgba(219,43,37,.7);pointer-events:none;z-index:0;
  /* Solo trasformazione e opacita': sono le due cose che la scheda grafica sa
     animare da sola. will-change chiede al browser un livello suo per gli
     anelli, cosi' lo scorrimento della pagina non li ridisegna a ogni riga. */
  will-change:transform, opacity;
  animation:pxSonarPulsante 2.2s cubic-bezier(.2,.6,.35,1) infinite}
.px-celle .bigbtnWrap.suona::after{animation-delay:1.1s}
@keyframes pxSonarPulsante{
  0%{transform:scale(1);opacity:.75}
  70%{opacity:.18}
  100%{transform:scale(1.65);opacity:0}
}
/* Il pulsante sta sopra gli anelli. Niente alone pulsante sulla cupola: era
   un'animazione del filtro, e i filtri il browser li ridisegna a mano a ogni
   fotogramma, facendo scattare tutta la barra mentre si scorre la pagina. Con la
   cupola rossa fra due bianche l'alone non aggiungeva comunque niente. */
.px-celle .bigbtnWrap.suona .bigbtn.foto{z-index:1}
/* Il conto alla rovescia del RESET, sopra la cupola mentre si tiene premuto.
   L'anello si riempie man mano: il numero dice quanto manca, l'anello quanto si
   e' fatto. */
.px-celle .contoReset{position:absolute;inset:0;border-radius:50%;z-index:2;
  display:grid;place-items:center;background:rgba(16,24,40,.72);
  font-size:25px;font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* L'anello sta in uno strato suo: la maschera che ne ritaglia la corona non
   deve toccare il numero, che va pieno. */
/* closest-side, se no il raggio della maschera si misura verso l'angolo del
   quadrato e la corona finisce fuori dal cerchio, invisibile. */
.px-celle .contoReset::before{content:"";position:absolute;inset:3px;
  border-radius:50%;
  background:conic-gradient(#fff var(--giro,0deg), rgba(255,255,255,.22) 0);
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 78%, #000 79%);
  mask:radial-gradient(circle closest-side, transparent 0 78%, #000 79%)}
.px-celle .contoReset[hidden]{display:none}
/* Il pulsante si abbassa mentre lo si tiene premuto, come un pulsante vero. */
.px-celle .bigbtn.foto.inCorso{transform:translateY(2px)}

/* Quante celle stanno suonando, sulla cupola. */
.px-celle .contaAllarmi{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;
  border-radius:11px;background:#b3120c;color:#fff;font-size:11px;font-weight:800;
  line-height:21px;text-align:center;padding:0 5px;border:2px solid #fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3)}

/* Chi ha chiesto meno movimento vede gli anelli fermi, larghi e fissi: restano
   loro e il pallino col numero a dire che c'e' un allarme. Via anche il
   will-change, che senza animazione terrebbe occupato un livello per niente. */
@media (prefers-reduced-motion: reduce){
  .px-celle .bigbtnWrap.suona::before,
  .px-celle .bigbtnWrap.suona::after{animation:none;will-change:auto;
    opacity:.35;transform:scale(1.3)}
}
/* Su tablet e telefono un dito fermo su un elemento fa comparire il menu di
   sistema — copia, condividi, salva immagine — che si prende il tocco. Su un
   pulsante di comando non serve a niente e da' solo fastidio, quindi qui e'
   disattivato. touch-action toglie anche il mezzo secondo di attesa che il
   browser mette prima di decidere se il tocco era un doppio tocco per lo zoom. */
.px-celle .bigbtn,
.px-celle .switch,
.px-celle .tondino,
.px-celle .tab{
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}

.px-celle .bigbtn {
  width:76px;height:76px;border-radius:50%;
  border:7px solid #d6dbe0;
  box-shadow:0 8px 14px rgba(0,0,0,.22), inset 0 5px 7px rgba(255,255,255,.35);
  color:white;font-size:28px;font-weight:900;cursor:pointer
}
.px-celle .bigbtn:active{transform:translateY(2px);box-shadow:0 3px 7px rgba(0,0,0,.28), inset 0 5px 9px rgba(0,0,0,.25)}

/* Pulsante come immagine: la ghiera cromata e la cupola sono gia' nel file, quindi
   qui si toglie tutto quello che il CSS aggiungeva - bordo, sfondo, ombra - se no
   si vedrebbero due ghiere sovrapposte. Resta solo l'ombra portata, che nel file
   non c'e' e serve a staccarlo dal pannello. */
.px-celle .bigbtn.foto{
  border:0;background:none;padding:0;position:relative;width:82px;height:82px;
  box-shadow:none;filter:drop-shadow(0 7px 10px rgba(0,0,0,.28));
  display:grid;place-items:center;
  /* Il pulsante e' un blocco da 82px dentro un contenitore largo quanto la sua
     dicitura: senza questo "RESET ALLARMI" allarga la colonna e il pulsante
     resta appoggiato a sinistra invece che al centro. */
  margin-inline:auto;
}
/* La dicitura respira un po' sotto la cupola, invece di toccarne l'ombra. */
.px-celle .bigbtnWrap > div{margin-top:11px}
.px-celle .bigbtn.foto img{width:100%;height:100%;display:block;pointer-events:none}
.px-celle .bigbtn.foto:active{transform:translateY(3px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.px-celle .bigbtn.green{background:radial-gradient(circle at 38% 30%,#4bd16e,#15933e 68%,#0b6728)}
.px-celle .bigbtn.red{background:radial-gradient(circle at 38% 30%,#ff6d63,#db2b25 68%,#a11714)}
.px-celle .bigbtn.yellow{background:radial-gradient(circle at 38% 30%,#ffe76e,#efb91f 68%,#bd8500);color:#1d1d1d}

/* Tre colonne: la manopola della luminosita' e' stata tolta. */
.px-celle .switches{display:grid;grid-template-columns:repeat(3,1fr);align-items:center}
.px-celle .switchBlock{text-align:center;font-size:10px;font-weight:700}
.px-celle .switch {
  margin:12px auto 0;width:72px;height:34px;border-radius:20px;background:#1e232a;padding:4px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.65),0 4px 8px rgba(0,0,0,.16);
  cursor:pointer;border:0;display:block;
}
/* La transizione dice quali proprieta' seguire invece di "tutte": con "tutte" il
   browser sorveglia anche quelle che non cambiano mai, e il pallino e' un
   elemento che sta in una barra che si scorre. */
.px-celle .switch i{display:block;width:26px;height:26px;border-radius:50%;background:#aaa;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease}
.px-celle .switch.on i{transform:translateX(38px);background:#38d76d;box-shadow:0 0 10px rgba(56,215,109,.7)}
/* ---- Avviso a scomparsa ---- */
.px-celle-toast {
  position:fixed;right:30px;bottom:30px;background:#101828;color:white;padding:13px 18px;border-radius:10px;
  opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.25);
  z-index:9999;font-family:var(--px-font, system-ui);font-size:13px;
}
.px-celle-toast.show{opacity:1;transform:translateY(0)}

/* ---- Badge demo ---- */
.px-celle .demoBadge {
  position:absolute;top:14px;right:18px;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:.12em;
  background:rgba(245,198,47,.18);color:#8a6410;border:1px solid rgba(245,198,47,.6);
  padding:4px 10px;border-radius:999px;
}

/* ============================================================================
   Livello 2: elenco celle a sinistra, quadro della cella scelta a destra.
   Stessa plastica e stessi token della panoramica.
   ============================================================================ */
.px-celle .cellaLayout{display:grid;grid-template-columns:minmax(300px, 380px) minmax(0,1fr);gap:14px;align-items:start}

/* Elenco a sinistra */
.px-celle .elenco h2{font-size:17px;margin:0 0 3px}
.px-celle .elencoFiltri{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;margin-bottom:12px}

/* ---- Parametri del controller ---- */
.px-celle .parSotto{font-size:11px;color:#667085;margin-bottom:11px}
.px-celle .parFiltri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:12px}
.px-celle .parFiltri .control{width:100%;min-width:0;font-size:12px;padding:8px 10px}
.px-celle .parGruppo{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8b95a1;
  padding:12px 4px 6px;position:sticky;top:0;background:linear-gradient(180deg,#f7f9fb 70%,rgba(247,249,251,0));
}
.px-celle .parGruppo:first-child{padding-top:2px}
.px-celle .parRiga{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto 34px;gap:10px;align-items:center;
  border:1px solid #e3e8ee;border-radius:10px;padding:8px 10px;background:#fff;
  box-shadow:0 1px 2px rgba(60,72,86,.05);
}
.px-celle .parRiga + .parRiga{margin-top:6px}
.px-celle .parSigla{
  font-family:ui-monospace,'Courier New',monospace;font-size:12px;font-weight:700;color:#0b4ea8;
  background:#eaf2ff;border:1px solid #cfe0fa;border-radius:7px;padding:4px 0;text-align:center;
  /* Le sigle dei controller Micronova/EVCO sono lunghe (working_set_point…):
     si accorciano con ellipsis invece di montarsi sul nome accanto. */
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.px-celle .parNome{font-size:11.5px;line-height:1.25;min-width:0}
.px-celle .parLimiti{display:block;font-size:9.5px;color:#8b95a1;margin-top:2px}
.px-celle .parValore{
  font-family:ui-monospace,'Courier New',monospace;font-size:14px;font-weight:800;
  white-space:nowrap;text-align:right;
}
.px-celle .parValore small{font-size:9.5px;color:#8b95a1;font-weight:600;margin-left:2px}
.px-celle .parValore.sola{color:#8b95a1;font-weight:600}

/* Campi modificabili */
.px-celle .parNum{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.px-celle .parNum small{font-size:9.5px;color:#8b95a1;font-weight:600}
.px-celle .parCampo{
  border:1px solid #cdd5de;border-radius:8px;background:#fff;padding:5px 7px;
  font-family:ui-monospace,'Courier New',monospace;font-size:12.5px;font-weight:700;
  text-align:right;box-shadow:inset 0 1px 2px rgba(60,72,86,.08);color:#121826;
}
.px-celle input.parCampo{width:74px}
.px-celle select.parCampo{text-align:left;min-width:78px;cursor:pointer}
.px-celle .parCampo:focus{outline:2px solid rgba(47,127,232,.45);outline-offset:1px;border-color:var(--px-blue)}
.px-celle .parCampo:disabled{background:#f2f4f7;color:#98a2b3;cursor:not-allowed;box-shadow:none}
/* Una riga toccata resta riconoscibile finche' non si torna ai valori di fabbrica. */
.px-celle .parRiga.cambiato{border-color:#f0c98a;background:#fffaf1}
.px-celle .parRiga.cambiato .parCampo{border-color:#e0a94a;background:#fffdf8}

.px-celle .parLucchetto{
  display:flex;align-items:center;gap:8px;font-size:11px;color:#4b5563;cursor:pointer;
  border:1px solid var(--px-border);border-radius:10px;padding:8px 11px;margin-bottom:11px;background:#f8fafc;
}
.px-celle .parLucchetto input{width:15px;height:15px;cursor:pointer;flex:none}
.px-celle .parLivello{
  font-size:8.5px;font-weight:800;text-align:center;border-radius:6px;padding:3px 0;
}
.px-celle .parLivello.uno{background:#e6f6ec;color:#14863d}
.px-celle .parLivello.due{background:#f1f3f6;color:#7a8593}
.px-celle .parPiede{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--px-border);font-size:11px;color:#667085;
}
.px-celle .elencoLista{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow-y:auto;padding-right:2px}
.px-celle .riga{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto auto auto 16px;gap:11px;align-items:center;
  border:1px solid #d9dfe6;border-radius:12px;padding:9px 11px;cursor:pointer;
  background:linear-gradient(150deg,#fff,#f4f6f9);box-shadow:0 3px 8px rgba(60,72,86,.07), inset 0 1px 0 #fff;
  text-align:left;font:inherit;color:inherit;width:100%;transition:.14s;
}
.px-celle .riga:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(60,72,86,.13)}
.px-celle .riga.attiva{
  background:linear-gradient(150deg,#2f7fe8,#1358c4);border-color:#1358c4;color:#fff;
  box-shadow:0 8px 18px rgba(19,88,196,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.px-celle .riga .tile{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#eaf2ff,#d7e6fb);border:1px solid #c3d8f5;
}
.px-celle .riga.attiva .tile{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.px-celle .riga .tile span{width:22px;height:22px;background:var(--px-blue);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.px-celle .riga.attiva .tile span{background:#fff}
.px-celle .riga .nome{font-size:13px;font-weight:700;line-height:1.2}
.px-celle .riga .tipo{font-size:11px;color:#667085}
.px-celle .riga.attiva .tipo{color:rgba(255,255,255,.85)}
.px-celle .riga .gradi{font-size:17px;font-weight:800;white-space:nowrap;text-align:right}
.px-celle .riga .setmini{font-size:10.5px;color:#667085;white-space:nowrap}
.px-celle .riga.attiva .setmini{color:rgba(255,255,255,.85)}
.px-celle .riga .stato{font-size:10.5px;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:5px}
.px-celle .riga .stato.ok{color:#14863d}.px-celle .riga .stato.bad{color:#d52d2d}
.px-celle .riga.attiva .stato.ok{color:#c9ffdc}.px-celle .riga.attiva .stato.bad{color:#ffd0d0}
.px-celle .riga .nota{font-size:10px;color:#667085}
.px-celle .riga.attiva .nota{color:rgba(255,255,255,.8)}
.px-celle .riga .frec{color:#98a2b3;font-size:15px}
.px-celle .riga.attiva .frec{color:#fff}

/* Colonna destra */
.px-celle .dettTop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.px-celle .dettTile{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#2f7fe8,#1358c4);box-shadow:0 6px 14px rgba(19,88,196,.3)}
.px-celle .dettTile span{width:28px;height:28px;background:#fff;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.px-celle .dettTop h2{margin:0;font-size:20px;letter-spacing:-.2px}
.px-celle .dettTop .tipo{font-size:12px;color:#667085}
.px-celle .pill{
  display:flex;align-items:center;gap:7px;border:1px solid #d3dae2;border-radius:11px;
  background:#f8fafc;padding:8px 13px;font-size:12px;font-weight:800;box-shadow:inset 0 1px 0 #fff;
}
.px-celle .pill.ok{color:#14863d}.px-celle .pill.bad{color:#d52d2d;border-color:#f0c2c2;background:#fff6f6}

.px-celle .tre:not(.parLivello){display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.px-celle .box{border:1px solid var(--px-border);border-radius:15px;background:linear-gradient(145deg,#fff,#f1f4f7);
  box-shadow:var(--px-shadow-soft);padding:13px}
.px-celle .box .cap{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#667085;display:flex;
  align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
/* minmax(0,1fr) e non 1fr: una colonna 1fr non scende mai sotto la larghezza del
   suo contenuto, e i tre pannelli risultavano larghi 228, 198 e 221 invece che
   uguali. Stessa ragione degli indicatori sotto i display. */
/* Due pannelli invece di tre: il riquadro "Regolazione set point" e' stato tolto
   perche' i comandi + e - stanno gia' sotto al display. I due che restano hanno
   la stessa larghezza, quindi i display risultano della stessa dimensione. */
.px-celle .tre:not(.parLivello){grid-template-columns:repeat(2,minmax(0,1fr))}
/* Stessa altezza per i due vetri, cosi' restano in squadra anche se sotto uno
   c'e' la riga dei comandi e sotto l'altro no. */
.px-celle .tre:not(.parLivello) .box{display:flex;flex-direction:column}
/* Titolo ad altezza fissa: la matita accanto a "SET POINT" e' un glifo piu' alto
   del testo e da sola faceva partire quel display mezzo pixel piu' in basso. Con
   l'altezza bloccata i due vetri restano sulla stessa riga. */
.px-celle .tre:not(.parLivello) .box .cap{min-height:18px;align-items:center}
/* Altezza minima alzata insieme alle cifre: con le cifre a 90 il vetro della
   temperatura cresceva da solo e i due riquadri tornavano a quote diverse. */
.px-celle .tre:not(.parLivello) .display{min-height:140px;display:flex;flex-direction:column;justify-content:center}

/* Comandi del set point */
.px-celle .setRiga{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.px-celle .tondino{width:40px;height:40px;border-radius:50%;border:1px solid #cdd5de;cursor:pointer;
  background:linear-gradient(180deg,#fff,#e9edf2);box-shadow:0 3px 7px rgba(60,72,86,.18), inset 0 1px 0 #fff;
  font-size:20px;font-weight:800;color:#334155;flex:none}
.px-celle .tondino:active{transform:translateY(2px);box-shadow:inset 0 3px 6px rgba(0,0,0,.18)}
/* I due comandi sotto i tasti del set point. */
.px-celle .setAzioni{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.px-celle .azioneSet{font-size:11px;font-weight:700;padding:8px 13px;border-radius:9px;
  border:1px solid #cdd5de;background:#fff;color:#334155;cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.px-celle .azioneSet:hover:not(:disabled){background:#f4f6f9;border-color:#b6c1cd}
.px-celle .azioneSet:disabled{opacity:.45;cursor:default}
/* Acceso solo quando c'e' davvero un valore nuovo da memorizzare: un tasto che
   invita a salvare quando non c'e' niente da salvare non serve. */
.px-celle .azioneSet.salva.daSalvare{background:#1358c4;border-color:#1358c4;color:#fff}
.px-celle .azioneSet.salva.daSalvare:hover{background:#0f49a6}
.px-celle .azioneSet.bloccato{background:#fff4e5;border-color:#f0c48a;color:#9a5b00}
.px-celle .lucchetto{font-size:11px}

.px-celle .limiti{font-size:10.5px;color:#667085;text-align:center;margin-top:9px}

/* Schede Manuale/Automatica e finestre del grafico */
.px-celle .tabs{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap}
.px-celle .tab{border:1px solid #cdd5de;background:#f8fafc;border-radius:9px;padding:7px 12px;font-size:11.5px;
  font-weight:700;cursor:pointer;color:#334155;box-shadow:inset 0 1px 0 #fff}
.px-celle .tab.on{background:var(--px-blue);border-color:#0b5fd0;color:#fff}

/* Grafico a sinistra, schedine a destra */
/* Il grafico deve restare il pezzo dominante, come nel riferimento: con una
   colonna destra fissa a 300px, negli spazi stretti il grafico finiva per essere
   piu' magro delle schedine. Ora la destra si restringe fino a 240 e il grafico
   si tiene sempre circa i due terzi. */
.px-celle .due:not(.parLivello){display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:12px;align-items:start}
.px-celle .grafico{height:170px;position:relative}
/* Il grafico aperture porta sta a tutta larghezza e porta due scale: con 170px
   le due linee si accavallano, con 230 restano leggibili. */
.px-celle .grafico.alto{height:230px}
.px-celle .legendaPorte{display:flex;gap:18px;flex-wrap:wrap;margin:2px 0 8px;
  font-size:11px;color:#667085}
.px-celle .legendaPorte span{display:flex;align-items:center;gap:6px}
.px-celle .legendaPorte .lg{width:14px;height:3px;border-radius:2px;display:inline-block}
.px-celle .legendaPorte .lg.temp{background:#1358c4}
/* La fascia in legenda e' un rettangolino, non una riga: e' un intervallo. */
.px-celle .legendaPorte .lg.fascia{width:13px;height:11px;border-radius:2px}
.px-celle .legendaPorte .lg.fascia.porta{background:rgba(55,194,224,.30);
  border:1px solid rgba(37,150,176,.6)}
.px-celle .legendaPorte .lg.fascia.sbrina{background:rgba(224,90,90,.28);
  border:1px solid rgba(192,57,43,.6)}
.px-celle .legendaPorte .lg.punto{width:8px;height:8px;border-radius:50%;
  background:#fff;border:2px solid #0b2a5b;margin-left:-2px}
.px-celle .legendaPorte .lg.punto.rosso{border-color:#c0392b}
/* Il rombo della modifica del set point, come sul grafico. */
.px-celle .legendaPorte .lg.rombo{width:9px;height:9px;background:#fff;
  border:2px solid #7c3aed;transform:rotate(45deg);border-radius:1px}
.px-celle .legendaPorte .nota{color:#98a2b3;font-style:italic}
/* ---- Scheda dell'allarme ------------------------------------------------- */
/* Il fondo lascia intravedere la consolle: la scheda e' un approfondimento su
   quel quadro, non un'altra pagina. */
.px-celle .schermoAllarme{position:fixed;inset:0;z-index:60;padding:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,24,48,.52);backdrop-filter:blur(3px);
  animation:pxSchermoEntra .18s ease-out}
@keyframes pxSchermoEntra{from{opacity:0}to{opacity:1}}
.px-celle .schedaAllarme{width:min(920px,100%);max-height:100%;overflow:auto;
  background:rgba(255,255,255,.95);border-radius:16px;padding:20px 22px 18px;
  box-shadow:0 24px 60px rgba(8,20,45,.38);border:1px solid rgba(192,57,43,.35)}
.px-celle .schedaAllarme header{display:flex;align-items:flex-start;gap:12px;
  justify-content:space-between;margin-bottom:12px}
.px-celle .schedaAllarme h2{margin:4px 0 2px;font-size:19px;font-weight:800;color:#101828}
.px-celle .schedaAllarme header p{margin:0;font-size:12px;color:#667085}
.px-celle .etichettaAllarme{display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#c0392b;
  background:rgba(224,90,90,.12);border:1px solid rgba(192,57,43,.3);
  border-radius:999px;padding:3px 9px}
.px-celle .chiudiAllarme{flex:none;width:32px;height:32px;border-radius:9px;
  border:1px solid #e4e9f0;background:#fff;color:#475467;font-size:19px;
  line-height:1;cursor:pointer}
.px-celle .chiudiAllarme:hover{background:#f4f6f9;color:#101828}
/* I codici del controller: la sigla e' il pezzo grosso, scritta come la scrive
   lo strumento sul suo display. */
.px-celle .codiciAllarme{display:grid;gap:8px;margin:0 0 12px}
.px-celle .codiceAllarme{display:flex;align-items:center;gap:12px;
  background:rgba(224,90,90,.09);border:1px solid rgba(192,57,43,.28);
  border-radius:10px;padding:9px 12px}
/* Monospace e non il font a segmenti: quello non distingue le minuscole e
   scriverebbe "DA" al posto di "dA". Sul libretto le sigle sono esattamente
   cosi', ed e' con quelle che si cerca la pagina giusta. */
.px-celle .codiceAllarme .sigla{flex:none;min-width:56px;text-align:center;
  font-family:ui-monospace,'SFMono-Regular','Consolas',monospace;
  font-size:21px;line-height:1.15;font-weight:700;color:#fff;
  background:#0B0B0B;border-radius:7px;padding:7px 9px;
  text-shadow:0 0 8px rgba(255,120,120,.5);letter-spacing:.03em}
.px-celle .codiceAllarme b{display:block;font-size:13px;color:#101828;margin-bottom:1px}
.px-celle .codiceAllarme span:not(.sigla){display:block;font-size:11px;color:#667085;line-height:1.45}

.px-celle .datiAllarme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin:0 0 12px}
.px-celle .datiAllarme > div{background:#f7f9fc;border:1px solid #e8ecf1;
  border-radius:10px;padding:8px 10px}
.px-celle .datiAllarme span{display:block;font-size:10px;font-weight:700;
  letter-spacing:.05em;color:#98a2b3;text-transform:uppercase}
.px-celle .datiAllarme b{font-size:16px;font-weight:800;color:#101828;
  font-variant-numeric:tabular-nums}
.px-celle .datiAllarme b.caldo{color:#c0392b}
.px-celle .piedeAllarme{margin:10px 0 0;font-size:11.5px;color:#667085;line-height:1.5}
.px-celle .schedaAllarme .tabs{margin:0 0 12px}

/* Il punto dello scatto: cerchi concentrici che si allargano e svaniscono, come
   la traccia di un sonar. Sta sopra la tela e non dentro, cosi' l'animazione la
   fa il CSS e il grafico non va ridisegnato sessanta volte al secondo. */
.px-celle .grafico.conSonar{position:relative}
.px-celle .sonar{position:absolute;width:11px;height:11px;border-radius:50%;
  background:#e11d1d;transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 2.5px #fff,0 0 12px rgba(225,29,29,.75);z-index:2}
.px-celle .sonar[hidden]{display:none}
.px-celle .sonar::before,.px-celle .sonar::after{content:'';position:absolute;
  left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;border:2px solid rgba(225,29,29,.7);
  will-change:transform, opacity;
  animation:pxSonar 2.4s cubic-bezier(.2,.6,.35,1) infinite}
.px-celle .sonar::after{animation-delay:1.2s}
@keyframes pxSonar{
  0%{transform:scale(1);opacity:.85}
  70%{opacity:.25}
  100%{transform:scale(7);opacity:0}
}
.px-celle .legendaPorte .lg.sonarMini{width:9px;height:9px;border-radius:50%;
  background:#e11d1d;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(225,29,29,.45)}

/* Chi ha chiesto meno movimento vede il punto fermo: resta comunque il piu'
   acceso del grafico e non si perde. */
@media (prefers-reduced-motion: reduce){
  .px-celle .sonar::before,.px-celle .sonar::after{animation:none;opacity:.5;
    transform:scale(2.4)}
  .px-celle .schermoAllarme{animation:none}
}

/* La barra che scorre la finestra del grafico aperture. */
.px-celle .scorriPorte{display:flex;align-items:center;gap:10px;margin-top:10px}
.px-celle .scorriPorte .estremo{font-size:10.5px;color:#98a2b3;
  font-variant-numeric:tabular-nums;flex:none}
.px-celle .scorriPorte .finestraOre{font-size:11px;font-weight:700;color:#1358c4;
  font-variant-numeric:tabular-nums;flex:none;min-width:104px;text-align:right}
.px-celle .scorriPorte input[type=range]{flex:1;min-width:0;height:18px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:grab}
.px-celle .scorriPorte input[type=range]:active{cursor:grabbing}
.px-celle .scorriPorte input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;background:#e4e9f0}
.px-celle .scorriPorte input[type=range]::-moz-range-track{
  height:5px;border-radius:3px;background:#e4e9f0}
/* Il cursore e' un rettangolo e non un pallino: rappresenta un intervallo. */
.px-celle .scorriPorte input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:15px;border-radius:4px;
  background:#1358c4;border:2px solid #fff;box-shadow:0 1px 3px rgba(11,42,91,.35);
  margin-top:-5px}
.px-celle .scorriPorte input[type=range]::-moz-range-thumb{
  width:26px;height:15px;border-radius:4px;background:#1358c4;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(11,42,91,.35)}
.px-celle .scorriPorte input[type=range]:focus-visible{outline:2px solid #1358c4;
  outline-offset:3px;border-radius:4px}
.px-celle .scorriPorte input[type=range]:disabled{cursor:default;opacity:.45}

.px-celle .schedine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.px-celle .schedina{border:1px solid var(--px-border);border-radius:13px;background:linear-gradient(145deg,#fff,#f1f4f7);
  box-shadow:var(--px-shadow-soft);padding:11px 12px;min-width:0}
.px-celle .schedina .cap{font-size:9px;font-weight:800;letter-spacing:.06em;color:#667085;margin-bottom:5px}
.px-celle .schedina .v{font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px}
.px-celle .schedina .v .ic{width:20px;height:20px;flex:none;background:var(--px-blue);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.px-celle .schedina.verde .v{color:#14863d}
.px-celle .schedina.verde .v .ic{background:#14863d}
.px-celle .sbrina{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.px-celle .sbrina .ic{width:26px;height:26px;flex:none;background:var(--px-blue-2);
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}

/* Il fiocco che si scioglie. E' una maschera, non un disegno colorato: il colore
   lo decide questa regola, cosi' lo stesso file sta blu quando la cella lavora
   normale e verde mentre sbrina, senza tenere due immagini.
   Misura e colori sono quelli dell'icona del compressore, che sta nella
   schedina accanto: due indicatori affiancati che dicono la stessa cosa — un
   organo acceso o spento — non possono avere due tarature diverse. */
.px-celle .sbrina .ic.goccia{width:20px;height:20px;background:var(--px-blue);
  transition:background .25s ease}
/* Sbrinamento in corso: lo stesso verde del compressore acceso, e basta. Niente
   alone: l'icona del compressore non ce l'ha, e queste due devono leggersi
   uguali. */
.px-celle .sbrina .ic.goccia.attiva{background:#14863d}
/* La scritta segue l'icona, con lo stesso verde della riga ON del compressore. */
.px-celle .sbrina.attivo .stato{color:#14863d}

/* Informazioni cella */
.px-celle .info{margin-top:12px}
.px-celle .infoGriglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 26px}
.px-celle .infoGriglia div{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;
  padding:5px 0;border-bottom:1px solid #eaeef2}
.px-celle .infoGriglia b{font-weight:700;text-align:right}

/* Intestazione del dettaglio */
.px-celle .detailHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.px-celle .crumbs{font-size:12px;color:#4b5563}
.px-celle .crumbs b{color:#121826}

.px-celle .card2{border:1px solid var(--px-border);border-radius:16px;background:linear-gradient(145deg,#fff,#f0f3f6);box-shadow:var(--px-shadow-soft);padding:16px}
.px-celle .card2 h4{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.09em;color:#667085}
.px-celle .row2{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #e8ecf0;font-size:12px}
.px-celle .row2:last-child{border-bottom:0}

/* ---- Adattamento agli schermi ----
   Panoramica e dettaglio hanno esigenze diverse. Le soglie sono calibrate sui
   viewport reali dei dispositivi richiesti:
   - telefoni: < 680 px (390x844 e 844x390)
   - tablet portrait: 680-1000 px (768x1024, 820x1180, 834x1194)
   - tablet landscape: 1000-1280 px (1024x768, 1180x820, 1194x834)
   - desktop: > 1280 px
   Il dettaglio rimane affiancato ben oltre i 1250 px precedenti: cosi' gli iPad
   in orizzontale vedono elenco e quadro uno accanto all'altro, invece di un
   impilamento verticale ingrandito. */
@media(max-width:1280px){
  .px-celle .rooms{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .px-celle .metrics{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:1000px){
  .px-celle .rooms{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .px-celle .layout{grid-template-columns:minmax(0,1fr)}
  .px-celle .side{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .px-celle .navbtn{min-width:108px;flex:none}
  .px-celle .header{grid-template-columns:minmax(0,1fr);height:auto;padding:10px 6px;text-align:center;gap:10px}
  .px-celle .topstatus{justify-content:center;flex-wrap:wrap}
  .px-celle .bottom{grid-template-columns:minmax(0,1fr)}
  .px-celle .bigbuttons{justify-content:center;gap:36px}
}
@media(max-width:920px){
  .px-celle .cellaLayout{grid-template-columns:minmax(0,1fr)}
  .px-celle .due:not(.parLivello){grid-template-columns:minmax(0,1fr)}
  .px-celle .elencoLista{max-height:none}
}
@media(max-width:760px){
  .px-celle .rooms{grid-template-columns:1fr}
  .px-celle .metrics{grid-template-columns:1fr}
  .px-celle .tre:not(.parLivello){grid-template-columns:1fr}
}
@media(max-width:680px){
  .px-celle .switches{grid-template-columns:repeat(2,1fr);gap:14px}
  .px-celle .shell{padding:8px;border-radius:20px}
  .px-celle .console{padding:12px;border-radius:22px}
}

/* ---- Storico -------------------------------------------------------------- */
/* Piu' larga della scheda d'allarme: qui ci sono tabelle, e a novecento pixel
   le colonne si stringono al punto da andare a capo. */
.px-celle .schedaStorico{width:min(1040px,100%);border-color:rgba(19,88,196,.3)}
.px-celle .etichettaStorico{display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--px-blue,#1358c4);
  background:#eaf1fd;border:1px solid #cfe0fa;border-radius:999px;padding:3px 9px}

.px-celle .barraStorico{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;background:#f7f9fc;border:1px solid #e8ecf1;border-radius:10px;
  padding:10px 12px;margin-bottom:12px}
.px-celle .campiData{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.px-celle .campoData{display:flex;flex-direction:column;gap:3px}
.px-celle .campoData span{font-size:9.5px;font-weight:800;letter-spacing:.05em;
  color:#98a2b3;text-transform:uppercase}
.px-celle .campoData input{border:1px solid #cdd5de;border-radius:8px;padding:6px 8px;
  font:inherit;font-size:12px}
.px-celle .rapidi{display:flex;gap:5px;align-items:flex-end}
.px-celle .rapido{font-size:10.5px;font-weight:700;border:1px solid #cdd5de;border-radius:7px;
  padding:6px 10px;color:#475467;background:#fff;cursor:pointer}
.px-celle .rapido:hover{background:#f4f6f9}
.px-celle .rapido.on{background:var(--px-blue,#1358c4);color:#fff;border-color:var(--px-blue,#1358c4)}
.px-celle .btnStorico{border:1px solid var(--px-blue,#1358c4);background:var(--px-blue,#1358c4);
  color:#fff;border-radius:8px;padding:8px 13px;font-size:11.5px;font-weight:700;cursor:pointer}
.px-celle .btnStorico:hover{background:#0f49a6}

.px-celle .tabsStorico{display:flex;gap:6px;border-bottom:1px solid #e8ecf1;margin-bottom:12px}
.px-celle .tabStorico{font-size:11.5px;font-weight:700;padding:8px 12px;color:#667085;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.px-celle .tabStorico:hover{color:#101828}
.px-celle .tabStorico.on{color:var(--px-blue,#1358c4);border-bottom-color:var(--px-blue,#1358c4)}

.px-celle .storicoRiga{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
.px-celle .blocco{border:1px solid #e8ecf1;border-radius:10px;padding:11px 13px;background:#fff}
.px-celle .blocco .cap{font-size:10px;font-weight:800;letter-spacing:.06em;color:#667085;
  text-transform:uppercase;margin-bottom:8px}
.px-celle .notaStorico{font-size:11.5px;color:#98a2b3;margin:0 0 8px;line-height:1.5}

table.tabellaStorico{width:100%;border-collapse:collapse;font-size:11.5px;
  font-variant-numeric:tabular-nums}
table.tabellaStorico td{padding:5px 7px;border-bottom:1px solid #f2f5f9}
table.tabellaStorico th{text-align:left;font-size:9.5px;letter-spacing:.05em;color:#98a2b3;
  text-transform:uppercase;font-weight:800;padding:5px 7px;border-bottom:1px solid #e8ecf1;
  /* L'intestazione resta visibile mentre si scorrono settecento righe. */
  position:sticky;top:0;background:#fff;z-index:1}
table.tabellaStorico td.n{font-weight:700}
table.tabellaStorico td.ko{color:#c0392b;font-weight:700}
table.tabellaStorico td.piccolo{font-size:10.5px;color:#667085}
table.tabellaStorico.righe tbody tr:hover{background:#f7f9fc}
.px-celle .scrollStorico{max-height:340px;overflow:auto;border-radius:8px}

.px-celle .pillS{display:inline-block;font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 8px}
.px-celle .pillS.ok{background:#e8f6ed;color:#14863d}
.px-celle .pillS.ko{background:#fdeceb;color:#c0392b}
.px-celle .siglaS{display:inline-block;font-family:ui-monospace,Consolas,monospace;
  font-weight:700;background:#0b0b0b;color:#fff;border-radius:5px;padding:2px 6px;font-size:11px}

@media (max-width:900px){
  .px-celle .storicoRiga{grid-template-columns:minmax(0,1fr)}
}