/* Copia di DESIGN-SYSTEM-STRUMENTI-ONLINE/klnk-stati.css, commit 14789a4, 28/10/2026. Non si modifica qui: le correzioni si fanno nel DS. */
/* KLNK — stati al passaggio del mouse (PC, «hover:hover») e al tocco (:active, anche sul telefono). PROVA del 21/10/2026 da
   approvare da Federico: stesso linguaggio approvato il 21/10 nella guida installatori (SUPPORTO PRODOTTI/app/stile.css, «Stati al
   passaggio del mouse»). Regola: ogni elemento cliccabile si riconosce (CERVELLO Divieti-UI-universali n. 18).
   Un segnale per famiglia: tasti chiari, tondi e righe prendono il grigio --chip; quelli già grigi scuriscono a --line; il tasto blu
   si schiarisce; la voce aperta resta come prima. Si carica DOPO tutti i fogli delle aree (index.html);
   con ?senza-stati nell'indirizzo il foglio si spegne (confronto). Il touchstart passivo che serve a :active su iOS sta in ui/klnk-ui.js. */
:root{--navy-su:#0e3d69}   /* tasto blu al passaggio, lo stesso della guida installatori */

:is(.btn-secondario,.btn-enorme,.test-btn,.up-b,.ka-btn,.kl-piccolo,.kg-pill,.kcf-leggero,.km-vai,.btn-aiuto,.btn-scelta,.btn-valore,
  .bt-icona,.bt-cerca,.btn-home,.btn-indietro,.btn-guida,.cp-info,.step-btn-g,.pillole button,.riga,.riga-scelta,.ts-toggle,.ka-gtesta,
  .up-riga,.km-c,.rimando,.pv-sch,.cluster-card,.kg-modo,.kc-tasto,.tieni,#bfAnnulla,#bfSalva){transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .08s}

/* ---- tasti chiari (fondo bianco o trasparente) e righe: fondo --chip ---- */
@media (hover:hover){
  :is(.btn-secondario,.up-b-sec,.ka-btn,.kl-piccolo:not(.kl-peric),.kg-pill,.kcf-leggero,.btn-aiuto,.btn-scelta,.btn-valore:not(.pendente),
    .bt-icona,.bt-cerca,.test-btn:not(.test-btn-primario):not(.test-btn-ferma),#bfAnnulla):not(:disabled):hover{background:var(--chip)}
  :is(.riga:not(.riga-pendente):not(.kp-sel),.riga-scelta,.ts-toggle,.ka-gtesta,.up-riga,.km-c,.pv-sch,.cluster-card:not(.selezionato),.kg-modo:not([aria-checked="true"]),.kg-proto-b:not([aria-checked="true"]),.ki-modo:not([aria-checked="true"]),.rimando):not(:disabled):hover{background:var(--chip)}
  .km-vai:hover{background:var(--infobg)}
}
:is(.btn-secondario,.up-b-sec,.ka-btn,.kl-piccolo:not(.kl-peric),.kg-pill,.kcf-leggero,.btn-aiuto,.btn-scelta,.btn-valore:not(.pendente),
  .bt-icona,.bt-cerca,.test-btn:not(.test-btn-primario):not(.test-btn-ferma),#bfAnnulla):not(:disabled):active{background:var(--chip)}
:is(.riga:not(.riga-pendente):not(.kp-sel),.riga-scelta,.ts-toggle,.ka-gtesta,.up-riga,.km-c,.pv-sch,.cluster-card:not(.selezionato),.kg-modo:not([aria-checked="true"]),.kg-proto-b:not([aria-checked="true"]),.ki-modo:not([aria-checked="true"]),.rimando):not(:disabled):active{background:var(--chip)}
.km-vai:active{background:var(--infobg)}
.bt-cerca{border-radius:var(--r-ctrl)}   /* il grigio del passaggio ha la forma delle icone accanto */

/* ---- tasti e controlli già grigi (--chip): scuriscono a --line. (.btn-indietro non c'è più: è bianco col filo e prende --chip, regola in klnk-ui.css, 27/10) ---- */
@media (hover:hover){
  :is(.btn-home,.step-btn-g,.cp-info:not([aria-pressed="true"]),.btn-guida:not([aria-pressed="true"]),
    .pillole button:not([aria-checked="true"])):not(:disabled):hover{background-color:var(--line)}
}
:is(.btn-home,.step-btn-g,.cp-info:not([aria-pressed="true"]),.btn-guida:not([aria-pressed="true"]),
  .pillole button:not([aria-checked="true"])):not(:disabled):active{background-color:var(--line)}

/* ---- tasto blu: un blu un po' più chiaro ---- */
@media (hover:hover){
  :is(.btn-enorme,.test-btn-primario,.up-b:not(.up-b-sec),#bfSalva):not(:disabled):hover{background:var(--navy-su)}
}
:is(.btn-enorme,.test-btn-primario,.up-b:not(.up-b-sec),#bfSalva):not(:disabled):active{background:var(--navy-su)}
/* la striscia della guidata e i riquadri della home D hanno i loro stati in aree/home/home.css */

/* ---- tieni premuto: il fondo tinto si fa un poco più deciso (al tocco lo riempimento parte comunque) ---- */
@media (hover:hover){
  .tieni:not(.fatto):hover,.ki-ferma:not(:disabled):hover{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
  .ks-azione .tieni.ks-blu:not(.fatto):hover{background:var(--line)}
}
.tieni:not(.fatto):active,.ki-ferma:not(:disabled):active{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
.ks-azione .tieni.ks-blu:not(.fatto):active{background:var(--line)}

/* ---- interruttori nelle card (Parametri da PC): la levetta si scurisce ---- */
@media (hover:hover){
  .riga-sw:not([aria-checked="true"]):hover .interr{background:rgba(15,28,46,.3)}
  .riga-sw[aria-checked="true"]:hover .interr{background:var(--navy-su)}
}
.riga-sw:not([aria-checked="true"]):active .interr{background:rgba(15,28,46,.3)}
.riga-sw[aria-checked="true"]:active .interr{background:var(--navy-su)}

/* ---- cursore a trascinamento: alone grigio attorno al pallino ---- */
.cur-range::-webkit-slider-thumb{transition:box-shadow .15s}
@media (hover:hover){
  .cur-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--chip)}
  .cur-range:hover::-moz-range-thumb{box-shadow:0 0 0 6px var(--chip)}
}
.cur-range:active::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--line)}
.cur-range:active::-moz-range-thumb{box-shadow:0 0 0 6px var(--line)}

/* ---- pagina di collegamento (fondo blu): tasto bianco grigio, tasto a contorno velato, lingua sottolineata ---- */
@media (hover:hover){
  .kc-primo:not(:disabled):hover{background:var(--chip)}
  :is(.kc-secondo,.kc-ico):not(:disabled):hover{background:rgba(255,255,255,.12)}
}
.kc-primo:not(:disabled):active{background:var(--chip)}
:is(.kc-secondo,.kc-ico):not(:disabled):active{background:rgba(255,255,255,.12)}
.kc-link:active{color:#fff}

/* voce aperta (gruppo dei Parametri scelto, ventilatore aperto): resta com'era, bianca con l'anello navy. La variante azzurra della
   guida installatori qui era meno comprensibile (Federico 21/10) */
/* la voce già scelta (segmento, gruppo aperto) non cambia al passaggio: è la pagina in cui sei, e il puntatore resta la freccia */
.pillole button[aria-checked="true"]{cursor:default}
@container app (min-width:700px){ .cluster-card.selezionato{cursor:default} }

/* ---- pannello del ventilatore (Ventilatori) e Prova ventilatori ---- */
/* righe del pannello: il grigio esce di 8 px ai lati, perché la riga non ha margine interno e il testo non tocchi il bordo del grigio */
@media (hover:hover){
  .km-riga:hover{background:var(--chip); box-shadow:-8px 0 0 var(--chip),8px 0 0 var(--chip)}
  .kp-chiudi:hover{background:var(--chip)}
  .kp-q:not(.kp-q-on):hover .kp-qn{border-color:var(--muted)}
  :is(.pv-testa,.pv-ind):not([aria-pressed="true"]):not(:disabled):hover{border-color:var(--muted)}
  .cp-info[aria-pressed="true"]:hover{background-color:var(--navy-su)}
}
.km-riga:active{background:var(--chip); box-shadow:-8px 0 0 var(--chip),8px 0 0 var(--chip)}
.kp-chiudi:active{background:var(--chip)}
.kp-q:not(.kp-q-on):active .kp-qn{border-color:var(--muted)}
:is(.pv-testa,.pv-ind):not([aria-pressed="true"]):not(:disabled):active{border-color:var(--muted)}
.cp-info[aria-pressed="true"]:active{background-color:var(--navy-su)}
.kp-q-on,:is(.pv-testa,.pv-ind)[aria-pressed="true"],:is(.kg-modo,.kg-proto-b,.ki-modo)[aria-checked="true"]{cursor:default}

/* cella «Stato» della home (apre gli allarmi): la tinta dello stato si fa un poco più decisa, la cella senza stato prende il grigio */
@media (hover:hover){
  .kh-stato:not(:disabled):not(.kh-warn):not(.kh-bad):hover{background:var(--chip)}
  .kh-stato.kh-warn:not(:disabled):hover{background:color-mix(in srgb, var(--warn) 12%, var(--warnbg))}
  .kh-stato.kh-bad:not(:disabled):hover{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
}
.kh-stato:not(:disabled):not(.kh-warn):not(.kh-bad):active{background:var(--chip)}
.kh-stato.kh-warn:not(:disabled):active{background:color-mix(in srgb, var(--warn) 12%, var(--warnbg))}
.kh-stato.kh-bad:not(:disabled):active{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}

/* righe gialle «da salvare»: al passaggio la stessa tinta che hanno già al tocco */
@media (hover:hover){ .riga.riga-pendente:hover{background:color-mix(in srgb, var(--warn) 18%, var(--warnbg))} .btn-valore.pendente:hover{background:color-mix(in srgb, var(--warn) 12%, var(--warnbg))} }
.btn-valore.pendente:active{background:color-mix(in srgb, var(--warn) 12%, var(--warnbg))}

/* tasti rossi: «Riprova» a contorno prende il fondo rosa, «Scollega» rosa si fa più deciso, «Ferma» pieno si scurisce (come nella barra della prova) */
@media (hover:hover){
  .km-riprova:not(:disabled):hover{background:var(--badbg)}
  .kl-piccolo.kl-peric:not(:disabled):hover{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
  .test-btn-ferma:not(:disabled):hover{filter:brightness(.94)}
}
.km-riprova:not(:disabled):active{background:var(--badbg)}
.kl-piccolo.kl-peric:not(:disabled):active{background:color-mix(in srgb, var(--bad) 12%, var(--badbg))}
.test-btn-ferma:not(:disabled):active{filter:brightness(.88)}

/* link testuali: i link già sottolineati ispessiscono il tratto al passaggio */
@media (hover:hover){
  :is(.ki-dett-tasto,.foglio-guida a):hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
}
:is(.ki-dett-tasto,.foglio-guida a):active{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}

/* pannello dal basso (telefono): «Scorri verso l'alto per aprire la guida» diventa navy; il numero grande e la striscia a lineette prendono il grigio */
@media (hover:hover){
  .guida-suggerimento:hover{color:var(--navy)}
  .enc-num:hover{background:var(--chip)}
  .enc-traccia:hover{background:var(--line)}
}
.guida-suggerimento:active{color:var(--navy)}
.enc-traccia:active,.enc-traccia.presa{background:var(--line)}
.enc-traccia{transition:background-color .15s}

/* dentro una riga o una carta che diventa grigia o azzurra, i tag e i numeri grigi diventano bianchi: restano tag e non si perdono nel fondo */
@media (hover:hover){
  :is(.kp-elenco > .kp-v:not(.kp-sel),.pv-sch,.cluster-card:not(.selezionato)):hover :is(.chip,.kp-n,.pv-num,.km-p-grigio){background:var(--surface)}
}
:is(.kp-elenco > .kp-v:not(.kp-sel),.pv-sch,.cluster-card:not(.selezionato)):active :is(.chip,.kp-n,.pv-num,.km-p-grigio){background:var(--surface)}
:is(.chip,.kp-n,.pv-num,.km-p-grigio){transition:background-color .15s}