/* Copia di SUPERAPP/web/klnk/ui/klnk-ui.css, 18/10/2026 (design system degli strumenti online SELPRO). Non si modifica qui: le regole del pannello stanno in admin.css. */
/* KLNK — design system e componenti touch (estratti dal banco v8, 03/10). Token da web/mhub.html (DS SELPRO).
   Regole: docs/KLNK-DS.md. Usato da web/klnk/index.html (app) e web/klnk/banco.html (banco di prova). */
/* ---- cornice dell'app: contenitore delle container query (la misura la decide la pagina) ---- */
.app{container:app / inline-size; position:relative; overflow:hidden; background:var(--bg)}
/* Banco di prova dei componenti touch KLNK. Token e componenti presi da CONTROLLO REMOTO/web/mhub.html (DS SELPRO). */
:root{
  --navy:#00294C; --bg:#f2f4f7; --surface:#ffffff; --ink:#0f1c2e; --muted:#5a6675;
  --line:#e3e8ef; --chip:#eef1f5; --tenue:#f7f9fc;
  --ok:#1f7a45; --okbg:#e6f4ec; --warn:#8a5d08; --warnbg:#fff4d6;
  --bad:#b23b2e; --badbg:#fde8e8; --info:#1c6298; --infobg:#e8f1f8;
  /* colori di marca dei ventilatori (Federico 7/10): SOLO il pallino davanti al nome del costruttore nel tag neutro, mai un tag pieno (i colori pieni sono degli stati). Distinti fra loro e leggibili su fondo chiaro
     (contrasto sul tag ≥ 3:1; lo Ziehl-Abegg è un ocra scuro, 3,8:1 sul tag .chip #eef1f5: Federico 7/10 notte, scurito dal giallo #B88600 che stava a 2,87:1); il pallino non è mai l'unico segnale: c'è sempre il nome. Marche non in elenco: grigio */
  --verde-marca:#03FFB3;   /* verde del marchio KLNK: ammesso SOLO dove docs/KLNK-DS.md lo dichiara (barra della prova in corso: anello del tempo e tasto Riavvia) */
  --marca-ebm:#1E78D2; --marca-ziehl:#957600; --marca-rosenberg:#D8323A; --marca-hidria:#E65C00; --marca-dunli:#2A9448; --marca-nicotra:#7E3FC0; --marca-altri:#7A8696;
  --fs12:12px; --fs13:13px; --fs15:15px; --fs17:17px; --fs22:22px; --fs32:32px; --fs40:40px;
  --r-card:20px; --r-ctrl:14px; --r-pill:999px;
  --btn-g:56px; --btn-m:44px; --btn-s:36px;
  --banco-h:60px;
  --pagina-max:1680px;   /* larghezza massima di OGNI pagina da PC (Federico 8/10, F11): stessa di Ventilatori e Prova; bordo sinistro e destro uguali in tutte le pagine */
}
*{box-sizing:border-box; margin:0; padding:0}
html{touch-action:manipulation; background:var(--bg)}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; font-size:var(--fs15); line-height:1.35;
  -webkit-tap-highlight-color:transparent}
button,input{font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit}
button{cursor:pointer; border:0; background:none}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px}
[hidden]{display:none!important}
svg.ic{display:block; flex:none}
.schermo{height:100%; overflow-y:auto; overscroll-behavior:contain}

/* ---- testata e lista parametri ---- */
.testata{position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 16px}
.testata .t1{font-size:var(--fs17); font-weight:800; color:var(--navy)}
.testata .t2{font-size:var(--fs12); color:var(--muted); margin-top:1px}
.testata .spazio{flex:1}
.contenuto{display:grid; gap:16px; padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); margin:0 auto; max-width:var(--pagina-max)}
.titolo-sez{font-size:var(--fs13); font-weight:700; color:var(--muted); margin:2px 4px 8px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.riga{display:flex; align-items:center; gap:12px; width:100%; min-height:68px; padding:12px 12px 12px 16px;
  text-align:left; border-top:1px solid var(--line); transition:background .12s}
.card > .riga:first-child{border-top:0}
.riga:active{background:var(--tenue)}
.riga .testo{flex:1 1 40%; min-width:0}
.riga .nome{font-size:var(--fs15); font-weight:700; display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.riga .sub{font-size:var(--fs12); color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
/* Federico 03/10: valori lunghi (es. «Night Limit · contatto chiuso») uscivano dallo schermo sul telefono */
.riga .val{flex:0 1 auto; min-width:0; max-width:58%; white-space:normal; text-align:right; overflow-wrap:anywhere; line-height:1.2;
  font-size:var(--fs17); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums}
.riga .val small{font-size:var(--fs13); font-weight:700; color:var(--muted); margin-left:3px}
.riga .chev{color:var(--muted)}
.pillola-salva{display:inline-flex; align-items:center; font-size:var(--fs12); font-weight:700; border-radius:var(--r-pill);
  padding:2px 9px; background:var(--warnbg); color:var(--warn); white-space:nowrap}
/* Federico 03/10: riga gialla + segno «!» al posto della pillola «da salvare», che rompeva il layout su telefono */
.riga.riga-pendente{background:var(--warnbg)}
.riga.riga-pendente:active{background:color-mix(in srgb, var(--warn) 18%, var(--warnbg))}
.segno-salva{flex:none; width:22px; height:22px; border-radius:50%; background:var(--warn); color:#fff; font-size:14px;
  font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center}
.val-vuoto{color:var(--muted); font-style:italic; font-weight:600}
.eti-multi{display:inline-flex; align-items:center; gap:6px}
.riga-scelta .et{display:flex; flex-direction:column; gap:2px}
.sub-scelta{font-size:var(--fs12); font-weight:500; color:var(--muted)}
.pillola-conta{font-size:var(--fs12); font-weight:700; border-radius:var(--r-pill); padding:5px 12px; white-space:nowrap;
  background:var(--warnbg); color:var(--warn)}
@container app (min-width:700px){
  .contenuto{grid-template-columns:1.25fr 1fr; gap:24px; padding:24px; align-items:start}
  .testata{padding:12px 24px; min-height:72px}
  .testata .t1{font-size:var(--fs22)}
}
@container app (min-width:1100px){ .contenuto{padding:32px; gap:32px} }

/* ---- pannello dal basso (telefono) / finestra centrata (tablet, PC) ---- */
.velo{position:absolute; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,41,76,0); transition:background-color .26s}
.velo.aperto{background:rgba(0,41,76,.4)}
.foglio{position:relative; width:100%; max-height:calc(100% - 32px); overflow:hidden; display:flex; flex-direction:column;
  background:var(--surface); border-radius:24px 24px 0 0; box-shadow:0 -1px 2px rgba(16,33,52,.06);
  margin-bottom:var(--kb,0px); transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), margin-bottom .2s, height .25s cubic-bezier(.2,.8,.2,1)}
.velo.aperto .foglio{transform:translateY(0)}
.foglio.trascina{transition:none}
.presa-foglio{touch-action:none; cursor:grab; flex:none}
.maniglia-zona{height:24px; display:flex; align-items:center; justify-content:center}
.maniglia{width:40px; height:5px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--ink) 22%, var(--bg))}
.guida-suggerimento{display:flex; align-items:center; justify-content:center; gap:5px; width:100%; min-height:26px;
  font-size:var(--fs12); font-weight:600; color:var(--muted)}
.guida-suggerimento svg{transition:transform .2s}
.guida-suggerimento.su svg{transform:rotate(180deg)}
.foglio-testa{padding:4px 20px 12px; display:flex; flex-direction:column; gap:3px}
.foglio-testa-riga{display:flex; align-items:center; gap:10px}
.foglio-testa h3{font-size:var(--fs17); font-weight:800; color:var(--navy); flex:1; min-width:0}
.foglio-testa p{font-size:var(--fs13); color:var(--muted); font-variant-numeric:tabular-nums}
.titolo-sezione-pann{font-size:var(--fs13); font-weight:700; color:var(--muted); margin:2px 4px 6px}
.btn-guida{flex:none; min-height:44px; min-width:44px; padding:0 16px; border-radius:var(--r-pill); background:var(--chip);
  color:var(--navy); font-size:var(--fs13); font-weight:700}
.btn-guida[aria-pressed="true"]{background:var(--surface); color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy)}   /* blu pieno solo per «Salva» */
/* P-05: klnk-ui.js (calcolaAltezze) lascia al corpo «contenuto + 12 px»: con 6+16 px di margine il corpo scorreva di 10 px; ora 0+12 */
.foglio-corpo{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 20px 12px}
.foglio-fissa{flex:none; padding:12px 20px 16px}
.foglio-azioni{display:flex; gap:10px; flex:none; padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.btn-secondario{flex:1 1 0; min-width:0; height:var(--btn-g); border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--r-pill); padding:0 20px; font-size:var(--fs15); font-weight:700; transition:transform .08s}
.btn-enorme{flex:1 1 0; min-width:0; min-height:var(--btn-g); border:1.5px solid transparent; border-radius:var(--r-pill); background:var(--navy);
  color:#fff; font-size:var(--fs17); font-weight:700; padding:0 20px; transition:transform .08s}
.btn-secondario:active,.btn-enorme:active{transform:scale(.98)}
@container app (min-width:700px){
  .velo{align-items:center; padding:24px}
  .foglio{max-width:480px; max-height:calc(100% - 48px)!important; border-radius:var(--r-card); margin-bottom:0;
    box-shadow:0 1px 2px rgba(16,33,52,.06); transform:translateY(12px); opacity:0; transition:transform .2s ease-out, opacity .2s}
  .velo.aperto .foglio{transform:none; opacity:1}
  .presa-foglio{touch-action:auto; cursor:default}
  .maniglia-zona{display:none}
  .guida-suggerimento{display:none}
  .foglio-testa{padding-top:20px}
  .foglio-corpo{padding:6px 28px 20px}
  .foglio-fissa{padding:12px 28px 16px}
  .foglio-azioni{padding:16px 28px 28px}
}

/* ---- encoder orizzontale a lineette ---- */
.enc + .enc{margin-top:14px}
.enc-valore{display:flex; align-items:baseline; justify-content:center; gap:2px; margin:4px 0 12px}
.enc-num{min-width:96px; min-height:64px; padding:0 6px; border-radius:var(--r-ctrl); font-size:52px; font-weight:800; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.5px; transition:background .12s}
.enc-num:active{background:var(--chip)}
.enc-unita{font-size:var(--fs22); font-weight:700; color:var(--muted)}
/* unità di misura lunga nel controllo compatto («giri/min», Federico 8/10 notte: usciva dalla card): piccola, su una riga, e il cursore lascia il posto a −, + e al numero */
.enc-unita-lunga{font-size:var(--fs13); white-space:nowrap}
.cur.compatto:has(.enc-unita-lunga) .cur-range{display:none}
.cur.compatto:has(.enc-unita-lunga) .cur-riga{justify-content:flex-start}
.enc-input{width:180px; height:64px; text-align:center; font-size:44px; font-weight:800; font-variant-numeric:tabular-nums;
  border:2px solid var(--navy); border-radius:var(--r-ctrl); background:#fff; color:var(--ink)}
.enc-eti{font-size:var(--fs13); font-weight:700; color:var(--muted); margin:0 0 6px 2px}
.enc-riga{display:flex; align-items:center; gap:10px}
.step-btn-g{flex:none; width:56px; height:56px; border-radius:50%; background:var(--chip); color:var(--navy);
  display:flex; align-items:center; justify-content:center; transition:background .12s, transform .08s; touch-action:none; user-select:none; -webkit-user-select:none}
.step-btn-g:active{transform:scale(.94); background:var(--line)}
.step-btn-g:disabled{opacity:.35; cursor:default}
.enc-traccia{flex:1; min-width:0; position:relative; height:76px; border-radius:var(--r-ctrl); background:var(--chip);
  touch-action:none; cursor:grab; overflow:hidden; user-select:none; -webkit-user-select:none}
.enc-traccia.presa{cursor:grabbing}
.enc-traccia canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.enc-indice{position:absolute; left:50%; top:6px; bottom:6px; width:4px; margin-left:-2px; border-radius:2px; background:var(--navy); pointer-events:none}
.enc.compatto .enc-traccia{height:64px}
.enc.scrivi .enc-riga{display:none}
.enc-limiti{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:8px 66px 0;
  font-size:var(--fs12); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; min-height:18px}
.enc-avviso{color:var(--bad); font-weight:700; opacity:0; transition:opacity .2s}
.enc-avviso.vis{opacity:1}
.enc-nota{font-size:var(--fs13); color:var(--muted); text-align:center; margin-top:12px}
.ora-grande{display:flex; align-items:baseline; justify-content:center; gap:10px; margin:4px 0 14px}
.ora-grande b{font-size:52px; font-weight:800; line-height:64px; font-variant-numeric:tabular-nums; letter-spacing:-.5px}
.ora-grande span{font-size:var(--fs13); font-weight:700}

/* ---- cursore a trascinamento (mouse/trackpad): stesso ruolo dell'encoder, Federico 03/10 ---- */
.cur-range{-webkit-appearance:none; appearance:none; flex:1; min-width:0; width:100%; height:6px; border-radius:var(--r-pill); cursor:pointer;
  background:linear-gradient(to right, var(--navy) 0%, var(--navy) var(--val,50%), var(--chip) var(--val,50%), var(--chip) 100%)}
.cur-range::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 1px 2px rgba(16,33,52,.06)}
.cur-range::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--navy)}
.cur-riga{display:flex; align-items:center; gap:12px}
.cur-valore{display:flex; align-items:baseline; justify-content:center; gap:6px; margin:4px 0 14px}
.cur-num{width:140px; height:56px; text-align:center; font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; border:1.5px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); color:var(--ink); -moz-appearance:textfield}
.cur-num::-webkit-inner-spin-button,.cur-num::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.cur-num-piccolo{width:76px; height:40px; font-size:var(--fs17); text-align:right; padding:0 10px}
.step-btn-g.piccolo{width:40px; height:40px}

/* ---- campo ora (mouse/trackpad): <input type=time>, etichetta sempre visibile, Federico 03/10 ---- */
.ora-campo{display:flex; flex-direction:column; gap:6px}
/* il nome è già scritto sopra (titolo del pannello, della card o «Inizio/Fine»): qui resta solo per chi usa il lettore di schermo */
.ora-eti{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ora-campo input{height:56px; border:1.5px solid var(--line); border-radius:var(--r-ctrl); padding:0 14px; font-size:var(--fs22); font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--surface)}

/* ---- pillole di scelta ---- */
/* scelte = CONTROLLO A SEGMENTI, non pulsanti (Federico 03/10: la scelta blu piena si confondeva con «Salva»):
   contenitore grigio, segmento scelto bianco in rilievo con testo blu e spunta; il blu pieno resta solo all'azione */
/* niente a capo (Federico 03/10): un controllo a segmenti che va su due righe non è più un controllo unico */
.pillole{display:flex; flex-wrap:nowrap; gap:4px; padding:4px; margin:4px 0 4px;
  background:var(--chip); border-radius:calc(var(--r-ctrl) + 4px)}
.pillole button{flex:1 1 0; min-width:0; min-height:48px; padding:0 8px; border-radius:var(--r-ctrl); background:transparent; color:var(--muted);
  font-size:var(--fs15); font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s, color .12s, box-shadow .12s}
.pillole button[aria-checked="true"]{background:var(--surface); color:var(--navy); box-shadow:0 1px 2px rgba(16,33,52,.06)}
.pillole button[aria-checked="true"]::before{content:""; width:16px; height:16px; flex:none;
  background:currentColor; -webkit-mask:var(--spunta) center/contain no-repeat; mask:var(--spunta) center/contain no-repeat}
:root{--spunta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.foglio-azioni{border-top:1px solid var(--line)}
#f-salva:disabled{background:var(--chip); color:var(--muted); box-shadow:none; cursor:default}
/* elenchi di scelta: variante C scelta da Federico il 04/10 (un elenco unico con righe divise e cerchio di scelta a destra) */
.elenco-scelte{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); overflow:hidden}
.riga-scelta{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:52px;
  padding:0 14px 0 16px; text-align:left; font-size:var(--fs15); font-weight:600; transition:background .12s}
.riga-scelta + .riga-scelta{border-top:1px solid var(--line)}
.riga-scelta:active{background:var(--tenue)}
.riga-scelta[aria-checked="true"]{color:var(--navy); font-weight:700}
.riga-scelta .spunta{flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(15,28,46,.28); color:var(--surface)}
.riga-scelta .spunta svg{width:14px; height:14px; stroke:var(--surface); stroke-width:3.2}
.riga-scelta[aria-checked="true"] .spunta{background:var(--navy); border-color:var(--navy)}

/* ---- interruttore grande ---- */
.riga-sw .nome{font-size:var(--fs15)}
.interr{flex:none; position:relative; width:52px; height:32px; border-radius:var(--r-pill); background:rgba(15,28,46,.18); transition:background .15s}
.interr i{position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(16,33,52,.06); transition:transform .15s}
.riga-sw[aria-checked="true"] .interr{background:var(--navy)}
.riga-sw[aria-checked="true"] .interr i{transform:translateX(20px)}

/* ---- tieni premuto per confermare ---- */
.blocco{padding:16px}
.blocco + .blocco{border-top:1px solid var(--line)}
.blocco .nome{font-size:var(--fs15); font-weight:700}
.blocco .sub{font-size:var(--fs13); color:var(--muted); margin:3px 0 12px; line-height:1.4}
.tieni{--p:0; position:relative; width:100%; min-height:var(--btn-g); border-radius:var(--r-pill); border:1.5px solid var(--bad);
  background:var(--badbg); color:var(--bad); font-size:var(--fs17); font-weight:700; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.tieni .eti,.tieni .riemp{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px}
.tieni .riemp{background:var(--bad); color:#fff; clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0)}
.tieni.fatto{border-color:var(--ok); background:var(--okbg); color:var(--ok)}
.tieni.fatto .riemp{display:none}
.esito{font-size:var(--fs13); font-weight:600; color:var(--muted); margin-top:8px; min-height:18px; text-align:center}

/* ---- guida del pannello ---- */
.foglio-guida{margin-top:18px; padding-top:14px; padding-bottom:4px; border-top:1px solid var(--line)}
.foglio-guida h4{font-size:var(--fs13); font-weight:800; color:var(--navy); margin:0 0 4px}
.foglio-guida .par{font-size:var(--fs15); color:var(--ink); line-height:1.45; margin:0 0 16px}
.foglio-guida a{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:var(--fs13); font-weight:700; color:var(--navy)}

/* ---- ricerca e griglia cluster (livello 1) ---- */
.ricerca{position:relative; margin-bottom:14px}
.ricerca svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.ricerca input{width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  padding:0 16px 0 42px; font-size:16px; color:var(--ink)}
.ricerca input:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px}
.risultati-ricerca{margin-bottom:16px}
.risultati-ricerca .riga .sub-cl{font-size:var(--fs12); color:var(--muted); margin-top:1px}
.griglia-cluster{display:grid; grid-template-columns:1fr; gap:12px}
.cluster-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px;
  text-align:left; display:flex; flex-direction:column; gap:8px; transition:background .12s; width:100%}
.cluster-card:active{background:var(--tenue)}
.cluster-card .cc-testa{display:flex; align-items:center; gap:10px}
.cluster-card .icona{width:40px; height:40px; border-radius:12px; background:var(--chip); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none}
.cluster-card .tit{font-size:var(--fs15); font-weight:700; flex:1; min-width:0; overflow-wrap:anywhere}
.cluster-card .cc-tag{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; font-size:var(--fs12); font-weight:600; color:var(--ink);
  background:var(--chip); border-radius:var(--r-pill); padding:4px 10px; white-space:nowrap}
.segno-conta{flex:none; height:22px; min-width:22px; padding:0 7px; border-radius:var(--r-pill); background:var(--warn); color:#fff;
  font-size:var(--fs12); font-weight:800; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap}
.testata-cluster{display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:6px}
.btn-indietro{width:44px; height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:var(--r-ctrl); background:var(--chip); color:var(--navy)}
/* ---- testata di sezione con guida (Federico 03/10) ---- */
.testa-sez{display:flex; align-items:center; gap:12px; margin:28px 2px 12px}
#righeCluster > .testa-sez:first-child, .sez-param:first-child .testa-sez{margin-top:4px}
.testa-sez .icona{width:40px; height:40px; border-radius:12px; background:var(--chip); color:var(--navy); display:flex; align-items:center; justify-content:center; flex:none}
.ts-testo{flex:1; min-width:0}
.testa-sez h3{font-size:var(--fs17); font-weight:800; color:var(--navy)}
.testa-sez p{font-size:var(--fs13); color:var(--muted)}
.btn-aiuto{flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--navy); font-size:var(--fs17); font-weight:800}
@container app (min-width:700px){
  #vistaCluster{grid-template-columns:280px minmax(0,1fr); align-items:stretch}
  .griglia-cluster{grid-template-columns:1fr}
  .cluster-card.selezionato{background:var(--surface); box-shadow:inset 0 0 0 2px var(--navy)}
  .cluster-card.selezionato .tit{color:var(--navy); font-weight:800}
  .cluster-card.selezionato .icona{background:var(--navy); color:#fff}
  .btn-indietro{display:none}
  .testa-sez h3{font-size:var(--fs22)}
  .schermo{display:flex; flex-direction:column; overflow:hidden}
  .barraTop,.riga-ricerca{flex:none}
  #vistaCluster{flex:1 1 auto; min-height:0; width:100%; grid-template-rows:minmax(0,1fr); padding-top:0; padding-bottom:0}
  #colLista,#colDestra{min-height:0; height:100%; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-gutter:stable; scrollbar-width:thin}
  #colLista{padding:24px 14px 24px 4px}   /* spazio per la barra di scorrimento: non deve passare sopra le card */
  #colDestra{padding:24px 4px 24px}
  .app.con-barra #colLista,.app.con-barra #colDestra{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (hover:hover){ .cluster-card:not(.selezionato):hover{background:var(--tenue)} }

/* ---- barra in alto: percorso, ricerca (Federico 03/10) ---- */
.barraTop{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; min-height:60px;
  padding:env(safe-area-inset-top) 12px 0; background:var(--surface); border-bottom:1px solid var(--line)}
.bt-tit-lista{font-size:var(--fs17); font-weight:800; color:var(--navy); padding:0 6px}
/* C-06/D-07 (audit 06/10): mai puntini su un titolo (a 390 px «Ingressi digitali S1/S2/S3» e «Comando ventilatori» venivano tagliati): sotto i 400 px il corpo scende a 15 px e,
   se non basta, il titolo va a capo su due righe (la barra è alta almeno 60 px, due righe da 15 px ne occupano 36) */
.bt-centro{flex:1; min-width:0; text-align:center; font-size:var(--fs17); font-weight:800; line-height:1.2; color:var(--ink); overflow-wrap:break-word}
@media (max-width:400px){ .bt-centro{font-size:var(--fs15)} }
/* barra della app a tre colonne (index.html): il centro sta al centro VERO della pagina qualunque cosa ci sia ai lati
   (1fr auto 1fr: le due colonne laterali hanno la stessa larghezza finché il contenuto lo permette) */
.barraTop.bt-tre{display:grid; grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr); gap:8px}   /* i lati non scendono sotto il loro contenuto: un titolo lungo va a capo (mai puntini), non finisce sotto le icone */
.bt-sx,.bt-dx{display:flex; align-items:center; gap:8px; min-width:0}
.bt-sx{justify-self:start} .bt-dx{justify-self:end}
.bt-mezzo{display:flex; align-items:center; justify-content:center; min-width:0}
.bt-tre .bt-centro{flex:0 1 auto}
.bt-logo-klnk{display:block; flex:none; height:18px; width:auto; margin:0 6px}
.bt-logo-selpro{display:block; flex:none; height:30px; width:auto}
/* etichetta «Beta» subito a destra del logo KLNK (Federico 9/10): testo piccolo del DS, non è un bottone (niente clic né tocchi: il logo sotto resta l'unico bersaglio della pressione lunga) */
.bt-beta{flex:none; margin-left:-6px; padding:3px 8px; border-radius:var(--r-pill); background:var(--chip); color:var(--muted);
  font-size:var(--fs12); font-weight:600; line-height:1.2; white-space:nowrap; pointer-events:none; user-select:none; -webkit-user-select:none}
/* sotto i 384 px il logo SELPRO al centro non avrebbe più 8 px di aria e la colonna di sinistra lo spingerebbe fuori centro (misurato: a 360 px di 11 px): lì l'etichetta si omette nella barra */
@container app (max-width:383px){ .bt-beta{display:none} }
.solo-lettore{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.bt-cerca{min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; color:var(--navy)}
.riga-ricerca{padding:10px 16px 0; background:var(--surface); border-bottom:1px solid var(--line)}
.nota-pie{font-size:var(--fs12); color:var(--muted); text-align:center; margin:14px 4px 0}

/* ---- schermata di attesa durante il riavvio (Federico 03/10) ---- */
.attesa{position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(242,244,247,.97)}
.attesa-box{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 24px; text-align:center; box-shadow:0 1px 2px rgba(16,33,52,.06)}
.attesa-giro{width:48px; height:48px; margin:0 auto 16px; border-radius:50%; border:4px solid var(--chip);
  border-top-color:var(--navy); animation:giro .9s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.attesa-ok{width:48px; height:48px; margin:0 auto 16px; border-radius:50%; background:var(--okbg); color:var(--ok);
  display:flex; align-items:center; justify-content:center}
.attesa h3{font-size:var(--fs17); font-weight:800; color:var(--navy)}
.attesa p{font-size:var(--fs15); color:var(--muted); margin-top:6px; line-height:1.4}
.attesa-tempo{font-variant-numeric:tabular-nums; font-size:var(--fs13)!important}
.attesa-azioni{display:flex; gap:10px; margin-top:20px}
.attesa.errore h3{color:var(--bad)}

/* ---- comparatore a due soglie / finestra oraria (livello 2) ---- */
.comp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px; margin-bottom:12px}
.comp-tit{font-size:var(--fs12); font-weight:700; color:var(--muted)}
.comp-barra{position:relative; height:28px; margin:22px 14px 8px}
.comp-traccia{position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; border-radius:3px; background:var(--chip)}
.comp-evid{position:absolute; top:50%; height:6px; margin-top:-3px; border-radius:3px; background:var(--navy)}
.comp-misurato{position:absolute; top:-12px; width:0; height:0; margin-left:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--warn)}
.comp-maniglia{position:absolute; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  background:#fff; border:3px solid var(--navy); box-shadow:0 1px 2px rgba(16,33,52,.06); touch-action:none}
.comp-maniglia::before{content:''; position:absolute; inset:-11px}
.comp-testo{font-size:var(--fs12); color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums; text-align:center}
.notte-barra{position:relative; height:28px; margin:4px 0 6px; background:var(--chip); border-radius:8px; overflow:hidden}
.notte-evid{position:absolute; top:0; bottom:0; background:var(--navy)}
.notte-tacche{display:flex; justify-content:space-between; font-size:var(--fs12); color:var(--muted); font-variant-numeric:tabular-nums}

/* ---- card modificabili (tablet orizzontale/PC, container >=1000px, Federico 03/10) ---- */
#grigliaParam{display:block}   /* lo spazio sopra la barra lo dà #colDestra (E6) */
.griglia-sez{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:stretch}   /* E2: card della stessa riga alte uguali */
.griglia-sez > *{min-width:0}   /* le card non escono dalla colonna */
@container app (min-width:1000px){ .griglia-sez{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vistaCluster{grid-template-columns:300px minmax(0,1fr)} .griglia-cluster{grid-template-columns:1fr} }
.card-param{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px; transition:box-shadow .15s}
.card-param.cp-largo{grid-column:1 / -1}
/* pendente = sfondo giallo coerente con le righe, non più il riquadro blu (Federico 03/10) */
.card-param.cp-pendente{box-shadow:none; background:var(--warnbg); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
/* E4: testata allineata in alto; il titolo può andare su due righe senza spingere fuori «i» e reset */
.cp-testa{display:flex; align-items:flex-start; gap:8px; margin-bottom:10px}
.card-param.cp-switch{justify-content:center}   /* E2: card interruttore, contenuto centrato in verticale */
.card-param.cp-switch .cp-testa{margin:0; align-items:center}
.cp-nome{flex:1; min-width:0; font-size:var(--fs15); font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:28px}
.cp-val{font-size:var(--fs22); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap}
/* E1: reset e «i» identici (P-06: 36x36, icona invariata; margine -4px = restano centrati sul titolo da 28 px e la testata non cresce); il reset occupa sempre il suo posto (visibility, non display) */
/* audit 06/10 (stesso metodo di .cp-info): bersaglio 44x44, il cerchio con il filo ambra lo disegna ::before a 4 px dai bordi (36 px visibili), i margini negativi lo lasciano dov'era */
.cp-reset{position:relative; isolation:isolate; flex:none; width:44px; height:44px; margin:-8px -4px; border-radius:50%; color:var(--warn); display:flex; align-items:center; justify-content:center; padding:0}
.cp-reset::before{content:""; position:absolute; inset:4px; z-index:-1; border-radius:50%; background:var(--surface); border:1.5px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.cp-reset svg{width:16px; height:16px}
.cp-reset[hidden]{display:flex!important; visibility:hidden}
.cp-corpo{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center}   /* E2: controllo ben disposto se la card è più alta */
.btn-scelta{width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px 0 16px; border:1.5px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); font-size:var(--fs17); font-weight:800; color:var(--navy); text-align:left}
.btn-scelta:hover{background:var(--tenue)}
.cp-riga-sw{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; text-align:left}
.cp-riga-sw .sub{font-size:var(--fs12); color:var(--muted); margin-top:2px; display:block}
/* C-16/D-13 (audit 06/10): «i» con il bersaglio da 44x44 del DS. Il cerchio che si vede resta da 36 (padding 4 + sfondo solo nel riquadro interno) e i margini
   negativi (-8px sopra e sotto, -4px ai lati) lo lasciano dov'era: la testata resta alta 28 px e il testo non si sposta */
.cp-info{flex:none; width:44px; height:44px; margin:-8px -4px; padding:4px; border-radius:50%; background:var(--chip); background-clip:content-box; color:var(--navy); font-size:var(--fs13); font-weight:800; display:flex; align-items:center; justify-content:center}
.cp-info[aria-pressed="true"]{background-color:var(--navy); color:#fff}
.cp-guida-mini{font-size:var(--fs13); color:var(--ink); line-height:1.4; background:var(--tenue); border-radius:var(--r-ctrl); padding:10px 12px; margin:0 0 10px}
.cp-guida-mini h4{font-size:var(--fs12); font-weight:800; color:var(--navy); margin:0 0 3px}
.cp-guida-mini p{margin:0 0 8px; max-width:75ch}   /* D-03 (9/10): guida aperta in una card larga, mai oltre ~75 caratteri per riga */
.card-param .enc-traccia{touch-action:pan-y}
.card-param .cp-corpo > .enc.compatto > .enc-eti{display:none}   /* il nome è già in testa alla card; restano visibili «Ore»/«Minuti» */
.card-param .cur-num-piccolo{width:96px; height:48px; font-size:var(--fs22)}
.card-param .ora-campo input{height:48px}   /* E2: stessa altezza del campo numero */
/* E3: dentro le card il segmento scelto è bianco con testo blu in grassetto, senza spunta; tre voci da 10 caratteri stanno in mezza larghezza */
.card-param .pillole button{font-size:var(--fs13); padding:0 6px}
.card-param .pillole button[aria-checked="true"]{font-weight:800}
.card-param .pillole button[aria-checked="true"]::before{content:none; display:none}
.cp-coppia{display:flex; gap:14px; flex-wrap:wrap}
.cp-coppia > div{flex:1; min-width:140px}
/* titolo leggibile sopra un sotto-controllo (soglie, Inizio/Fine): non più una didascalia minuscola (Federico 03/10) */
.cp-sub-eti{font-size:var(--fs15); font-weight:800; color:var(--ink); margin:10px 0 2px}

/* ---- barra fissa Salva/Annulla della griglia di card ---- */
.barra-fissa{position:absolute; left:0; right:0; bottom:0; z-index:55; display:flex; align-items:center; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line)}
.barra-fissa .bf-testo{flex:1; font-size:var(--fs13); font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px}
.barra-fissa button{flex:none; height:48px; min-height:48px; padding:0 24px; border-radius:var(--r-pill); font-size:var(--fs15); font-weight:700}
#bfAnnulla{background:var(--surface); color:var(--ink); border:1.5px solid var(--line)}
#bfSalva{background:var(--navy); color:#fff}   /* blu pieno solo per l'azione «Salva» */
/* D3 (8/10, F11): la barra è a tutta larghezza dello schermo ma il suo contenuto sta fra gli stessi bordi del contenuto della pagina (--pagina-max, margine di 32);
   le card dei Parametri da 1500 px sono tre per riga */
@container app (min-width:1100px){
  .barra-fissa{padding-left:max(32px, calc((100cqw - var(--pagina-max)) / 2 + 32px)); padding-right:max(32px, calc((100cqw - var(--pagina-max)) / 2 + 32px))}
}
@container app (min-width:1500px){ .griglia-sez{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* un solo modo di salvare ovunque (Federico 03/10): la barra compare anche sul telefono, sotto i 700px solo il testo + «Salva» */
@container app (max-width:699px){ #bfAnnulla{display:none} }
/* E6: la barra misura ~69px + safe-area; sotto i 700px lo spazio lo dà #vistaCluster, da 700 le due colonne (96px) */
@container app (max-width:699px){ .app.con-barra #vistaCluster{padding-bottom:calc(96px + env(safe-area-inset-bottom))} }

/* ---- riepilogo prima di scrivere sulla scheda (Federico 03/10) ---- */
.riep-riga{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:6px 12px; padding:12px 0; border-top:1px solid var(--line)}   /* valore lungo: va a capo sotto il nome */
.riep-riga:first-child{border-top:0}
.riep-nome{font-weight:700; display:flex; flex-direction:column; gap:2px; flex:1 1 150px; min-width:min(100%,150px)}
.riep-val{text-align:right; font-variant-numeric:tabular-nums; margin-left:auto; max-width:100%; overflow-wrap:anywhere}
.riep-val s{color:var(--muted)}
.riep-val b{color:var(--navy)}
.riep-nota{font-size:var(--fs12); font-weight:600; color:var(--warn)}
.riep-delicata{background:var(--warnbg); border-radius:var(--r-ctrl); padding:12px; margin:4px 0}
.riep-annulla{width:100%; margin-top:16px}
.riep-avviso{background:var(--warnbg); color:var(--warn); font-size:var(--fs13); font-weight:700; border-radius:var(--r-ctrl); padding:12px; margin:0 0 8px}
/* lavoro D (7/10): avviso di livello sui parametri. Nota in testa a un blocco (stessa forma dell'avviso del riepilogo) dentro la card delle righe o la griglia delle card;
   segno sul singolo campo = la pillola grigia «ts-stato ts-no» (non gialla: il giallo è «da salvare»); frase intera sulle card come nota piccola */
.card > .nota-liv{margin:8px 16px 8px}
.griglia-sez > .nota-liv{grid-column:1 / -1; margin:0}
.nota-liv + .riga{border-top:1px solid var(--line)}
.seg-liv{white-space:nowrap}
.cp-liv{margin:-2px 0 10px}
/* elenco a richiesta dei valori non salvati (KLNK.elencoARichiesta): <details> con la riga «Quali valori» (44 px) e l'elenco raggruppato per livello */
.er-box{margin-top:8px}
.er-tasto{display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--navy); font-size:var(--fs15); font-weight:700}
.er-lista h4{font-size:var(--fs13); font-weight:800; color:var(--navy); margin:8px 0 4px}
.er-lista ul{margin:0 0 4px 18px; font-size:var(--fs13); color:var(--ink); line-height:1.4}
/* G-3 (6/10): conferma «Salvato» dei Parametri, riga verde sotto la barra per 4 s (cluster.js mostraSalvato) */
.riga-salvato{flex:none; margin:8px 16px 0; background:var(--okbg); color:var(--ok); font-size:var(--fs13); font-weight:700; border-radius:var(--r-ctrl); padding:12px}

/* barra a intervallo + pulsanti valore (Federico 03/10) */
.barra-int{position:relative; height:10px; border-radius:5px; background:var(--chip); overflow:hidden; margin:14px 0 6px}
.barra-int-evid{position:absolute; top:0; bottom:0; background:var(--navy); border-radius:5px}
.barra-int-tacche{display:flex; justify-content:space-between; font-size:var(--fs12); color:var(--muted); font-variant-numeric:tabular-nums}
.coppia-btn{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.btn-valore{min-height:56px; border:1.5px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 10px}
.btn-valore:active{background:var(--tenue)}
.btn-valore.pendente{background:var(--warnbg); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.bv-eti{font-size:var(--fs12); font-weight:700; color:var(--muted)}
.bv-val{font-size:var(--fs17); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums}
.comp-card.spento .barra-int,.comp-card.spento .coppia-btn{opacity:.55}
.nota-sez{font-size:var(--fs13); color:var(--muted); margin:0 4px 10px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ---- sezioni comprimibili nei gruppi con più sezioni (Federico 03/10 sera): testata = pulsante, stato testuale, freccia ---- */
.testa-sez-comprimibile{gap:8px}
.ts-toggle{flex:1; min-width:0; min-height:44px; display:flex; align-items:center; gap:12px; text-align:left; border-radius:var(--r-ctrl)}
.ts-toggle .icona{width:40px; height:40px; border-radius:12px; background:var(--chip); color:var(--navy); display:flex; align-items:center; justify-content:center; flex:none}
.ts-tit{display:block; font-size:var(--fs17); font-weight:800; color:var(--navy)}
.ts-riga{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.ts-sub{font-size:var(--fs13); color:var(--muted)}
.ts-stato{display:inline-flex; align-items:center; font-size:var(--fs12); font-weight:700; border-radius:var(--r-pill); padding:2px 10px}
.ts-ok{color:var(--ok); background:var(--okbg)}
.ts-no{color:var(--muted); background:var(--chip)}
.ts-freccia{flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.ts-freccia .ic{transition:transform .15s}
.ts-toggle[aria-expanded="true"] .ts-freccia .ic{transform:rotate(90deg)}
/* ---- rimando dalla funzione di un ingresso al gruppo dei suoi parametri (feedback 04/10, punto 13) ---- */
.rimando{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:6px 12px 6px 16px; text-align:left; color:var(--navy); font-size:var(--fs15); font-weight:700; background:var(--tenue)}
.rimando:active{background:var(--chip)}
.rimando .rim-icona{flex:none; width:32px; height:32px; border-radius:10px; background:var(--chip); display:flex; align-items:center; justify-content:center}
.rimando .rim-testo{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.rimando .chev{flex:none; color:var(--muted)}
.rimando-riga{border-top:1px solid var(--line)}
.rimando-card{margin:8px 0 4px; border:1.5px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface)}
[data-sez]{scroll-margin-top:76px}   /* la testata della sezione resta visibile sotto la barra in alto */
/* sottosezioni dei Parametri dell'ECpro (P4, 6/10): titolino con icona sopra i campi di una stessa funzione; riga sottile sopra (tranne la prima).
   In elenco sta dentro la card, fra le righe; da 1000 px sta nella griglia delle card e occupa tutta la riga. Nessuna card dentro una card. */
.sotto-sez{display:flex; align-items:center; gap:8px; padding:14px 16px 6px; border-top:1px solid var(--line); font-size:var(--fs13); font-weight:700; color:var(--muted); scroll-margin-top:76px}   /* come [data-sez]: il titolino resta visibile sotto la barra in alto */
.sotto-sez .ic{flex:none; width:18px; height:18px}
.sotto-sez span{min-width:0; overflow-wrap:anywhere}
.card > .sotto-sez:first-child{border-top:0}
.sotto-sez + .riga{border-top:0}   /* la riga sotto il titolino non raddoppia il filo */
.griglia-sez > .sotto-sez{grid-column:1 / -1; padding:16px 2px 0; margin-top:8px}
.griglia-sez > .sotto-sez:first-child{margin-top:0; padding-top:0; border-top:0}
/* grafico a linea (ui/klnk-grafico.js): card bianca con titolino e canvas; i colori del disegno li legge dai token */
.klnk-graf{display:flex; flex-direction:column; gap:8px; min-width:0; padding:14px 16px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card)}
.klnk-graf-tit{font-size:var(--fs13); font-weight:700; color:var(--muted)}
.klnk-graf-area{position:relative; width:100%; min-width:0}
.klnk-graf-area canvas{display:block; width:100%}
.klnk-graf-vuoto{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 12px; text-align:center; font-size:var(--fs13); color:var(--muted)}
@container app (min-width:700px){ .ts-tit{font-size:var(--fs22)} }