/* MOTOWEB-S12 (11/10/2026) - Cruscotto nuovo; si aggiunge dopo casa22.css, non cambia gli altri fogli. */
/* 1. OFF/ON: si accende la scritta dello stato vero (spento = OFF rosso, acceso = ON verde) */
/* (v2, 11/10 sera) OFF e ON dentro il pulsante, in colonna accanto alla chiave: il bordo giallo non li copre */
.blocchetto{margin-right:1.15rem}
.blocchetto::before,.blocchetto::after{color:#6f6c66;transition:color .3s,text-shadow .3s;font-size:10px;left:calc(100% + 6px);right:auto;line-height:1}
.blocchetto::before{top:9px}
.blocchetto::after{top:auto;bottom:9px}
.cruscotto[data-stato="spento"] .blocchetto::before{color:#FF5A36;text-shadow:0 0 6px rgba(255,90,54,.7)}
.cruscotto[data-stato="acceso"] .blocchetto::after{color:var(--spia-verde);text-shadow:0 0 6px rgba(53,208,127,.7)}
/* 3. accensione: il logo nuovo, 3,6 s invece di 2,6 s (stessi tempi di entrata, un secondo in piu' di visione) */
.cruscotto.avvio .tft-avvio{animation:tft-avvio-s12 3.6s ease forwards}
.cruscotto.avvio .tft-avvio-logo{animation:tft-logo-s12 3.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tft-avvio-s12{0%{opacity:0}5.8%{opacity:1}88.4%{opacity:1}100%{opacity:0}}
@keyframes tft-logo-s12{0%{opacity:0;transform:scale(.4) rotate(-18deg)}20.2%{opacity:1;transform:scale(1.06) rotate(0)}27.4%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
/* 4. la data accanto all'ora */
/* (v3) stesso carattere, grandezza e colore dell'ora */
.tft-data{fill:#5d6168;font:700 26px var(--f-display);transition:fill .6s}
.cruscotto[data-stato="acceso"] .tft-data{fill:#F4EFE3}
@media (max-width:640px){.tft-data{font-size:30px}}