/* ===== Gilroy — il font del marchio, in ogni modulo. I file stanno in fonts/ del design system;
   dentro Base44 vanno serviti dall'app (o incorporati nel modulo come data URI). ===== */
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/Gilroy-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ===== LIVING DESIGN SYSTEM — Homie (regole-stile-moduli 27/10/2026 + integrazioni 28/10)
   Idea: la vita nel suo atto di essere vita — persone e sistemi che si muovono dentro a spazi, cioè edifici.
   Spazi = superfici, schede e vetro (gli edifici). Movimento = vetro liquido, sfumature che seguono il puntatore, luci di sfondo (le persone e i sistemi che vivono dentro).
   Token ===== */
/* I valori base stanno in tokens.json: la pagina del design system li compila in tokens.css,
   caricato prima di questo file. Qui restano solo le varianti con selettore (tema scuro, stile homie, contesto DEV). */
:root{--f:Gilroy,"Plus Jakarta Sans",Poppins,Montserrat,system-ui,sans-serif;color-scheme:light}
:root:not([data-theme="light"]){color-scheme:dark}

/* LE SFUMATURE restano qui e non in tokens.json: il formato dei token tiene un colore per volta,
   non un linear-gradient. Se le togli da questo file spariscono bottoni primari, voce di menu
   attiva, cursore liquido e titoli sfumati — che senza gradiente diventano testo trasparente. */
:root{
  --grad-pri:linear-gradient(135deg,#0F7535 0%,#167A41 30%,#5E8C3B 50%,#C9A200 72%,#F4B517 100%);
  --grad-sec:linear-gradient(135deg,#EAF7F0 0%,#F2F6D8 60%,#FCF0CC 100%);
  --grad-titolo:linear-gradient(100deg,#0F7535 0%,#167A41 45%,#5E8C3B 75%,#C99A00 100%);
  --grad-ico:linear-gradient(135deg,#0F7535 0%,#5E8C3B 50%,#F4B517 100%);
  --grad-pri-vetro:linear-gradient(135deg,rgba(15,117,53,.86) 0%,rgba(22,122,65,.84) 30%,rgba(94,140,59,.82) 50%,rgba(201,162,0,.86) 72%,rgba(244,181,23,.9) 100%);
  --grad-sec-vetro:linear-gradient(135deg,rgba(234,247,240,.7) 0%,rgba(242,246,216,.7) 60%,rgba(252,240,204,.75) 100%);
}
:root:not([data-theme="light"]){
  --grad-pri:linear-gradient(135deg,#2DB87A 0%,#C9C21A 35%,#FAC600 70%,#FFD84D 100%);
  --grad-sec:linear-gradient(135deg,#1E2E18 0%,#33300C 55%,#3A3008 100%);
  --grad-titolo:linear-gradient(100deg,#9BDD74 0%,#E3D23A 40%,#FAC600 75%,#FFDF73 100%);
  --grad-ico:linear-gradient(135deg,#9BDD74 0%,#FAC600 60%,#FFDF73 100%);
  --grad-pri-vetro:linear-gradient(135deg,rgba(45,184,122,.85) 0%,rgba(201,194,26,.9) 35%,rgba(250,198,0,.95) 70%,rgba(255,216,77,.95) 100%);
  --grad-sec-vetro:linear-gradient(135deg,rgba(45,184,122,.16) 0%,rgba(250,198,0,.18) 60%,rgba(255,216,77,.22) 100%);
}

/* DISCENDENTI E ACCENTI — con background-clip:text il gradiente dipinge solo il box della riga:
   quello che esce sotto (g p q y j) o sopra (È À Ù) resta fuori e si taglia. Il box si allarga
   sopra e sotto con padding, e il margine negativo riporta l'impaginazione dov'era. */
.sez.titolo,
.home .scheda-testa .titolo,.home .kpi .et.titolo,.home h2.titolo,.home h3.titolo,
.widget .w-val,.hm-titolo--apertura,.hm-dato__val{
  padding-top:.16em;padding-bottom:.24em;margin-top:-.16em;margin-bottom:-.24em}
/* il testo grande non sfumato ha comunque bisogno di aria: la riga sotto 1.15 taglia le discendenti
   dentro ai contenitori che ritagliano (widget, schede in stile Homie) */
.kpi .val,.info .val,.hm-passo h3,.hm-scheda h3{line-height:1.2}
.widget .w-val{line-height:1.12}
.hm-dato .hm-dato__val{line-height:1.12}
/* i contenitori che ritagliano lo fanno solo per il riflesso: il riflesso si arrotonda da sé */
:root[data-stile="homie"] .scheda,:root[data-stile="homie"] .kpi,:root[data-stile="homie"] .tab-cont{overflow:visible}
:root[data-stile="homie"] .scheda::before,:root[data-stile="homie"] .kpi::before,
:root[data-stile="homie"] .tab-cont::before,:root[data-stile="homie"] .dialogo::before{border-radius:inherit}


/* ===== squircle (angoli continui, Apple/Ive): dove il browser lo supporta, ogni elemento con raggio usa la curva continua ===== */
@supports (corner-shape: squircle){
  .btn,.tab,.chip,.scheda,.kpi,.tab-cont,.dialogo,.avviso,.liquido,.temi,.temi button,.stili,.stili button,.skel,.vuoto .ico,.err,
  input,select,textarea{corner-shape:squircle}
  /* eccezioni a pillola: bottoni dentro le tabelle/righe, badge e contorni intorno al testo (stati), chip, pill di conferma */
  .btn.xs,.badge,.chip,.pill-conferma{corner-shape:round;border-radius:var(--pill)}
  :root{--r:18px;--r-md:14px;--r-sm:12px}
}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
/* IL MODULO È LA PROPRIA FINESTRA. L'iframe riceve l'altezza dello spazio disponibile e il modulo
   scorre dentro di sé: non cresce fino all'altezza del contenuto. È quello che rende `position:fixed`
   davvero relativo al modulo — finestre laterali, barra del menu mobile, azione fissa, pillola di
   conferma. Con un iframe alto quanto il contenuto, `fixed` si misura su tutta quell'altezza e il
   velo di una finestra copre l'intera pagina dell'app, barra e menu di Base44 compresi.
   overscroll-behavior:contain tiene lo scorrimento dentro: arrivato in fondo, il modulo non trascina
   con sé la pagina che lo ospita. */
html,body{height:100%;margin:0;background:transparent;color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* I MARGINI STANNO DENTRO AL MODULO. L'app dà all'iframe tutta la distanza fra menu e finestra
   (1212px a viewport 1460) senza px-8 esterno; il respiro lo mette .wrap, con 32px per lato.
   --traccia 1148px è la colonna utile: 1212 − 32 − 32. Oltre i 1212 il modulo si centra e non
   si allarga; sotto, si restringe da sé, e la barra di scorrimento del browser lo fa insieme
   al resto (1197 → 1133). Non reintrodurre un padding esterno nell'app: si sommerebbe a questo. */
/* La traccia sta su :root, non su .wrap: così CHIUNQUE può allinearsi ad essa — il menu del
   modulo, una barra agganciata in alto, una fascia a tutta larghezza con il contenuto dentro.
   Un menu che non sta sulla stessa traccia del contenuto è la cosa che si nota per prima su
   uno schermo grande: le voci partono da un bordo e le schede da un altro. */
:root{--traccia:1148px;--gutter:32px}
.wrap,.traccia{width:100%;max-width:calc(var(--traccia) + var(--gutter)*2);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap{padding-bottom:28px}
@media (max-width:760px){:root{--gutter:19px}}

/* SCHERMI FISSI — su un monitor la traccia cresce, ma non all'infinito.
   Le griglie usano lo spazio in più (più widget per riga, tabelle più larghe); il testo no,
   perché una riga lunga il doppio non si legge il doppio meglio: oltre i 95 caratteri l'occhio
   perde il capo riga. Per questo cresce la traccia e NON il corpo del testo. */
@media (min-width:1700px){:root{--traccia:1440px;--gutter:40px}}
@media (min-width:2200px){:root{--traccia:1680px;--gutter:48px}}
/* il blocco di sola lettura resta stretto anche quando la traccia è larga */
.lettura{max-width:78ch}
h1,h2,h3,h4{margin:0}
.sez{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sotto{font-size:19px;font-weight:700;line-height:1.3}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums;text-align:right}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* titoli: nello stile classico la sfumatura di marca sta SOLO sul titolo del modulo/sezione principale (.sez.titolo); sottotitoli, titoli di scheda e di widget restano in --ink. «Salva» è sempre .btn.pri */
.titolo{font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.sez.titolo{background-image:var(--grad-titolo);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
:root:not([data-theme="light"]) .titolo{color:#FFDF73}
:root:not([data-theme="light"]) .sez.titolo,:root:not([data-theme="light"]) .home .scheda-testa .titolo,:root:not([data-theme="light"]) .home h2.titolo,:root:not([data-theme="light"]) .home h3.titolo{color:transparent}
/* ===== pagina HOME: titolo, titoli delle schede e relative icone tutti sfumati (eccezione voluta) ===== */
.home .scheda-testa .titolo,.home .kpi .et.titolo,.home h2.titolo,.home h3.titolo{background-image:var(--grad-titolo);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
/* icone sfumate in Home: a) SVG inline → stroke/fill con il gradiente definito in <defs>; b) icona PNG/SVG da file → maschera */
.home svg.ico,.home svg.ico *{stroke:url(#lds-grad);fill:none}
.home svg.ico[data-pieno],.home svg.ico[data-pieno] *{fill:url(#lds-grad);stroke:none}
.ico-mask{display:inline-block;width:22px;height:22px;flex:none;background:var(--ink);-webkit-mask:var(--icona) center/contain no-repeat;mask:var(--icona) center/contain no-repeat}
.home .ico-mask{background:var(--grad-ico)}
:root:not([data-theme="light"]) .home svg.ico,:root:not([data-theme="light"]) .home svg.ico *{stroke:url(#lds-grad-scuro)}
.titolo-riga{display:flex;align-items:center;gap:10px}
.titolo-riga .ico{width:22px;height:22px;color:var(--ink);flex:none}
/* le icone prendono lo stesso colore del titolo accanto: sfumate se il titolo è sfumato (titolo del modulo, Home, DEV), in --ink se il titolo è normale */
.titolo-riga:has(.sez.titolo) svg.ico,.titolo-riga:has(.sez.titolo) svg.ico *{stroke:url(#lds-grad)}
:root:not([data-theme="light"]) .titolo-riga:has(.sez.titolo) svg.ico,:root:not([data-theme="light"]) .titolo-riga:has(.sez.titolo) svg.ico *{stroke:url(#lds-grad-scuro)}
.titolo-riga:has(.sez.titolo) .ico-mask{background:var(--grad-ico)}
.titolo-riga .ico-mask{background:var(--ink)}
:root:not([data-theme="light"]) .titolo-riga .ico{color:#FFDF73} :root:not([data-theme="light"]) .titolo-riga .ico-mask{background:#FFDF73}
/* ICONE: usare solo i file forniti dal webmaster (cartella icone), inline come <svg class="ico"> o <img class="ico">; nessuna icona inventata */
img.ico{object-fit:contain}

/* layout */
.griglia{display:grid;gap:16px}
.griglia>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.riga{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.colonna{display:flex;flex-direction:column;gap:12px}
.blocco{margin-bottom:24px}
.filtri{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 0 16px}
@media (max-width:760px){.g2,.g3{grid-template-columns:1fr}}

/* ===== bottoni — gradiente Homie ===== */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:14px;line-height:1.3;min-height:40px;
  padding:9px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .1s,filter .15s}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn .ico{width:16px;height:16px;flex:none}
.btn.pri{background-image:var(--grad-pri);
  border-color:transparent;color:#FFFFFF;box-shadow:var(--ombra-pri);
  /* gradiente che segue il puntatore: --mx/--my (0-100%) aggiornati dallo script */
  background-size:200% 200%;background-position:var(--mx,35%) var(--my,35%);transition:background-position .2s ease,filter .15s,transform .1s}
.btn.pri{animation:onda 11s ease-in-out infinite}
.btn.pri:hover{filter:brightness(1.05);animation-play-state:paused}
.btn.pri:focus-visible{outline-color:#0F7535}
.btn.sec{background-image:var(--grad-sec);border-color:var(--sec-bordo);color:var(--sec-testo)}
.btn.sec:hover{filter:brightness(1.02);border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--sunk)}
/* TONDO — chiudi, apri, espandi: il comando che sta a un'icona sola.
   Superficie neutra e piena, nessuna sfumatura e nessun alone: sta quasi sempre accanto o sopra
   del contenuto, e un gradiente lì ruberebbe l'attenzione a ciò che il contenuto sta dicendo.
   La sfumatura nel Living segna la cosa più importante del blocco, e chiudere non lo è mai. */
.btn.tondo{width:36px;height:36px;min-height:36px;padding:0;flex:none;
  border-radius:var(--pill);corner-shape:round;
  background:var(--surface);background-image:none;border:1px solid var(--line);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;animation:none;box-shadow:none}
.btn.tondo:hover{background:var(--sunk);border-color:var(--line-strong);filter:none}
.btn.tondo:active{transform:scale(.94)}
.btn.tondo svg{width:18px;height:18px;display:block;flex:none}
.btn.tondo .ico,.btn.tondo .ico-mask{width:18px;height:18px}
.btn.tondo.xs{width:28px;height:28px;min-height:28px} .btn.tondo.xs svg{width:15px;height:15px}
.btn.tondo.lg{width:44px;height:44px;min-height:44px} .btn.tondo.lg svg{width:20px;height:20px}
/* sul pieno — testa di una finestra sfumata, banda di marca, foto — passa in negativo */
.btn.tondo.su-pieno{background:rgba(255,255,255,.92);border-color:transparent;color:var(--marchio-verde)}
.btn.tondo.su-pieno:hover{background:#FFFFFF}
.btn.danger{background:transparent;border-color:var(--crit);color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft)}
.btn.danger.armed{background:var(--crit);border-color:var(--crit);color:#FFFFFF}
.btn.xs{font-size:12.5px;padding:5px 12px;min-height:0;border-radius:var(--pill)}
.btn.file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.btn.file{position:relative;overflow:hidden}

/* ===== menu primario (sezioni del modulo) ===== */
/* Il menu del modulo è allineato al contenuto, sempre: stesso bordo sinistro delle schede,
   stesso bordo destro. Nessun margine negativo, nessun rientro proprio. Dentro .wrap ci sta
   da sé; se vive in una barra a tutta larghezza, la barra ricostruisce la traccia (.traccia). */
.menu{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 16px;margin-left:0;margin-right:0}
/* barra del modulo: fondo a tutta larghezza, voci sulla traccia del contenuto */
.barra-modulo{width:100%;background:var(--surface);border-bottom:1px solid var(--line)}
.barra-modulo>.menu{width:100%;max-width:calc(var(--traccia) + var(--gutter)*2);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:0}
.tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:14px;min-height:40px;padding:9px 16px;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,filter .15s}
.tab:hover{background:var(--sunk)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab .badge{padding:1px 8px;font-size:11.5px}
.tab .badge::before{display:none}
.tab[aria-current="page"]{background-image:var(--grad-pri);color:#FFFFFF;border-color:transparent;box-shadow:var(--ombra-pri);font-weight:700;
  background-size:200% 200%;background-position:var(--mx,35%) var(--my,35%);transition:background-position .2s ease,filter .15s}
.tab[aria-current="page"]{animation:onda 11s ease-in-out infinite}
.tab[aria-current="page"] .badge{background:#FFFFFF;color:#0F7535}
.tab[aria-current="page"] .badge.giallo{background:var(--yellow);color:#1D1F26}
:root:not([data-theme="light"]) .tab[aria-current="page"] .badge{background:#04120B;color:#FAC600}

/* ===== bottoni DEV (test e prove nei moduli Claude o in Base44): blu Condominio Futuro, mai nei flussi di lavoro reali ===== */



:root:not([data-theme="light"]){--dev:#3F8FD0;--dev-2:#1C73B6;--dev-soft:rgba(28,115,182,.18);--dev-text:#8CC3D3;--dev-acc:#5AC9D1}

.btn.dev{background-image:linear-gradient(135deg,var(--dev-2) 0%,var(--dev) 55%,var(--dev-acc) 100%);background-size:200% 200%;background-position:var(--mx,35%) var(--my,35%);
  border-color:transparent;color:#FFFFFF;box-shadow:0 8px 18px -10px rgba(28,115,182,.85);transition:background-position .2s ease,filter .15s,transform .1s}
.btn.dev:hover{filter:brightness(1.06)}
.btn.dev:focus-visible{outline-color:var(--dev)}
.btn.dev.sec{background-image:linear-gradient(135deg,var(--dev-soft) 0%,rgba(90,201,209,.22) 100%);border-color:rgba(28,115,182,.35);color:var(--dev-text)}
.btn.dev::before{content:"DEV";font-size:10px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:var(--pill);background:rgba(255,255,255,.22);line-height:1.4}
.btn.dev.sec::before{background:rgba(28,115,182,.14)}
.badge.dev{background:var(--dev-soft);color:var(--dev-text)}
.avviso.dev{border-left-color:var(--dev)}
.scheda.dev{border-color:rgba(28,115,182,.45);border-style:dashed}

/* ===== superfici: PIENE. Il vetro statico non si usa — rende il testo illeggibile e spegne il colore.
   Il "liquid glass" del Living non è trasparenza: è movimento di colore su una lamina acquatica
   (il cursore che scivola, la sfumatura che segue il puntatore, il riflesso lento). ===== */
.scheda,.kpi,.tab-cont,.avviso,.btn:not(.pri):not(.sec):not(.danger):not(.ghost):not(.dev):not(.tondo),.tab,.chip,input,select,textarea,.temi,.stili{
  background-color:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.scheda,.kpi,.tab-cont{border-color:var(--line)}
th{background:var(--sunk)}
:root:not([data-theme="light"]) .scheda,:root:not([data-theme="light"]) .kpi,:root:not([data-theme="light"]) .tab-cont,:root:not([data-theme="light"]) .avviso,
:root:not([data-theme="light"]) .btn:not(.pri):not(.sec):not(.danger):not(.ghost):not(.dev),:root:not([data-theme="light"]) .tab,:root:not([data-theme="light"]) .chip,
:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) textarea,:root:not([data-theme="light"]) .temi,:root:not([data-theme="light"]) .stili{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);border-color:var(--line)}
.btn.sec{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn.pri,.tab[aria-current="page"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--ombra-pri)} .menu .liquido{box-shadow:var(--ombra-pri)}

/* ===== finestre: superficie PIENA. Sul velo resta una sfocatura leggera, che separa senza velare il contenuto. ===== */
.velo{background:rgba(18,22,32,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dialogo{background:var(--surface);border:1px solid var(--line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.5),24px 0 60px -20px rgba(18,22,32,.4)}
.dialogo-testa,.dialogo-piede{border-color:var(--line)}
:root:not([data-theme="light"]) .velo{background:rgba(0,0,0,.5)}
:root:not([data-theme="light"]) .dialogo{box-shadow:inset -1px 0 0 rgba(255,255,255,.12),24px 0 60px -20px rgba(0,0,0,.7)}
.dialogo input,.dialogo select,.dialogo textarea{background:var(--sunk)}

/* ===== goccia liquida: finestre, avvisi e menu nascono dal bottone che li apre (origine --ox/--oy) ===== */
@keyframes goccia-in{
  0%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.12,.35);filter:blur(10px);border-radius:999px}
  45%{opacity:1;transform:translate(calc(var(--dx,0px)*.2),calc(var(--dy,0px)*.2)) scale(1.06,.9);filter:blur(1px)}
  70%{transform:translate(0,0) scale(.98,1.03);filter:blur(0)}
  100%{opacity:1;transform:translate(0,0) scale(1,1);filter:blur(0)}}
@keyframes goccia-out{
  0%{opacity:1;transform:translate(0,0) scale(1,1);filter:blur(0)}
  35%{transform:translate(calc(var(--dx,0px)*.15),calc(var(--dy,0px)*.15)) scale(1.04,.92)}
  100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(.12,.35);filter:blur(10px);border-radius:999px}}
@keyframes velo-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
/* la finestra entra di lato, in sovrimpressione: non nasce piu dal bottone che la apre.
   Entrata morbida: 640ms su una curva che parte piano, scivola e si posa senza scatto
   (velocita massima circa un terzo della versione da 340ms). La dissolvenza e un'animazione
   a parte: un keyframe intermedio spezzerebbe la curva dello scorrimento in due.
   Il contenuto interno non ha animazioni proprie: un modulo che ridisegna corpo o piede
   non deve vederli lampeggiare.
   L'uscita resta 260ms: chiudere deve essere rapido, e i moduli tolgono la finestra dopo 260ms. */
/* UNA SOLA ANIMAZIONE, E SOLO SULLA TRASFORMAZIONE.
   Il pannello scorre e basta: niente dissolvenza sovrapposta. Due animazioni di durata diversa
   sullo stesso elemento — 640ms di scorrimento e 300ms di opacità — si leggono come due tempi,
   la pagina prima e il contenuto poi, ed è esattamente quello che non deve succedere.
   Il contenuto non ha animazioni proprie: è solidale col pannello perché si muove con lui e
   non per conto suo. Per questo il riflesso dello stile Homie resta fermo durante l'entrata:
   è l'unica cosa dentro al pannello che si muoverebbe da sola.
   transform in translate3d e will-change promuovono il pannello a un livello suo: senza, il
   browser ridipinge a ogni fotogramma 560px di superficie con l'ombra, ed è lì che scatta. */
@keyframes tendina-in{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes tendina-out{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.velo.apre,.velo.chiude{will-change:opacity}
.velo.apre .dialogo,.velo.chiude .dialogo{will-change:transform;backface-visibility:hidden}
/* velo e pannello sulla stessa durata e sulla stessa curva: arrivano insieme */
.velo.apre{animation:velo-in .64s cubic-bezier(.25,.1,.15,1) both}
.velo.apre .dialogo{animation:tendina-in .64s cubic-bezier(.25,.1,.15,1) both}
.velo.apre .dialogo::before{animation:none}
.velo.chiude{animation:velo-in .26s cubic-bezier(.55,0,.85,.3) reverse both}
.velo.chiude .dialogo{animation:tendina-out .26s cubic-bezier(.55,0,.85,.3) both}
.velo.chiude .dialogo::before{animation:none}
.pill-conferma{animation:goccia-in .5s cubic-bezier(.3,1.15,.4,1) both}
.pill-conferma.via{animation:goccia-out .3s cubic-bezier(.5,0,.75,.2) both}
.menu-goccia{animation:goccia-in .4s cubic-bezier(.3,1.15,.4,1) both}
/* bottoni: pressione liquida (si schiaccia e riprende forma) */
.btn:active,.tab:active,.chip:active{transform:scale(.96,.94)}
.btn.pri:active,.btn.dev:active{filter:brightness(1.08) saturate(1.1)}
@media (prefers-reduced-motion:reduce){.velo.apre,.velo.apre .dialogo,.velo.chiude,.velo.chiude .dialogo,.pill-conferma,.pill-conferma.via,.menu-goccia,.notifica,.notifica.via,.notifica .bollo{animation:none}
  /* la barra del tempo resta: non è decorazione, dice quanto manca */
  .notifica .resta{animation:scade 10s linear both}}

/* ===== ANTEPRIMA MOBILE (DEV, solo webmaster): bottone fisso che apre il modulo in una cornice telefono a misure reali ===== */
.anteprima-btn{position:fixed;right:18px;bottom:18px;z-index:45;min-height:44px;padding:10px 16px;border-radius:999px;border:0;font:inherit;font-weight:700;font-size:13px;cursor:pointer;
  background-image:linear-gradient(135deg,var(--dev-2),var(--dev) 55%,var(--dev-acc));color:#fff;box-shadow:0 8px 18px -10px rgba(28,115,182,.85);display:inline-flex;align-items:center;gap:8px}
.anteprima-btn::before{content:"DEV";font-size:10px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.22)}
.anteprima{position:fixed;inset:0;z-index:100;background:rgba(18,22,32,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px;overflow:auto}
.anteprima .barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.anteprima .barra .chip{background:rgba(255,255,255,.85);color:#1D1F26}
.anteprima .barra .chip.on{background:var(--dev);color:#fff;border-color:transparent}
.anteprima .telefono{position:relative;background:#0F1419;border-radius:48px;padding:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.08);flex:none}
.anteprima .telefono::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:999px;background:#0F1419;z-index:2;opacity:.9}
.anteprima .telefono iframe{display:block;border:0;border-radius:38px;background:#fff;width:var(--pw,390px);height:var(--ph,844px);max-height:calc(100vh - 120px)}
.anteprima .misura{color:#fff;font-size:12.5px;opacity:.85}
@media (max-width:760px){.anteprima-btn{display:none}}

/* ===== CONTESTO DEV: tutta la parte DEV è blu (Condominio Futuro). Avvolgi in <div class="dev"> o metti data-dev sul <html> per l'intero modulo ===== */
.dev,html[data-dev]{--accent:#1C73B6;--accent-soft:#E3F0FA;--accent-text:#06467A;--green:#1C73B6;--green-soft:#E3F0FA;--green-text:#06467A;--yellow:#5AC9D1;--yellow-soft:#DDF5F7;--yellow-text:#0B5566;
  --grad-pri:linear-gradient(135deg,#06467A 0%,#1C73B6 50%,#3FA3C8 80%,#5AC9D1 100%);--grad-sec:linear-gradient(135deg,#E3F0FA 0%,#E6F4F7 60%,#DDF5F7 100%);
  --grad-titolo:linear-gradient(100deg,#06467A 0%,#1C73B6 50%,#3FA3C8 100%);--grad-ico:linear-gradient(135deg,#06467A 0%,#1C73B6 50%,#5AC9D1 100%);
  --ombra-pri:0 8px 18px -10px rgba(28,115,182,.85);--sec-bordo:#BFD9EE;--sec-testo:#06467A;
  --grad-pri-vetro:linear-gradient(135deg,rgba(6,70,122,.86) 0%,rgba(28,115,182,.84) 50%,rgba(63,163,200,.86) 80%,rgba(90,201,209,.9) 100%);--grad-sec-vetro:linear-gradient(135deg,rgba(227,240,250,.7) 0%,rgba(221,245,247,.75) 100%)}
:root:not([data-theme="light"]) .dev,html[data-dev]:not([data-theme="light"]){--accent:#5AC9D1;--accent-soft:rgba(90,201,209,.16);--accent-text:#8CC3D3;--green:#3F8FD0;--green-soft:#0F2E47;--green-text:#8CC3D3;--yellow:#5AC9D1;--yellow-soft:#0F3A40;--yellow-text:#9FE3EA;
  --grad-pri:linear-gradient(135deg,#1C73B6 0%,#3FA3C8 50%,#5AC9D1 80%,#8CE0E6 100%);--grad-sec:linear-gradient(135deg,#0F2E47 0%,#0F3A40 60%,#123F46 100%);
  --grad-titolo:linear-gradient(100deg,#8CC3D3 0%,#5AC9D1 50%,#8CE0E6 100%);--grad-ico:linear-gradient(135deg,#8CC3D3 0%,#5AC9D1 60%,#8CE0E6 100%);
  --ombra-pri:0 8px 18px -10px rgba(90,201,209,.7);--sec-bordo:#1F4F5A;--sec-testo:#9FE3EA;
  --grad-pri-vetro:linear-gradient(135deg,rgba(28,115,182,.85) 0%,rgba(63,163,200,.9) 50%,rgba(90,201,209,.95) 80%,rgba(140,224,230,.95) 100%);--grad-sec-vetro:linear-gradient(135deg,rgba(28,115,182,.16) 0%,rgba(90,201,209,.2) 100%)}
.dev .badge,html[data-dev] .badge{background:var(--accent-soft);color:var(--accent-text)}
.dev .scheda,html[data-dev] .scheda{border-color:rgba(28,115,182,.45)}
.dev .avviso,html[data-dev] .avviso{border-left-color:var(--accent)}
.dev .titolo-riga .ico,html[data-dev] .titolo-riga .ico,.dev .ico-mask,html[data-dev] .ico-mask{color:var(--accent);background:var(--grad-ico)}
.dev-etichetta{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:var(--pill);background:#1C73B6;color:#fff}
:root:not([data-theme="light"]) .dev-etichetta{background:#5AC9D1;color:#04120B}
/* i bottoni .btn.dev restano validi anche fuori dal contesto (singolo pulsante di prova dentro una pagina normale) */

/* ===== scelta tema (tre opzioni) ===== */
.temi,.stili{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.temi button,.stili button{font:inherit;font-size:13px;font-weight:600;min-height:32px;padding:5px 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer}
.temi button[aria-pressed="true"],.stili button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
.temi button:focus-visible,.stili button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* menu primario verticale (barra laterale): stesse voci, impilate */
.menu.verticale{flex-direction:column;align-items:stretch;gap:6px;padding:0;width:min(260px,100%)}
.menu.verticale .tab{justify-content:flex-start;width:100%}
.menu.verticale .tab .badge{margin-left:auto}

/* menu con icone: voce = icona (slot .ico dai file del webmaster) + etichetta, SENZA contorno; si muove solo il pallino con la sfumatura attorno all'icona */
.menu.icone .tab{flex-direction:row;gap:8px;border:0;background:transparent;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.menu.icone .tab:hover{background:transparent}
/* Cursore della barra mobile: rettangolo con angoli continui, non più un cerchio — segue la forma
   della barra. Porta --grad-pri e l'animazione onda come un bottone primario: il colore scorre dentro
   la voce attiva anche da fermo, ed è l'unico movimento che resta nel menu. */
.menu.icone .liquido{border-radius:var(--r-sm)!important;corner-shape:squircle;transition:transform .45s cubic-bezier(.3,1.05,.4,1),width .2s ease,height .2s ease}
.menu.icone .liquido{background-image:var(--grad-pri);background-size:260% 260%;animation:onda 9s ease-in-out infinite}
/* La voce attiva sta sopra la lamina sfumata: etichetta e icona vanno in negativo, come dentro un primario. */
.menu.icone .tab[aria-current="page"],.menu.icone.liquido-attivo .tab[aria-current="page"]{background:transparent!important;box-shadow:none;color:#FFFFFF!important}
:root:not([data-theme="light"]) .menu.icone .tab[aria-current="page"],:root:not([data-theme="light"]) .menu.icone.liquido-attivo .tab[aria-current="page"]{color:#04120B!important}
.menu.icone .tab .ico,.menu.icone .tab .ico-mask{z-index:1}
.menu.icone .tab .ico,.menu.icone .tab .ico-mask{width:20px;height:20px;flex:none;color:var(--green)}
.menu.icone .tab[aria-current="page"] .ico{color:#fff} .menu.icone .tab[aria-current="page"] .ico-mask{background:#fff!important}
:root:not([data-theme="light"]) .menu.icone .tab[aria-current="page"] .ico{color:#04120B}
:root:not([data-theme="light"]) .menu.icone .tab[aria-current="page"] .ico-mask{background:#04120B!important}
@media (max-width:760px),(pointer:coarse) and (max-width:1024px){
  /* BARRA RETTANGOLARE agganciata al fondo: attraversa tutta la larghezza, senza stacco dai bordi.
     Non si rimpicciolisce scorrendo — una barra ancorata non ha un punto verso cui ritirarsi — quindi
     --k resta inutilizzato e le etichette restano sempre leggibili. Il movimento qui è il cursore:
     la lamina sfumata che scivola da una voce all'altra, con il colore che scorre come nel primario. */
  .menu.icone{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:none;z-index:40;margin:0;transform:none;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));gap:4px;overflow:hidden;border-radius:0;
    background:var(--surface);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
    border:0;border-top:1px solid var(--line);
    box-shadow:0 -10px 28px -18px rgba(18,22,32,.45);
    flex-wrap:nowrap;justify-content:space-around;scroll-snap-type:none}
  .menu.icone .tab{opacity:1}
  .menu.icone .tab .et{opacity:1}
  /* dentro la barra la superficie è la barra: le voci non hanno né bordo né riflesso proprio */
  .menu.icone .tab{flex:1 1 0;flex-direction:column;gap:7px;min-height:60px;padding:8px 4px 6px;font-size:11.5px;font-weight:600;border:0;background:transparent;border-radius:var(--r-sm);box-shadow:none!important}
  .menu.icone .tab::before,.menu.icone .tab::after{content:none!important}
  .menu.icone .tab .ico,.menu.icone .tab .ico-mask{width:24px;height:24px}
  .menu.icone .tab .badge{position:absolute;top:4px;right:calc(50% - 22px);padding:0 6px;font-size:10px;min-height:0}
  /* la barra è agganciata al fondo e alta ~76px più la safe area: quanto le sta sopra parte da lì */
  .menu.icone + .azione-mobile,.azione-mobile:has(+ .menu.icone){bottom:calc(76px + env(safe-area-inset-bottom))}
  body:has(.menu.icone) .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(.menu.icone) .pill-conferma{bottom:calc(92px + env(safe-area-inset-bottom))}
}

/* ===== selezione "liquida": la voce attiva scivola come un vetro (menu primario e scelta tema) ===== */
.menu,.temi,.stili{position:relative;isolation:isolate}
.menu>.tab,.temi>button,.stili>button{position:relative;z-index:1}
.menu.icone .tab .ico,.menu.icone .tab .ico-mask{position:static}
.liquido{position:absolute;top:0;left:0;height:0;width:0;z-index:0;pointer-events:none;border-radius:var(--r-md);
  transform:translate3d(var(--lx,0px),var(--ly,0px),0);
  transition:transform .36s cubic-bezier(.3,1.08,.4,1),width .36s cubic-bezier(.3,1.08,.4,1),height .36s cubic-bezier(.3,1.08,.4,1),opacity .2s,border-radius .3s;
  will-change:transform,width}
/* Mentre il cursore si allunga, le voci che sta scavalcando si fanno da parte: senza questo, il
   fondo pieno di una voce intermedia taglia in due la lamina e il gesto si legge come due blocchi
   separati invece che come una goccia che cambia posto. Sono solo le voci davvero coperte — le
   marca lo script — e per quel mezzo secondo il loro testo passa in negativo, perché si trova
   sopra la sfumatura. Le voci fuori dal tragitto non si toccano. */
.menu>.tab.sotto{background:transparent;border-color:transparent;color:#FFFFFF;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
:root:not([data-theme="light"]) .menu>.tab.sotto{color:#04120B}
.liquido.segue{transition:none!important}
.liquido.acqua{transition:transform .18s cubic-bezier(.4,0,.2,1),width .18s cubic-bezier(.4,0,.2,1),height .18s cubic-bezier(.4,0,.2,1);border-radius:calc(var(--r-md) + 2px)}
.liquido::after,.liquido::before{content:none!important}
/* LIQUID GLASS — il cursore è una lamina d'acqua: il colore scorre dentro di essa anche da fermo. */
.liquido{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-size:260% 260%;animation:onda 9s ease-in-out infinite}
@keyframes onda{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
:root:not([data-theme="light"]) .menu .liquido{background-image:var(--grad-pri)}
:root[data-stile="homie"] .menu .liquido{background-image:var(--grad-pri)}
/* bottoni e superfici in vetro su scuro e Homie */
:root:not([data-theme="light"]) .btn.pri,:root[data-stile="homie"] .btn.pri{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px rgba(250,198,0,.7)}
:root:not([data-theme="light"]) .btn.sec,:root[data-stile="homie"] .btn.sec,:root:not([data-theme="light"]) .btn,:root[data-stile="homie"] .btn,:root[data-stile="homie"] .tab,:root[data-stile="homie"] .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn.ghost,:root:not([data-theme="light"]) .btn.ghost,:root[data-stile="homie"] .btn.ghost,
.btn.tondo,:root:not([data-theme="light"]) .btn.tondo,:root[data-stile="homie"] .btn.tondo{box-shadow:none}
:root[data-stile="homie"] .scheda,:root[data-stile="homie"] .kpi,:root[data-stile="homie"] .tab-cont,:root[data-stile="homie"] .dialogo{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow)}
.liquido.in-moto{transform:translate3d(var(--lx,0px),var(--ly,0px),0) scale(1.01,.985)}
/* menu primario: il gradiente sta sul vetro che scivola, la voce attiva resta trasparente */
.menu .liquido{background-image:var(--grad-pri);box-shadow:var(--ombra-pri)}
.menu.liquido-attivo .tab[aria-current="page"]{background:transparent;box-shadow:none;color:#FFFFFF;transition:color .3s}
.menu.liquido-attivo .tab[aria-current="page"]{animation:onda 11s ease-in-out infinite}
.tab[aria-current="page"] .badge{background:#FFFFFF;color:#0F7535}
:root:not([data-theme="light"]) .menu.liquido-attivo .tab[aria-current="page"]{color:#04120B}
:root:not([data-theme="light"]) .menu.liquido-attivo .tab[aria-current="page"] .badge{background:#04120B;color:#FAC600}
/* scelta tema: vetro chiaro */
.temi .liquido,.stili .liquido{border-radius:var(--r-sm);background:var(--accent-soft);box-shadow:none}
.temi.liquido-attivo button[aria-pressed="true"],.stili.liquido-attivo button[aria-pressed="true"]{background:transparent}
:root[data-stile="homie"] .temi .liquido{background:linear-gradient(135deg,rgba(45,184,122,.28),rgba(250,198,0,.32))}
:root[data-stile="homie"] .menu .liquido{background-image:var(--grad-pri)}
@media (prefers-reduced-motion:reduce){.liquido,.btn.pri,.tab[aria-current="page"]{transition:none;animation:none}}

/* bottoni di riga: sempre normali (.btn.xs), senza sfumatura: dentro le tabelle ci sono già badge e colori accanto */
.btn.xs.sec{background-image:none;background:var(--surface);border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .btn.xs.sec{background-image:none;background:var(--surface);border-color:var(--line);color:var(--ink)}

/* ===== campi ===== */
label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;min-height:40px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:96px;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236C727F' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;accent-color:var(--accent);margin:0}
.campo{margin-bottom:16px}
.err{color:var(--crit);font-size:12.5px;margin-top:4px}
.campo.errato input,.campo.errato select,.campo.errato textarea{border-color:var(--crit)}
.aiuto{font-size:12.5px;color:var(--muted);margin-top:4px}
.scelta{display:inline-flex;align-items:center;gap:8px;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;margin:0}

/* ===== chip, badge ===== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;min-height:36px}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--pill);background:var(--sunk);color:var(--muted)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.verde{background:var(--green-soft);color:var(--green-text)}
.badge.giallo{background:var(--yellow-soft);color:var(--yellow-text)}
.badge.rosso{background:var(--crit-soft);color:var(--crit)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.attenzione{background:var(--warn-soft);color:var(--warn)}

/* ===== schede, KPI, tabelle ===== */
.scheda{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.scheda-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.scheda-testa h3{font-size:15px;font-weight:700}
.kpi-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kpi .et{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px}
.kpi .delta{font-size:13px;font-weight:600;margin-top:2px}
.kpi .delta.su{color:var(--green-text)}.kpi .delta.giu{color:var(--crit)}
.tab-cont{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.attiva td{background:var(--accent-soft)}
tbody tr:hover td{background:var(--sunk)}
tr.attiva:hover td{background:var(--accent-soft)}
td.azioni{text-align:right;white-space:nowrap}

/* ===== NOTIFICHE — cadono dall'alto e si rialzano da dove sono venute =====
   Stesso gesto delle finestre laterali, ruotato di 90°: identica curva, identiche durate.
   640ms per entrare su una curva che parte piano e si posa senza scatto, 260ms per uscire,
   perché una cosa che arriva da sola deve farsi notare senza strappare, e una che se ne va
   non deve far aspettare. La dissolvenza è un'animazione a parte: un keyframe intermedio
   spezzerebbe la curva dello scorrimento in due. */
@keyframes cade{from{transform:translate3d(0,-130%,0)}to{transform:translate3d(0,0,0)}}
@keyframes risale{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-130%,0)}}

.notifiche{position:fixed;top:16px;right:16px;z-index:70;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100% - 32px));pointer-events:none}
.notifiche .notifica{pointer-events:auto}

/* Una sola animazione, come per le finestre: solo la trasformazione, niente dissolvenza sopra.
   Il contenuto non si muove per conto suo — cade con la notifica perché ne fa parte. */
.notifica{display:flex;align-items:flex-start;gap:12px;padding:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  will-change:transform;backface-visibility:hidden;
  animation:cade .64s cubic-bezier(.25,.1,.15,1) both}
.notifica.via{animation:risale .26s cubic-bezier(.55,0,.85,.3) both}

/* il bollo: il cerchio sfumato di marca, con dentro l'icona della categoria in negativo.
   È l'unico pieno sfumato della notifica — il resto è superficie, perché il testo deve leggersi. */
.notifica .bollo{flex:none;width:38px;height:38px;border-radius:var(--pill);corner-shape:round;
  display:flex;align-items:center;justify-content:center;color:#FFFFFF;
  background-image:var(--grad-pri);background-size:260% 260%;animation:onda 9s ease-in-out infinite}
.notifica .bollo svg{width:19px;height:19px;flex:none;display:block}
:root:not([data-theme="light"]) .notifica .bollo{color:#04120B}

.notifica .testo{flex:1;min-width:0}
.notifica .titolo-n{margin:0;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.notifica p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);
  overflow-wrap:anywhere}
.notifica .quando{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.notifica .azioni{display:flex;gap:8px;margin-top:10px}

/* la barra del tempo: dice quanto resta prima che se ne vada da sola */
.notifica .resta{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0 0 var(--r) var(--r);
  background-image:var(--grad-pri);transform-origin:left;animation:scade 10s linear both}
.notifica{position:relative;overflow:hidden}
@keyframes scade{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.notifica:hover .resta,.notifica:focus-within .resta{animation-play-state:paused}

/* ===== avvisi, stati vuoti, dialoghi, conferma ===== */
.avviso{border-left:4px solid var(--yellow);background:var(--surface);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.avviso.errore{border-left-color:var(--crit)}.avviso.conferma{border-left-color:var(--green)}
.vuoto{text-align:center;padding:40px 16px;color:var(--muted)}
.vuoto p{margin:0 0 12px}
.velo{position:fixed;inset:0;background:rgba(18,22,32,.45);display:flex;align-items:stretch;justify-content:flex-start;padding:0;z-index:50}
.dialogo{background:var(--surface);width:min(560px,100%);height:100%;max-height:none;overflow:hidden;
  display:flex;flex-direction:column;border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;box-shadow:var(--shadow)}
.dialogo-testa,.dialogo-piede{flex:none}
.dialogo-corpo{flex:1;overflow:auto}
/* LA TESTA DI UNA FINESTRA NON È UNA FASCIA COLORATA.
   Vale per le finestre laterali, per i fogli mobili e per i promemoria: fondo come il pannello,
   separata solo dalla riga sotto. Una fascia tinta o sfumata lassù compete col titolo che contiene
   — e il titolo è l'unica cosa che in quel punto deve farsi leggere. */
.dialogo-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--line);background:var(--surface);background-image:none}
.dialogo-testa>*{min-width:0}

/* INTERRUTTORE — acceso/spento. Misure da pollice, non da pagina.
   Pieno `accent`, mai sfumato: la sfumatura segna la cosa più importante del blocco, e un
   interruttore non lo è mai. Un interruttore enorme e sfumato dentro una riga diventa il
   protagonista della schermata al posto del dato che accende. */
.interruttore{position:relative;flex:none;width:46px;height:28px;border-radius:var(--pill);corner-shape:round;
  background:var(--line-strong);border:0;padding:0;cursor:pointer;
  transition:background-color .18s ease;-webkit-tap-highlight-color:transparent}
.interruttore::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 1px 3px rgba(18,22,32,.3);transition:transform .18s cubic-bezier(.3,1,.4,1)}
.interruttore[aria-checked="true"]{background:var(--accent)}
.interruttore[aria-checked="true"]::after{transform:translateX(18px)}
.interruttore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.interruttore:disabled{opacity:var(--disabilitato);cursor:not-allowed}
:root:not([data-theme="light"]) .interruttore[aria-checked="true"]::after{background:#04120B}
/* la riga che lo contiene: etichetta a sinistra, interruttore a destra, mai il contrario */
.riga-interruttore{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}
.riga-interruttore .et-i{font-size:14.5px;font-weight:600;color:var(--ink)}
.riga-interruttore .nota-i{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.dialogo-corpo{padding:18px}
.dialogo-piede{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.dialogo-piede .spazio{flex:1}
.pill-conferma{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--pill);font-size:14px;font-weight:600;box-shadow:var(--shadow);z-index:60}
.skel{background:linear-gradient(90deg,var(--sunk) 25%,var(--line) 50%,var(--sunk) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--r-sm);min-height:14px}
@keyframes sk{to{background-position:-200% 0}}

/* ===== stile "homie" (data-stile="homie", in chiaro o scuro): sfondo dinamico + superfici in vetro. Senza attributo = classico ===== */
:root[data-stile="homie"] body::before,:root[data-stile="homie"] body::after{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;filter:blur(30px)}
:root[data-stile="homie"] body::before{
  background:
    radial-gradient(40% 45% at 18% 22%, rgba(250,198,0,.42) 0%, rgba(250,198,0,0) 70%),
    radial-gradient(38% 42% at 82% 28%, rgba(45,184,122,.38) 0%, rgba(45,184,122,0) 70%),
    radial-gradient(45% 50% at 60% 85%, rgba(255,216,77,.32) 0%, rgba(255,216,77,0) 70%);
  animation:ambiente 24s ease-in-out infinite alternate}
:root[data-stile="homie"] body::after{
  background:
    radial-gradient(30% 35% at 70% 60%, rgba(155,221,116,.30) 0%, rgba(155,221,116,0) 70%),
    radial-gradient(28% 32% at 30% 70%, rgba(250,198,0,.26) 0%, rgba(250,198,0,0) 70%);
  animation:ambiente2 37s ease-in-out infinite alternate}
@keyframes ambiente2{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(-6%,4%,0) rotate(8deg) scale(1.12)}100%{transform:translate3d(5%,-5%,0) rotate(-6deg) scale(1.05)}}
/* riflesso che scorre lentamente sulle superfici di vetro */
:root[data-stile="homie"] .scheda,:root[data-stile="homie"] .kpi,:root[data-stile="homie"] .tab-cont,:root[data-stile="homie"] .dialogo{position:relative;overflow:hidden}
:root[data-stile="homie"] .scheda::before,:root[data-stile="homie"] .kpi::before,:root[data-stile="homie"] .tab-cont::before,:root[data-stile="homie"] .dialogo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 65%);background-size:300% 100%;animation:riflesso 14s ease-in-out infinite}
:root[data-stile="homie"] .scheda>*,:root[data-stile="homie"] .kpi>*,:root[data-stile="homie"] .tab-cont>*{position:relative;z-index:1}
@keyframes riflesso{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes ambiente{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6%,-5%,0) scale(1.12)}
  100%{transform:translate3d(-6%,5%,0) scale(1.04)}}

:root[data-stile="homie"]:not([data-theme="light"]){--surface:#1A1F26;--sunk:#232932;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.20)}
:root[data-stile="homie"][data-theme="light"]{--surface:#FFFFFF;--sunk:#F1F5F9;--line:rgba(0,83,30,.12);--line-strong:rgba(0,83,30,.22)}

:root[data-stile="homie"][data-theme="light"] body::before{background:
    radial-gradient(40% 45% at 18% 22%, rgba(250,198,0,.30) 0%, rgba(250,198,0,0) 70%),
    radial-gradient(38% 42% at 82% 28%, rgba(0,112,60,.22) 0%, rgba(0,112,60,0) 70%),
    radial-gradient(45% 50% at 60% 85%, rgba(255,216,77,.26) 0%, rgba(255,216,77,0) 70%)}
:root[data-stile="homie"][data-theme="light"] body::after{background:
    radial-gradient(30% 35% at 70% 60%, rgba(94,140,59,.20) 0%, rgba(94,140,59,0) 70%),
    radial-gradient(28% 32% at 30% 70%, rgba(250,198,0,.18) 0%, rgba(250,198,0,0) 70%)}
/* Nello stile Homie le superfici restano piene: a muoversi sono le luci di fondo e il riflesso. */
:root[data-stile="homie"] .btn.pri{background-image:var(--grad-pri-vetro)}
:root[data-stile="homie"] .tab[aria-current="page"]{background-image:var(--grad-pri-vetro)}
:root[data-stile="homie"] .btn.sec{background-image:var(--grad-sec-vetro)}
:root[data-stile="homie"]:not([data-theme="light"]) th{background:rgba(250,198,0,.06)}


/* ===== WIDGET HOME: tessere della pagina iniziale, come widget iOS (Ive): una informazione, grande, toccabile ===== */
.widget-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:180px;gap:14px}
.widget{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:14px 16px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 28px -18px rgba(18,22,32,.35);
  overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .2s ease}
.widget:active{transform:scale(.97)}
@media (hover:hover){.widget:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 34px -18px rgba(18,22,32,.4)}}
.widget.l{grid-column:span 2} .widget.xl{grid-column:span 2;grid-row:span 2} .widget.alto{grid-row:span 2}

/* ===== LE TRE MISURE =====
   PICCOLO una cosa sola · MEDIO due o tre · LARGO cinque o sei, con il giorno dopo.
   Il modulo scrive SEMPRE l'elenco intero: è il CSS a decidere quanto se ne vede. Così la
   stessa tessera cambia misura senza che nessuno ricalcoli i dati, e un generatore non deve
   indovinare quante righe stanno dentro — gli basta scrivere la classe della misura.
   La regola che tiene insieme tutto: a misura che cala si tolgono RIGHE, non si rimpicciolisce
   il testo. Un widget illeggibile non è un widget piccolo, è un widget rotto. */
.widget.piccolo{grid-column:span 1;grid-row:span 1}
.widget.medio{grid-column:span 2;grid-row:span 1}
.widget.largo{grid-column:span 2;grid-row:span 2}

.widget .w-elenco{display:flex;flex-direction:column;gap:0;margin-top:6px;min-height:0;overflow:hidden}
.widget .w-voce{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-top:1px solid var(--line);min-width:0}
.widget .w-voce:first-of-type{border-top:0;padding-top:0}
.widget .w-ora, .widget .w-guida{flex:none;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.widget .w-cosa, .widget .w-primario{flex:1;min-width:0;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget .w-dove, .widget .w-secondario{display:block;font-size:12.5px;line-height:1.25;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Il separatore del giorno è un <p>, le voci sono <div>: non è un dettaglio.
   Il conteggio delle righe visibili usa :nth-of-type, che conta per tipo di elemento — se il
   separatore fosse un <div> occuperebbe una posizione e il widget largo mostrerebbe cinque
   voci invece di sei. Cambiare il tag qui rompe il conteggio ovunque. */
.widget .w-giorno, .widget .w-gruppo{margin:0;padding:7px 0 3px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.widget .w-altri{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:600;color:var(--accent-text)}
.widget .w-vuoto{margin-top:8px;font-size:14px;color:var(--muted)}

/* PICCOLO — una sola voce, e l'ora diventa il dato. Niente luogo, niente giorni, niente elenco. */
.widget.piccolo .w-voce{display:block;border-top:0;padding:0}
.widget.piccolo .w-voce:nth-of-type(n+2){display:none}
.widget.piccolo .w-giorno, .widget.piccolo .w-gruppo{display:none}
.widget.piccolo .w-dove, .widget.piccolo .w-secondario{display:none}
.widget.piccolo .w-ora, .widget.piccolo .w-guida{display:block;font-size:clamp(24px,3vw,30px);line-height:1.1;letter-spacing:-.02em;
  background-image:var(--grad-titolo);-webkit-background-clip:text;background-clip:text;color:transparent}
.widget.piccolo .w-cosa, .widget.piccolo .w-primario{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;margin-top:4px;font-weight:600}

/* MEDIO — due o tre righe, ora e cosa sulla stessa riga. Il luogo non entra: si toglie. */
.widget.medio .w-voce:nth-of-type(n+4){display:none}
.widget.medio .w-giorno, .widget.medio .w-gruppo{display:none}
.widget.medio .w-dove, .widget.medio .w-secondario{display:none}

/* LARGO — fino a sei righe, con il luogo e lo stacco del giorno dopo. */
.widget.largo .w-voce:nth-of-type(n+7){display:none}
.widget.largo .w-cosa, .widget.largo .w-primario{font-weight:600}

/* il conteggio di quello che non è entrato lo scrive il modulo: qui si decide solo se mostrarlo */
.widget .w-altri:empty{display:none}

/* ===== SCELTA DELL'UTENTE =====
   Come su iOS: la misura decide quanto CI STA, la persona decide che cosa METTERCI.
   Due attributi, letti dal CSS, scritti dal modulo quando la persona configura la tessera.

   data-campi="guida primario secondario"   quali campi mostrare, fra quelli che la misura consente
                                            (valgono anche i nomi vecchi: ora, cosa, dove, giorno)
   data-voci="2"               quante righe, entro il massimo della misura

   Senza attributi vale il comportamento predefinito della misura, che è quello giusto nel
   dubbio. Con gli attributi la scelta vince — ma solo verso il basso: il tetto della misura
   resta, perché una persona può chiedere meno di quello che ci sta, mai di più. Le regole
   del tetto sono ripetute in fondo per questo: sono l'ultima parola. */
.widget[data-campi] .w-ora,.widget[data-campi] .w-cosa,
.widget[data-campi] .w-dove, .widget[data-campi] .w-giorno, .widget[data-campi] .w-secondario, .widget[data-campi] .w-gruppo{display:none}
.widget[data-campi~="ora"] .w-ora,.widget[data-campi~="ora"] .w-guida,
.widget[data-campi~="guida"] .w-ora,.widget[data-campi~="guida"] .w-guida{display:block}
.widget[data-campi~="cosa"] .w-cosa,.widget[data-campi~="cosa"] .w-primario,
.widget[data-campi~="primario"] .w-cosa,.widget[data-campi~="primario"] .w-primario{display:block}
.widget[data-campi~="dove"] .w-dove,.widget[data-campi~="dove"] .w-secondario,
.widget[data-campi~="secondario"] .w-dove,.widget[data-campi~="secondario"] .w-secondario{display:block}
.widget[data-campi~="giorno"] .w-giorno,.widget[data-campi~="giorno"] .w-gruppo,
.widget[data-campi~="gruppo"] .w-giorno,.widget[data-campi~="gruppo"] .w-gruppo{display:block}
.widget.piccolo[data-campi~="ora"] .w-ora, .widget.piccolo[data-campi~="ora"] .w-guida{display:block}

.widget[data-voci="1"] .w-elenco>div.w-voce:nth-of-type(n+2){display:none}
.widget[data-voci="2"] .w-elenco>div.w-voce:nth-of-type(n+3){display:none}
.widget[data-voci="3"] .w-elenco>div.w-voce:nth-of-type(n+4){display:none}
.widget[data-voci="4"] .w-elenco>div.w-voce:nth-of-type(n+5){display:none}
.widget[data-voci="5"] .w-elenco>div.w-voce:nth-of-type(n+6){display:none}
.widget[data-voci="6"] .w-elenco>div.w-voce:nth-of-type(n+7){display:none}

/* il tetto della misura, ultima parola: nessuna scelta può superarlo */
.widget.piccolo .w-elenco>div.w-voce:nth-of-type(n+2),
.widget.medio .w-elenco>div.w-voce:nth-of-type(n+4),
.widget.largo .w-elenco>div.w-voce:nth-of-type(n+7){display:none}
.widget.piccolo .w-giorno,.widget.piccolo .w-dove,
.widget.medio .w-giorno, .widget.medio .w-dove, .widget.medio .w-secondario, .widget.medio .w-gruppo{display:none}
.widget .w-testa{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.widget .w-testa .ico,.widget .w-testa .ico-mask{width:18px;height:18px}
/* PIÙ TESSERE DELLO STESSO TIPO. Non c'è corrispondenza uno a uno fra tipo di widget e tessera
   sulla Home: dello stesso tipo se ne possono mettere quante se ne vogliono, ognuna con la sua
   misura e la sua configurazione. È come su iOS, dove lo stesso widget si aggiunge due volte
   puntato su due calendari diversi.
   Due tessere dello stesso tipo però devono distinguersi a colpo d'occhio, altrimenti sono due
   scatole identiche che dicono cose diverse: il qualificatore nella testa è quello che le separa. */
.widget .w-testa .w-filtro{font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-text)}
.widget .w-testa .w-filtro::before{content:"·";margin:0 5px;color:var(--muted)}
.widget .w-val{font-size:clamp(22px,2.6vw,34px);white-space:nowrap;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background-image:var(--grad-titolo);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.widget .w-ctx{font-size:13.5px;color:var(--muted)}
.widget .w-lista{display:flex;flex-direction:column;gap:6px;font-size:14px;margin-top:4px}
.widget .w-lista>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.widget .w-lista>div:first-child{border-top:0}
.widget .w-lista .num{font-weight:700}
.widget .w-pie{display:flex;align-items:center;justify-content:space-between;gap:8px}
.widget .w-barra{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden}
.widget .w-barra>i{display:block;height:100%;border-radius:inherit;background:var(--grad-pri)}
/* widget in evidenza: sfumatura piena, testo bianco (uno solo per Home) */
.widget.evidenza{background:var(--grad-pri);border-color:transparent;color:#fff}
.widget.evidenza .w-testa,.widget.evidenza .w-ctx{color:rgba(255,255,255,.85)}
.widget.evidenza .w-val{background:none;color:#fff;-webkit-text-fill-color:#fff}
.widget.evidenza .w-barra{background:rgba(255,255,255,.25)} .widget.evidenza .w-barra>i{background:#fff}
:root:not([data-theme="light"]) .widget.evidenza{color:#04120B}
:root:not([data-theme="light"]) .widget.evidenza .w-testa,:root:not([data-theme="light"]) .widget.evidenza .w-ctx{color:rgba(4,18,11,.75)}
:root:not([data-theme="light"]) .widget.evidenza .w-val{color:#04120B;-webkit-text-fill-color:#04120B}
/* stato (pallino) in alto a destra, senza testo in più */
.widget .w-stato{position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.widget .w-stato.verde{background:var(--green)} .widget .w-stato.giallo{background:var(--yellow)}
/* Homie: il widget è vetro e le luci passano; riflesso lento */
:root[data-stile="homie"] .widget{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow)}
.widget{backdrop-filter:none;-webkit-backdrop-filter:none}
@media (max-width:760px),(pointer:coarse) and (max-width:1024px){
  /* ===== WIDGET SU MOBILE =====
     Due colonne fisse, come sulla schermata di un telefono. Le righe sono più alte che su
     schermo — 168px invece di 150 — perché qui il widget non è un riassunto da scorrere con
     l'occhio ma la cosa che si guarda per prima, e una riga in più vale più di un widget in più.
     La differenza che conta: il MEDIO su mobile è a tutta larghezza, quindi orizzontalmente
     sta più largo che su schermo. Lì il luogo ci sta, e si mostra. È l'unico punto in cui una
     misura più piccola porta più informazione di quella corrispondente sul desktop. */
  .widget-griglia{grid-template-columns:repeat(2,1fr);grid-auto-rows:188px;gap:12px}
  .widget{padding:16px} .widget .w-val{font-size:clamp(20px,7.5vw,30px)}
  .widget.xl,.widget.l{grid-column:span 2}
  .widget.piccolo{grid-column:span 1;grid-row:span 1}
  .widget.medio{grid-column:span 2;grid-row:span 1}
  .widget.largo{grid-column:span 2;grid-row:span 2}
  /* il testo sale: un widget si legge di sfuggita, con il telefono in mano */
  .widget .w-voce{padding:8px 0}
.widget .w-ora, .widget .w-guida{font-size:15px} .widget .w-cosa{font-size:15px}
.widget .w-dove, .widget .w-secondario{font-size:13.5px}
.widget .w-giorno, .widget .w-gruppo{font-size:12px}
  .widget .w-altri{font-size:13.5px}
.widget.piccolo .w-ora, .widget.piccolo .w-guida{font-size:26px}
.widget.piccolo .w-cosa, .widget.piccolo .w-primario{font-size:14.5px}
  /* a tutta larghezza il luogo entra: il medio su mobile dice più del medio su schermo */
.widget.medio .w-dove, .widget.medio .w-secondario{display:block}
  .widget.medio .w-voce:nth-of-type(n+3){display:none}
  .widget.largo .w-voce:nth-of-type(n+6){display:none}
}

/* ===== MOBILE / TOUCH — information first, una informazione alla volta (Ive) ===== */
/* elementi toccabili: niente frecce/chevron, l'intera superficie risponde al tocco */
.tocca{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .12s ease}
.tocca:active{transform:scale(.985);filter:brightness(.98)}
.freccia,.chevron{display:none!important}
/* scheda-informazione: un dato grande, un'etichetta, al massimo una riga di contesto */
.info{display:flex;flex-direction:column;gap:2px}
.info .et{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.info .val{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.info .ctx{font-size:14px;color:var(--muted)}
/* dettagli secondari: chiusi di default (progressive disclosure), aperti con un tocco */
details.dettagli{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}
details.dettagli summary{list-style:none;cursor:pointer;font-weight:600;color:var(--accent-text);min-height:44px;display:flex;align-items:center}
details.dettagli summary::-webkit-details-marker{display:none}
/* barra azione in basso: l'azione principale sempre a portata di pollice */
.azione-mobile{display:none}
@media (max-width:760px),(pointer:coarse) and (max-width:1024px){
  html,body{font-size:16px}
  .wrap{padding:0 var(--gutter) calc(96px + env(safe-area-inset-bottom))}
  .sez{font-size:28px} .sotto{font-size:21px}
  /* bottoni proporzionati allo schermo */
  .btn{min-height:50px;padding:12px 20px;font-size:16px;border-radius:16px}
  .btn.pri,.btn.sec{width:100%;justify-content:center}
  .riga>.btn.pri,.riga>.btn.sec{flex:1 1 100%}
  .btn.xs{min-height:40px;padding:8px 16px;font-size:14px}
  .btn.ghost{min-height:44px}
  /* il tondo non va a tutta larghezza come gli altri: resta tondo e cresce fino al bersaglio da 44px */
  .btn.tondo{width:44px;height:44px;min-height:44px;flex:none} .btn.tondo svg{width:20px;height:20px}
  .btn.tondo.xs{width:36px;height:36px;min-height:36px}
  .chip{min-height:42px;padding:8px 16px;font-size:15px}
  .tab{min-height:48px;font-size:16px;padding:12px 18px}
  /* menu orizzontale scorrevole con aggancio, verticale a tutta larghezza */
  /* il menu orizzontale scorre e sborda di 4px per lato; la barra a icone no — è agganciata ai bordi */
  .menu:not(.verticale):not(.icone){flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:12px;margin:0 -4px;padding-left:4px;padding-right:4px}
  .menu:not(.verticale)::-webkit-scrollbar{display:none}
  .menu:not(.verticale):not(.icone)>.tab{scroll-snap-align:start;flex:0 0 auto}
  .menu.verticale{width:100%}
  /* una colonna, una informazione per scheda */
  .griglia,.g2,.g3,.kpi-griglia{grid-template-columns:1fr!important}
  .kpi{padding:18px 20px} .kpi .val{font-size:34px} .kpi .et{font-size:13px}
  .scheda{padding:18px 20px} .scheda-testa h3{font-size:17px}
  .info .val{font-size:36px}
  /* campi più alti, testo 16px (niente zoom automatico su iOS) */
  input,select,textarea{min-height:50px;font-size:16px;padding:12px 14px;border-radius:16px}
  label{font-size:13px}
  /* tabelle → elenco di schede: ogni riga una scheda, ogni cella etichetta+valore */
  .tab-cont{border:0;background:transparent;overflow:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;padding:6px 4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
  td{border:0;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  td::before{content:attr(data-et);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:none}
  td:first-child{font-size:17px;font-weight:700;padding-top:12px} td:first-child::before{display:none}
  td.num{text-align:right;font-size:17px;font-weight:700}
  td.azioni{justify-content:flex-end;padding-bottom:12px} td.azioni::before{display:none}
  td.azioni .btn{flex:1;justify-content:center}
  tbody tr:hover td{background:transparent}
  /* finestre → foglio dal basso, a tutta larghezza */
  .velo{align-items:flex-end;justify-content:center;padding:0}
  .dialogo{width:100%;height:auto;max-height:92vh;border-radius:24px 24px 0 0;border-bottom:0;border-left:1px solid var(--line)}
  @keyframes tendina-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes tendina-out{from{transform:none}to{transform:translateY(100%)}}
  .dialogo::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:10px auto 0}
  .dialogo-piede{flex-wrap:wrap;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
  .dialogo-piede .btn{flex:1 1 calc(50% - 5px);justify-content:center} .dialogo-piede .btn.pri{flex-basis:100%;order:-1}
  .dialogo-piede .spazio{display:none}
  @keyframes goccia-in{0%{opacity:0;transform:translateY(40%) scale(.98,.9);filter:blur(6px)}60%{opacity:1;transform:translateY(-2%) scale(1,1.02);filter:blur(0)}100%{transform:translateY(0) scale(1,1)}}
  @keyframes goccia-out{to{opacity:0;transform:translateY(40%) scale(.98,.9);filter:blur(6px)}}
  /* barra azione principale in basso */
  .azione-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;
    background:var(--surface);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--line)}
  .azione-mobile .btn{flex:1;justify-content:center}
  .pill-conferma{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center}
  /* NOTIFICHE SU MOBILE — restano in alto, dove cadono, ma a tutta larghezza dentro il gutter
     e sotto la tacca. Il corpo sale a 15px perché una notifica si legge di sfuggita, e il tocco
     per chiudere passa a 44px. Più di due in pila coprirebbero la schermata: le altre aspettano. */
  .notifiche{top:calc(10px + env(safe-area-inset-top));left:var(--gutter,12px);right:var(--gutter,12px);
    width:auto;max-width:none;gap:8px}
  .notifica{padding:13px;gap:11px;border-radius:var(--r)}
  .notifica .bollo{width:42px;height:42px} .notifica .bollo svg{width:21px;height:21px}
  .notifica .titolo-n{font-size:16px}
  .notifica p{font-size:15px}
  .notifica .btn.tondo{width:44px;height:44px;min-height:44px}
  .notifiche .notifica:nth-child(n+3){display:none}
  /* FOGLIO MOBILE — la testa resta pulita: nessuna fascia tinta, nessuna sfumatura, solo il titolo.
     È la stessa regola delle finestre laterali, e vale per ogni pop-up: promemoria, calendario, tutti. */
  .dialogo-testa{background:var(--surface);background-image:none;padding:14px 16px}
  .dialogo-testa .sotto,.dialogo-testa .titolo{font-size:18px;line-height:1.25}
  /* l'interruttore cresce fino alla misura del pollice, non oltre: 52x32 è lo standard tattile */
  .interruttore{width:52px;height:32px}
  .interruttore::after{width:26px;height:26px}
  .interruttore[aria-checked="true"]::after{transform:translateX(20px)}
  .riga-interruttore{min-height:50px}
  .riga-interruttore .et-i{font-size:16px}
  .riga-interruttore .nota-i{font-size:14px}
  /* avvisi e badge più evidenti */
  .avviso{font-size:15.5px;padding:14px 16px}
  .badge{font-size:13px;padding:5px 12px}
  /* niente effetti solo-hover; il puntatore non esiste */
  .btn.pri{background-position:35% 35%!important}
  .liquido::before{animation:none}
  .temi button,.stili button{min-height:40px;padding:8px 14px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======================================================================
   PRESENTAZIONE — i modelli del deck e dei documenti, alla scala della
   pagina e della slide. Stessa gerarchia dell'interfaccia:

     gradiente  = il primario. UNO per blocco, come .btn.pri: la scheda
                  che deve pesare, il dato che porta l'informazione, il
                  titolo di apertura. Mai due affiancati.
     verde pieno= il secondario, quando il primario e gia speso altrove
     grigio     = tutto il resto
     giallo     = accento, mai superficie e mai testo su fondo chiaro

   Il gradiente qui e --grad-pri, lo stesso dei bottoni, e si muove con
   l'onda dove c'e uno schermo. In stampa resta fermo: e un gradiente, non
   un effetto.
   ====================================================================== */
.hm-occhiello{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.hm-occhiello--verde{color:var(--marchio-verde)}
.hm-occhiello--tenue{color:var(--slide-muted)}
.hm-occhiello--giallo{color:var(--yellow)}
.hm-barra{height:8px;background:var(--yellow);border-radius:var(--pill)}

/* titolo: la sfumatura solo sul titolo di apertura, come .sez.titolo */
.hm-titolo{font-size:36px;line-height:40px;font-weight:800;color:var(--slide-ink);margin:0}
.hm-titolo--apertura{background-image:var(--grad-titolo);-webkit-background-clip:text;background-clip:text;
  color:transparent;display:inline-block}
.hm-intestazione{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.hm-intestazione>.hm-barra{margin-top:var(--space-3)}
.hm-intestazione .hm-lead{font-size:18px;line-height:27px;color:var(--slide-muted);margin:var(--space-1) 0 0;max-width:62ch}

/* IL DATO — l'informazione che porta il senso, in sfumatura come .widget .w-val.
   Uno per blocco: se ce ne sono due, nessuno dei due conta. */
.hm-dato{display:flex;flex-direction:column;gap:2px}
.hm-dato .hm-dato__et{font-size:12px;font-weight:700;letter-spacing:.72px;text-transform:uppercase;color:var(--slide-muted)}
.hm-dato .hm-dato__val{font-size:56px;line-height:1.05;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;
  background-image:var(--grad-titolo);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.hm-dato .hm-dato__ctx{font-size:16px;color:var(--slide-muted)}

/* SCHEDA */
.hm-scheda{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-9);border-radius:24px;background:var(--slide-superficie)}
.hm-scheda h3{font-size:28px;line-height:34px;font-weight:800;color:var(--slide-ink);margin:0}
.hm-scheda p{font-size:16px;line-height:24px;color:var(--slide-ink);margin:0}
/* primaria: la sfumatura dei bottoni. UNA per fila. */
.hm-scheda--primaria{background-image:var(--grad-pri);background-size:200% 200%;animation:onda 11s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--ombra-pri)}
.hm-scheda--primaria h3{color:#FFFFFF} .hm-scheda--primaria p{color:rgba(255,255,255,.88)}
.hm-scheda--primaria .hm-occhiello{color:var(--yellow)}
/* verde pieno: il secondario */
.hm-scheda--verde{background:var(--marchio-verde)}
.hm-scheda--verde h3{color:#FFFFFF} .hm-scheda--verde p{color:var(--slide-verde-tenue)}
.hm-scheda--scura{background:var(--slide-ink)}
.hm-scheda--scura h3{color:#FFFFFF} .hm-scheda--scura p{color:#C9C5C1}
.hm-scheda--rilievo{background:#FFFFFF;border:3px solid var(--yellow);padding:calc(var(--space-9) - 3px)}

/* CITAZIONE */
.hm-citazione{display:flex;align-items:stretch;gap:var(--space-7);padding:var(--space-7) var(--space-9);background:var(--slide-superficie);border-radius:16px}
.hm-citazione__barra{flex:0 0 8px;width:8px;border-radius:var(--pill)}
.hm-citazione__barra--giallo{background:var(--yellow)} .hm-citazione__barra--verde{background:var(--marchio-verde)}
.hm-citazione__barra--primaria{background-image:var(--grad-pri)}
.hm-citazione__corpo{display:flex;flex-direction:column;gap:var(--space-3)}
.hm-citazione__etichetta{margin:0;font-size:14px;font-weight:600;color:var(--slide-muted)}
.hm-citazione p.hm-frase{margin:0;font-size:18px;line-height:26px;font-weight:600;color:var(--slide-ink)}

/* PASSO NUMERATO */
.hm-passo{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-9);background:var(--slide-superficie);border-radius:20px}
.hm-passo__bollo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--pill);font-size:20px;font-weight:600}
.hm-passo__bollo--primaria{background-image:var(--grad-pri);background-size:200% 200%;animation:onda 11s ease-in-out infinite;color:#FFFFFF;box-shadow:var(--ombra-pri)}
.hm-passo__bollo--verde{background:var(--marchio-verde);color:#FFFFFF}
.hm-passo__bollo--giallo{background:var(--yellow);color:var(--slide-ink)}
.hm-passo__bollo--neutra{background:#FFFFFF;color:var(--slide-ink);box-shadow:inset 0 0 0 2px var(--slide-muted)}
.hm-passo h3{font-size:28px;line-height:34px;font-weight:800;color:var(--slide-ink);margin:0}
.hm-passo .hm-sommario{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--slide-ink)}
.hm-passo .hm-testo{margin:0;font-size:16px;line-height:24px;color:var(--slide-muted)}

/* BANDA: chiude, non compete col primario della pagina: resta piena */
.hm-banda{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-7) var(--space-9);background:var(--slide-ink);border-radius:16px}
.hm-banda p{margin:0;font-size:20px;line-height:28px;font-weight:600;color:#FFFFFF}

/* VOCE DI ELENCO */
.hm-voce{display:flex;align-items:flex-start;gap:var(--space-5);list-style:none;padding:0;font-size:16px;line-height:24px;color:var(--slide-ink)}
.hm-voce__icona{flex:0 0 24px;width:24px;height:24px;margin-top:1px}
.hm-voce__icona--verde{color:var(--marchio-verde)} .hm-voce__icona--giallo{color:var(--yellow)}
.hm-scheda--verde .hm-voce,.hm-scheda--scura .hm-voce,.hm-scheda--primaria .hm-voce{color:#FFFFFF}

/* NODO DI DIAGRAMMA: la radice e il primario, quindi sfumata */
.hm-nodo{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--space-7) var(--space-9);border-radius:16px;text-align:center}
.hm-nodo__titolo{font-size:18px;line-height:24px;font-weight:600}
.hm-nodo__sottotitolo{font-size:14px;line-height:20px}
.hm-nodo--primaria{background-image:var(--grad-pri);background-size:200% 200%;animation:onda 11s ease-in-out infinite;color:#FFFFFF;box-shadow:var(--ombra-pri)}
.hm-nodo--primaria .hm-nodo__sottotitolo{color:rgba(255,255,255,.85)}
.hm-nodo--verde{background:var(--marchio-verde);color:#FFFFFF} .hm-nodo--verde .hm-nodo__sottotitolo{color:var(--slide-verde-tenue)}
.hm-nodo--scura{background:var(--slide-ink);color:#FFFFFF} .hm-nodo--scura .hm-nodo__sottotitolo{color:#C9C5C1}
.hm-nodo--neutra{background:var(--slide-superficie);color:var(--slide-ink)} .hm-nodo--neutra .hm-nodo__sottotitolo{color:var(--slide-muted)}
.hm-nodo--tratteggio{background:#FFFFFF;color:var(--slide-ink);border:3px dashed var(--yellow)}
.hm-nodo--tratteggio .hm-nodo__sottotitolo{color:var(--slide-muted)}

.hm-logo{display:block} .hm-icona{display:inline-block;vertical-align:middle}
@media print{.hm-scheda--primaria,.hm-passo__bollo--primaria,.hm-nodo--primaria{animation:none}}