/* Copia di DESIGN-SYSTEM-STRUMENTI-ONLINE/klnk-ui.css, 2026-11-02 */
/* 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;   /* --tenue e --okbg: un valore solo per tutte le app (Federico 27/10/2026) */
  --filo-chiaro:#c9d4e0;   /* contorno di campi e tasti secondari (componente comune approvato da Federico il 27/10/2026, CERVELLO/Linee-guida/Componenti-comuni-app-online.md); è anche in klnk-pannelli.css */
  --navy-su:#0e3d69;   /* tasto blu al passaggio: stesso valore di klnk-stati.css, qui perché i componenti comuni lo usano anche senza quel foglio */
  --ok:#1f7a45; --okbg:#e9f6ee; --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:44px;   /* il tasto da 36 non c'è più (Federico 27/10): due altezze, 56 e 44; il nome resta come sinonimo di --btn-m per chi lo usa */
  --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:is(button,a[href],label,[role="button"],[role="link"],[role="option"],[role="radio"],[role="switch"],[role="checkbox"],[tabindex="0"]):active{background:var(--tenue)}   /* solo righe che si premono (28/10/2026) */
.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}
.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}
.foglio:focus{outline:none}   /* il foglio prende il fuoco da script quando non c'è un primo tasto: niente anello attorno a tutto il foglio */
/* FOGLI E FINESTRE, un componente solo (approvato da Federico 27/10/2026): telefono = foglio dal basso, raggio 24 in alto, velo navy .40;
   da 700 px finestra centrale (max 480, raggio 24); da 1000 px la variante ancorata `.foglio--ancorato` (440, sotto il tasto, senza velo scuro).
   La barretta (.maniglia-zona dentro .presa-foglio) c'è SOLO nel foglio che si trascina davvero: senza, la testa è un .foglio-testa figlio diretto di .foglio. */
.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:20px 20px 8px; display:flex; flex-direction:column; gap:3px}
.presa-foglio > .foglio-testa{padding-top:4px}   /* con la barretta sopra (24) la testa sale vicino a lei */
.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}
/* tasti del foglio (approvati 27/10): nel codice il primario viene PRIMA (Tab parte da lui, come si legge dall'alto); telefono = pila, tutti larghi uguali,
   alti 56, il primario in alto; da 700 px affiancati con row-reverse: il primario a destra (regole sotto) */
.foglio-azioni{container-type:inline-size; display:flex; flex-direction:column; gap:12px; flex:none; padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
/* Tasti: componente comune approvato da Federico il 27/10/2026 (CERVELLO/Linee-guida/Componenti-comuni-app-online.md).
   Due altezze: 56 per le azioni della pagina (primario e secondario alti UGUALI), 44 (.btn-compatto) solo dentro le righe. */
.btn-secondario{flex:1 1 0; min-width:0; height:var(--btn-g); border:1.5px solid var(--filo-chiaro); background:#fff; color:var(--navy);
  border-radius:var(--r-pill); padding:0 20px; font-size:var(--fs17); font-weight:700; transition:transform .08s}
.btn-enorme{flex:1 1 0; min-width:0; 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}
/* gli stessi tasti fatti con <a> (collegamenti che sembrano tasti): testo centrato come nel <button>, senza sottolineatura (guida, 27/10/2026) */
a:is(.btn-enorme,.btn-secondario,.btn-pericolo,.btn-ferma,.btn-su-scuro){display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
/* pericolo (rosso tenue), ferma (rosso pieno, SOLO per l'arresto), su fondo navy (bianco con testo navy): stessa forma e altezza del primario */
.btn-pericolo,.btn-ferma,.btn-su-scuro{display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; height:var(--btn-g); padding:0 20px;
  border:1.5px solid transparent; border-radius:var(--r-pill); font-size:var(--fs17); font-weight:700;
  transition:background-color .15s, border-color .15s, color .15s, filter .15s, transform .08s}
.btn-pericolo{background:var(--badbg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
.btn-ferma{background:var(--bad); border-color:var(--bad); color:#fff}
.btn-su-scuro{background:#fff; border-color:#fff; color:var(--navy)}
.btn-su-scuro:focus-visible{outline-color:#fff}
/* compatto: 44, testo 15, SOLO dentro le righe (si aggiunge al tasto: .btn-secondario.btn-compatto); viene dopo per vincere sull'altezza */
.btn-compatto{height:var(--btn-m); padding:0 16px; font-size:var(--fs15); flex:none}
/* pila (telefono): colonna, tutti a tutta larghezza; coppia (PC): riga a destra, larghi quanto il testo, min 140, alti uguali */
.btn-pila{display:flex; flex-direction:column; gap:12px; width:100%}
.btn-pila > *{flex:none; width:100%}
.btn-coppia{container-type:inline-size; display:flex; flex-direction:row-reverse; justify-content:flex-start; flex-wrap:wrap; gap:12px; width:100%}   /* nel codice il PRIMARIO viene prima: row-reverse lo mette a destra, l'inizio della riga è a destra */
.btn-coppia > *{flex:none; min-width:140px}
/* se la coppia non sta in riga va in pila, larghi uguali: il primario, primo nel codice, resta in alto (Tab = ordine visivo), senza order.
   Una container query non può cambiare il suo stesso contenitore (la colonna): perciò si agisce sui figli, tutti a tutta riga, e il wrap fa la pila */
@container (max-width:325px){.btn-coppia > *{width:100%}}
:is(.btn-enorme,.btn-secondario,.btn-pericolo,.btn-ferma,.btn-su-scuro,.btn-compatto):disabled{opacity:.45; cursor:default}   /* spento: nessuno stato */
:is(.btn-enorme,.btn-secondario,.btn-pericolo,.btn-ferma,.btn-su-scuro,.btn-compatto):not(:disabled):active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){:is(.btn-enorme,.btn-secondario,.btn-pericolo,.btn-ferma,.btn-su-scuro,.btn-compatto):not(:disabled):active{transform:none}}
/* stati: mouse solo dentro hover:hover (primario --navy-su, chiari --chip, pericolo rosso un poco più deciso); al tocco :active, uguale */
@media (hover:hover){
  .btn-enorme:not(:disabled):hover{background:var(--navy-su); border-color:var(--navy-su)}
  :is(.btn-secondario,.btn-su-scuro):not(:disabled):hover{background:var(--chip)}
  .btn-pericolo:not(:disabled):hover{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
  .btn-ferma:not(:disabled):hover{filter:brightness(.94)}
}
.btn-enorme:not(:disabled):active{background:var(--navy-su); border-color:var(--navy-su)}
:is(.btn-secondario,.btn-su-scuro):not(:disabled):active{background:var(--chip)}
.btn-pericolo:not(:disabled):active{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
.btn-ferma:not(:disabled):active{filter:brightness(.88)}
.foglio-azioni > *{flex:none; width:100%}   /* dopo i tasti: vince su flex:1 1 0 di .btn-enorme e .btn-secondario */
@container app (min-width:700px){
  .velo{align-items:center; padding:24px}
  .foglio{max-width:480px; max-height:calc(100% - 48px)!important; border-radius:24px; 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,.presa-foglio > .foglio-testa{padding:24px 28px 8px}
  .foglio-corpo{padding:0 28px 12px}
  .foglio-fissa{padding:12px 28px 16px}
  .foglio-azioni{flex-direction:row-reverse; justify-content:flex-start; flex-wrap:wrap; padding:16px 28px 28px}   /* row-reverse: l'inizio della riga è a destra */
  .foglio-azioni > *{width:auto; min-width:140px}
}
/* se la coppia non sta in riga va in pila (larghi uguali, il primario per primo: nel codice lo è già): mai a capo con larghezze diverse */
@container (max-width:325px){.foglio-azioni > *{width:100%}}
/* variante ancorata, da 1000 px, per i fogli aperti da un tasto della barra: larga 440, raggio 24, sotto il tasto, nessun velo scuro (il velo resta, trasparente, per chiudere col clic).
   La posizione la scrive KLNK.ancora(velo, tasto) di klnk-ui.js in --anc-t e --anc-r (sul velo). */
@container app (min-width:1000px){
  .velo:has(> .foglio--ancorato){display:block; padding:0}
  .velo.aperto:has(> .foglio--ancorato){background:rgba(0,41,76,0)}
  .velo .foglio--ancorato{position:absolute; top:var(--anc-t,80px); right:var(--anc-r,24px); width:440px; max-width:none;
    max-height:calc(100% - var(--anc-t,80px) - 16px)!important; border:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.velo,.foglio{transition:none}}

/* ---- 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:44px; font-size:var(--fs17); text-align:right; padding:0 10px}
.step-btn-g.piccolo{width:44px; height:44px}   /* +/- compatti: 44, come il campo accanto (due altezze, 56 e 44) */

/* ---- campo ora (mouse/trackpad): <input type=time>, etichetta sempre visibile, Federico 03/10 ---- */
.ora-campo{position:relative; display:flex; flex-direction:column; gap:6px}   /* relative: l'etichetta nascosta .ora-eti resta dentro il campo e non allarga l'area che scorre del guscio (segnalato dalla super app 29/10: dopo uno scrollIntoView nei Parametri la barra del salvataggio si alzava) */
/* 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: contenitore grigio e segmento scelto navy pieno con testo bianco
   (Federico 27/10/2026, per contesto: SUPERA «bianco in rilievo» del 03/10 e del 05/10; senza spunta dal 28/10/2026: tagliava i testi lunghi) */
/* 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:disabled{opacity:.45; cursor:default}   /* segmenti spenti: si leggono, non si toccano, nessuno stato (28/10/2026, dalla super app: bancate bloccate col comando 0-10 V) */
.pillole button[aria-checked="true"]{background:var(--navy); color:var(--surface)}   /* stato scelto per contesto (Federico 27/10): segmenti e pillole = navy pieno, testo bianco, in tutte le app */
: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")}
/* scelta in un modulo, da 2 a 4 voci: segmenti alti come il campo accanto (52 nella pagina, 44 con .pillole--riga nella riga di una scheda); oltre 4 voci c'è il tasto della scelta (.pan-sel-btn, klnk-pannelli.css), mai il <select> */
.pillole.pillole--campo{height:52px; margin:0}
.pillole--campo button{min-height:0; height:44px; padding:0 4px}
.pillole.pillole--campo.pillole--riga{height:var(--btn-m)}
.pillole--campo.pillole--riga button{height:36px}
#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}
/* lente premibile (Federico 28/10/2026, sito dei Manuali): <button class="ricerca-tasto" aria-label="Cerca"> con la lente dentro, nella .ricerca; il clic e il tocco
   lanciano la ricerca (lo fa l'app; type="submit" se il campo è in un <form>). Area 44 sul lato sinistro del campo, cerchio --chip dentro l'area al passaggio
   e al tocco, la lente diventa navy; anello navy col Tab. La lente senza tasto resta valida dove si cerca mentre si scrive. */
.ricerca .ricerca-tasto{position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:1; isolation:isolate; width:44px; height:44px; padding:0; border:0;
  border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; transition:color .15s}
.ricerca .ricerca-tasto svg{position:static; transform:none}
.ricerca-tasto::before{content:""; position:absolute; inset:4px; z-index:-1; border-radius:50%; transition:background-color .15s}
@media (hover:hover){.ricerca-tasto:hover{color:var(--navy)} .ricerca-tasto:hover::before{background:var(--chip)}}
.ricerca-tasto:active{color:var(--navy)} .ricerca-tasto:active::before{background:var(--chip)}
.ricerca .ricerca-tasto:focus-visible{outline:2.5px solid var(--navy); outline-offset:-2px}
.ricerca:has(.ricerca-tasto) input{padding-left:46px}
@media (prefers-reduced-motion:reduce){.ricerca .ricerca-tasto,.ricerca-tasto::before{transition:none}}
.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, border-color .12s; width:100%}
/* al passaggio e al tocco: bordo --navy-su, fondo bianco (klnk-stati.css, card premibili, 28/10/2026) */
.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{flex:none; width:44px; height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink); transition:background-color .15s}
.btn-indietro svg{width:22px; height:22px; stroke-width:2}   /* chevron a sinistra, 22 px, tratto 2 */
@media (hover:hover){.btn-indietro:hover{background:var(--chip)}}
.btn-indietro:active{background:var(--chip)}
@media (prefers-reduced-motion:reduce){.btn-indietro{transition:none}}
/* ---- 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}
.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}
  .testata-cluster .btn-indietro{display:none}   /* solo nella testata a due colonne della super app (non c'è una pagina prima); il tasto della barra resta sempre */
  .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) ---- */
/* SUPERATA dalla .barra (in fondo al file): la regola 00 della super app (titolo al centro) è superata il 27/10/2026, vedi Componenti comuni. Non si cancella: le app la usano ancora. */
.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)} }
/* Tedesco (26/10/2026): i titoli con parole composte lunghe vanno a capo col trattino dove la regola della lingua lo permette
   (lang="de" lo mette klnk-testi.js); italiano e inglese restano come prima. Solo titoli: nei nomi dei parametri spezzerebbe i nomi inglesi. */
:lang(de) .bt-centro, :lang(de) .ts-tit{hyphens:auto; -webkit-hyphens:auto}
/* 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}
/* Parametri MHub, card «Comando dei ventilatori» BMS / 0-10 V (super app, aree/parametri/comando-bms.js; 28/10/2026, ramo bms-010): in riga è una .card, nella griglia una .card-param;
   il disegno del dip è quello della guidata (.kg-dip-*, guidata.css della super app) */
.cb-card{padding:14px 16px}
.cb-card .pillole{margin:0 0 12px}
.cb-card .cb-stato{margin:0}
.cb-card .cb-dip + .cb-banc{margin:12px 0 0}
.cb-banc p{margin:0}
.cb-banc .btn-secondario{margin-top:10px}
/* CARD CON LA FRECCIA (Federico 29/10/2026: uguale in tutte le app; prima .tessera/.carta-p della guida e .kh-app/.kh-guidata della super app
   facevano cose diverse). Chiara: fondo bianco, al passaggio e al tocco bordo --navy-su come le altre card premibili, tondo navy pieno e
   la freccia «su» che gira di 45° e punta a destra, ferma al centro del tondo (scelta C di Federico in vetrina, 29/10: «lo scatto verso
   l'angolo non è equilibrato»); al tocco la card si stringe appena. Scura (.card-vai--scura, fondo dell'app): stesso tondo bianco da 34
   (Federico 29/10), alone chiaro e freccia che gira. Il tondo è .cv-tondo con dentro KLNK_ic('su',18), su tutte e due. */
.card-vai{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:168px; padding:16px;
  background:var(--surface); border:1px solid var(--surface); border-radius:26px; corner-shape:squircle; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .08s}
.cv-tondo{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--surface); color:var(--navy); display:flex; align-items:center; justify-content:center;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .2s}
.cv-tondo .ic{transition:transform .2s ease-out}
.card-vai--scura .cv-tondo{border:0}
@media (hover:hover){
  .card-vai:not(.card-vai--scura):not([aria-disabled="true"]):hover{border-color:var(--navy-su)}
  .card-vai:not(.card-vai--scura):not([aria-disabled="true"]):hover .cv-tondo{background:var(--navy); border-color:var(--navy); color:#fff}
  .card-vai--scura:not([aria-disabled="true"]):hover .cv-tondo{box-shadow:0 0 0 6px rgba(255,255,255,.18)}
  .card-vai:not([aria-disabled="true"]):hover .cv-tondo .ic{transform:rotate(45deg)}
}
.card-vai:not(.card-vai--scura):not([aria-disabled="true"]):active{border-color:var(--navy-su); transform:scale(.985)}
.card-vai:not(.card-vai--scura):not([aria-disabled="true"]):active .cv-tondo{background:var(--navy); border-color:var(--navy); color:#fff}
.card-vai--scura:not([aria-disabled="true"]):active .cv-tondo{box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.card-vai:not([aria-disabled="true"]):active .cv-tondo .ic{transform:rotate(45deg)}
.card-vai[aria-disabled="true"]{cursor:default}
.card-vai[aria-disabled="true"] .cv-tondo{opacity:.45}
@media (prefers-reduced-motion:reduce){.card-vai,.cv-tondo .ic{transition:none; transform:none!important}}
/* 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}
@media (hover:hover){ .btn-scelta:hover{background:var(--tenue)} }   /* dentro hover:hover: sul telefono non resta acceso dopo il tocco (29/10) */
.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 è navy pieno (come ovunque, 27/10) con testo bianco 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:var(--btn-g); min-height:var(--btn-g); padding:0 24px; border-radius:var(--r-pill); font-size:var(--fs15); font-weight:700}
.barra-fissa .bf-testo{order:-1} .barra-fissa :is(.btn-enorme,#bfSalva){order:1}   /* ordine dei tasti come .btn-coppia (28/10, dalla super app): nel codice il PRIMARIO viene prima, a schermo sta a destra; il riassunto resta a sinistra con ogni ordine del codice */
.barra-fissa{flex-wrap:wrap; justify-content:flex-end; row-gap:8px} .barra-fissa .bf-testo{flex:1 1 auto; min-width:0; overflow-wrap:anywhere} .barra-fissa .bf-testo:empty{display:none}   /* riassunto lungo (un'email): il tasto va sotto, a destra, invece di uscire dallo schermo; corto: tutto su una riga (28/10/2026, dall'admin); vuoto: niente riga in più (dai Manuali), il div non deve contenere nemmeno spazi */
#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}
/* ---- avvisi in quattro toni + fascia (Federico 27/10/2026, CERVELLO/Linee-guida/Componenti-comuni-app-online.md): raggio 14, 13 px peso 700, solo colori dei token.
   .riep-avviso è sinonimo di .avviso--warn (le app lo usano). Icona facoltativa a sinistra (se c'è, il testo va in uno <span> quando contiene collegamenti). ---- */
.avviso,.riep-avviso,.fascia{border-radius:14px; padding:12px; font-size:var(--fs13); font-weight:700; line-height:1.4}
.avviso,.riep-avviso{margin:12px 0}
.avviso:has(> svg:first-child){display:flex; align-items:flex-start; gap:10px}
.avviso > svg:first-child{flex:none; margin-top:1px}
.avviso--info,.fascia--info{background:var(--infobg); color:var(--info)}
.avviso--ok,.fascia--ok{background:var(--okbg); color:var(--ok)}
.avviso--warn,.fascia--warn,.riep-avviso{background:var(--warnbg); color:var(--warn)}
.avviso--bad,.fascia--bad{background:var(--badbg); color:var(--bad)}
/* avviso lungo (Federico 28/10/2026, versione B): titolo in <b> come primo figlio, poi il testo (anche in un <p>). Titolo 13/700 nel colore del tono,
   testo 15 normale nero con più interlinea; il tono resta nel fondo, nel titolo e nell'icona. Gli avvisi brevi di una riga restano 13/700 */
.avviso.avviso--lungo{font-size:var(--fs15); font-weight:400; line-height:1.5; color:var(--ink)}
.avviso--lungo b:first-child{display:block; font-size:var(--fs13); font-weight:700; line-height:1.4; margin-bottom:2px}
.avviso--lungo p{margin:0}
.avviso--lungo.avviso--info b:first-child,.avviso--lungo.avviso--info > svg{color:var(--info)}
.avviso--lungo.avviso--ok b:first-child,.avviso--lungo.avviso--ok > svg{color:var(--ok)}
.avviso--lungo.avviso--warn b:first-child,.avviso--lungo.avviso--warn > svg{color:var(--warn)}
.avviso--lungo.avviso--bad b:first-child,.avviso--lungo.avviso--bad > svg{color:var(--bad)}
.avviso a:not(.btn-secondario):not(.btn-enorme),.fascia a:not(.btn-secondario):not(.btn-enorme){color:inherit; text-decoration:underline; text-underline-offset:2px}   /* un collegamento dentro si riconosce anche fermo */
/* tutto l'avviso è un collegamento: alto almeno 44, freccia a destra; al passaggio e al tocco sottolineato */
a.avviso{display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none}   /* il colore è quello del tono (.avviso--*) */
a.avviso::after{content:""; flex:none; width:18px; height:18px; margin-left:auto; background:currentColor; -webkit-mask:var(--freccia-dx) center/contain no-repeat; mask:var(--freccia-dx) center/contain no-repeat}
@media (hover:hover){a.avviso:hover{text-decoration:underline; text-underline-offset:3px}}
a.avviso:active{text-decoration:underline; text-underline-offset:3px}
a.avviso:focus-visible,.avviso a:focus-visible,.fascia a:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px}
:root{--freccia-dx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
/* fascia: stessa forma, subito sotto la barra, per gli stati di tutta l'app (versione nuova, collegamento perso, anteprima); al massimo un tasto da 44 dentro */
.fascia{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin:12px 16px}
.fascia > :first-child:not(.btn-compatto){flex:1 1 180px; min-width:0}
.fascia .btn-compatto{flex:none}
@container app (min-width:1000px){.fascia{margin-left:32px; margin-right:32px}}   /* stesso bordo del contenuto della barra (Federico 28/10/2026) */
/* errore rosso sotto il campo (spostato qui da klnk-pannelli.css il 27/10: lo usa anche la pagina d'accesso, che carica solo questo foglio) */
.pan-errore{display:flex; align-items:flex-start; gap:10px; font-size:var(--fs13); font-weight:700; border-radius:var(--r-ctrl); padding:12px; background:var(--badbg); color:var(--bad)}
.pan-errore svg{margin-top:1px}
.pan-errore[hidden]{display:none}
/* 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-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-warn{color:var(--warn); background:var(--warnbg)}   /* ambra: stato da tenere d'occhio, per esempio «Non più recente» sulle revisioni vecchie dei manuali (Federico 28/10/2026) */
.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-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 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)} }

/* ---- Lingua: un tasto solo, in alto a destra (barra e pagina d'accesso). Componente comune approvato da Federico il 27/10/2026 (CERVELLO/Linee-guida/Componenti-comuni-app-online.md).
   Stesso aspetto del tasto dell'area dell'admin; apre l'elenco della scelta del DS (.elenco-scelte / .riga-scelta, variante C): al telefono dal basso, da 700 px sotto il tasto.
   Segno di stato: freccia grigia che ruota con aria-expanded="true". Supera la regola 13 (.pan-lingue, pillole sotto la scheda). ---- */
.lingua-tasto{display:inline-flex; align-items:center; gap:6px; height:var(--btn-m); padding:0 10px 0 14px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:#fff; color:var(--navy); font-size:var(--fs15); font-weight:700; white-space:nowrap; flex:none; transition:background-color .15s}
.lingua-tasto svg{color:var(--muted); transition:transform .15s}
.lingua-tasto[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.lingua-tasto:hover{background:var(--chip)}}
.lingua-tasto:active{background:var(--chip)}
.lingua-tasto--scuro{border-color:#fff}   /* sul navy: bordo bianco, fuoco bianco */
.lingua-tasto--scuro:focus-visible{outline-color:#fff}
.lingua-elenco{width:240px; max-width:calc(100vw - 32px)}   /* non 100%: sotto il tasto il contenitore è largo quanto il tasto e l'elenco restava di 60 px (27/10) */
.lingua-elenco .riga-scelta .et{flex:1}
/* anello di fuoco DENTRO la riga, per OGNI elenco di righe sceglibili (lingua, tendine, postazioni dell'ingresso): l'elenco taglia ciò che sporge, quindi anello a 4 px dal bordo
   e raggio come .pan-sel-lista/.pan-az-riga (klnk-pannelli.css), mai un rettangolo squadrato che tocca il filo fra le righe (Federico 27/10/2026). Specificità (0,3,0): vince su
   button:focus-visible (0,1,1) e, nella scena, su .kin :focus-visible (0,2,0) di ingresso.css */
.elenco-scelte .riga-scelta:focus-visible{outline:2.5px solid var(--navy); outline-offset:-4px; border-radius:calc(var(--r-ctrl) - 4px)}
.lingua-sigla{font-size:var(--fs13); font-weight:700; color:var(--muted)}
@media (prefers-reduced-motion:reduce){.lingua-tasto,.lingua-tasto svg{transition:none}}

/* ---- Barra unica delle app online: 64 al telefono, 72 da 1000 px, bianca, filo sempre. Componente comune approvato da Federico il 27/10/2026 (CERVELLO/Linee-guida/Componenti-comuni-app-online.md).
   Sinistra: indietro (se c'è una pagina prima), marchio, titolo grigio; destra: lingua o icone da 44 (nel pannello il cerchio dell'utente per ultimo).
   Supera la regola 00 della super app (titolo al centro) e la .barraTop. I 1000 px sono quelli della cornice .app (container query), non della finestra. ---- */
.barra{display:flex; align-items:center; gap:12px; height:64px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--line); color:var(--ink)}
@container app (min-width:1000px){.barra{height:72px; padding:0 32px; gap:14px}}
@container app (max-width:699px){.barra:has(.btn-indietro) .barra-marchio{display:none}}
@container app (max-width:359px){.barra{gap:8px}}   /* 320 px con freccia e tre icone: al titolo restano 72 px, «Parametri» (70) sta su una riga; i tasti restano 44 (Federico 28/10/2026, scelta C della super app: sotto i 480 px Rileggi va nella pagina) */   /* telefono, fuori dalla home: si torna con la freccia e il titolo ha posto (Federico 28/10/2026) */
.barra-marchio{display:flex; align-items:center; gap:10px; flex:none; color:var(--navy); text-decoration:none}
.barra-marchio svg{display:block; flex:none}   /* il logo è un <svg><use> con width="43" height="19" espliciti (senza, il browser usa 300 px): alto 19 */
/* fuori dalla home il marchio è un <a> che porta alla pagina iniziale e si fa capire (Federico 28/10/2026: «non è molto chiaro che il logo si possa usare
   per tornare in home»). Nell'HTML aria-label e title «Vai alla pagina iniziale» (testo di Codex in 5 lingue, KLNK-DS.md regola 2); in home resta <span>. Alto 44; fondo --chip al passaggio e al tocco
   come .btn-indietro; anello navy col Tab. Il margine negativo tiene il logo allineato al bordo della barra. */
a.barra-marchio{align-self:center; min-height:var(--btn-m); padding:0 8px; margin:0 -8px; border-radius:var(--r-pill); transition:background-color .15s}   /* align-self: una testata che stira i figli non lo allunga (guida, 1697c64) */
@media (hover:hover){a.barra-marchio:hover{background:var(--chip)}}
a.barra-marchio:active{background:var(--chip)}
a.barra-marchio:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px}
@media (prefers-reduced-motion:reduce){a.barra-marchio{transition:none}}
.barra-nome{display:flex; align-items:center; gap:10px; font-size:var(--fs15); font-weight:700; line-height:1.2}
.barra-nome::before{content:""; flex:none; width:1px; height:17px; background:currentColor; opacity:.25}   /* il filo fra logo e nome */
.barra-titolo{min-width:0; font-size:var(--fs15); font-weight:600; line-height:1.2; color:var(--muted); overflow-wrap:break-word}   /* mai puntini: se è lungo va a capo (la barra regge due righe) */
.barra-spazio{flex:1 1 0; min-width:0}
.barra-icona{display:flex; align-items:center; justify-content:center; flex:none; width:var(--btn-m); height:var(--btn-m); border-radius:50%; color:var(--navy); transition:background-color .15s}
@media (hover:hover){.barra-icona:not(:disabled):hover{background:var(--chip)}}
.barra-icona:not(:disabled):active{background:var(--chip)}
.barra-icona:disabled{opacity:.45; cursor:default}   /* spento: nessuno stato, come i tasti (28/10/2026, dalla super app) */
.barra-azioni{display:flex; align-items:center; gap:4px; flex:none}   /* zona delle icone a destra: più tasti stanno in riga (28/10/2026, dalla super app) */
.barra :is(.barra-icona,.bt-cerca) > svg.ic{width:24px; height:24px}   /* tutte le icone della barra da 24, anche dentro .barra-azioni, con qualunque misura scritta nel codice: a 20 sembravano più piccole e sottili (Federico 28/10/2026, dalla super app) */
@media (prefers-reduced-motion:reduce){.barra-icona{transition:none}}

/* ---- Pezzi della pagina d'accesso (la scena dell'8/10, CERVELLO/Linee-guida/UI-schermata-di-accesso.md): campi e uscita.
   La scheda bianca del 27/10 è superata (Federico 27/10). ---- */
/* campi dell'accesso: 52, raggio 14, filo 1,5 --filo-chiaro, testo 17 SEMPRE (sotto 16 px iOS ingrandisce la pagina), il carattere della pagina con ogni puntatore */
.campo-gruppo{display:flex; flex-direction:column; gap:6px; margin-top:16px}
.campo-gruppo label,.campo-eti{font-size:var(--fs13); font-weight:700; color:var(--muted)}   /* .campo-eti = l'etichetta anche quando non è un <label> (titolo di un gruppo di segmenti) */
.campo-gruppo--senza-margine{margin-top:0}   /* gruppo dentro un contenitore che mette già la distanza (gap) */
/* CAMPO UNICO (approvato da Federico 27/10/2026): pagina 52, testo 17 con ogni puntatore (niente 16 al tocco), raggio 14, filo 1,5 --filo-chiaro.
   `.pan-input` dei pannelli è lo stesso campo (klnk-pannelli.css aggiunge solo le righe da 44). */
:is(.campo,.pan-input){display:block; width:100%; height:52px; padding:0 16px; border:1.5px solid var(--filo-chiaro); border-radius:var(--r-ctrl); background:var(--surface);
  color:var(--ink); font-family:inherit; font-size:var(--fs17); font-weight:400; line-height:1.3; -webkit-appearance:none; appearance:none}
:is(.campo,.pan-input)::placeholder{color:var(--muted); opacity:1}
/* fuoco: il filo diventa navy e ne prende 1 px dentro con un'ombra interna (2 px in tutto): la scatola non cambia misura e il testo non si sposta in nessun browser */
:is(.campo,.pan-input):focus{outline:none; border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
.campo--codice{font-weight:700; font-variant-numeric:tabular-nums}
/* errore: filo --bad più l'avviso `.pan-errore` sotto il campo e aria-invalid="true" (`.campo--errato` è il vecchio nome, resta) */
:is(.campo,.pan-input):is(.campo--errato,[aria-invalid="true"]){border-color:var(--bad)}
:is(.campo,.pan-input):is(.campo--errato,[aria-invalid="true"]):focus{box-shadow:inset 0 0 0 1px var(--bad)}
:is(.campo,.pan-input)[readonly]{background:var(--tenue)}
:is(.campo,.pan-input):disabled{opacity:.45; cursor:default}
/* nella riga di una scheda: 44, testo 15, stesso filo e raggio */
.campo--riga{height:var(--btn-m); padding-left:14px; padding-right:14px; font-size:var(--fs15)}
/* data in Safari (WebKit): con appearance:none la data sta attaccata in alto; la riga interna alta quanto il campo meno i due fili da 1,5 la porta al centro.
   In Chrome non cambia nulla (provato pixel per pixel dall admin, 28/10/2026). Mai display:flex: in Chrome sposta l icona del calendario accanto alla data */
input[type="date"]:is(.campo,.pan-input)::-webkit-datetime-edit{line-height:49px}
input[type="date"]:is(.campo--riga,.pan-d-extra .pan-input,.pan-in-riga .pan-input)::-webkit-datetime-edit{line-height:calc(var(--btn-m) - 3px)}
/* testo lungo: stesso filo, raggio e testo 17; minimo 120; cresce solo in verticale */
textarea:is(.campo,.pan-input){height:auto; min-height:120px; padding-top:12px; padding-bottom:12px; resize:vertical; line-height:1.4}
.campo-riga{position:relative}   /* campo con un tasto dentro («Mostra»): il tasto sta a destra, alto 44 come ogni bersaglio */
.campo-riga .campo{padding-right:84px}
.campo-mostra{position:absolute; top:4px; right:6px; height:var(--btn-m); padding:0 10px; border-radius:var(--r-pill); color:var(--navy); font-size:var(--fs15); font-weight:700; transition:background-color .15s}
@media (hover:hover){.campo-mostra:hover{background:var(--chip)}}
.campo-mostra:active{background:var(--chip)}
/* uscita: frase grigia 13 con il collegamento navy 700 sottolineato (si riconosce anche fermo), bersaglio alto 44 */
.accesso-uscita{margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:4px; font-size:var(--fs13); color:var(--muted)}
.accesso-uscita a{display:inline-flex; align-items:center; min-height:var(--btn-m); color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:3px}
@media (hover:hover){.accesso-uscita a:hover{color:var(--navy-su)}}
.accesso-uscita a:active{color:var(--navy-su)}