/* =====================================================================
   ux-layout.css — Impaginazione per dispositivo (anteprima UX)
   Classi su <html> (da ux-layout.js): ux-phone | ux-tablet | ux-desk,
   ux-wide, ux-touch | ux-mouse, ux-portrait | ux-landscape, ux-pwa, ux-full, ux-zoom, ux-senza-fab.
   Variabili (da JS): --ux-top, --ux-bottom, --ux-rail-w, --ux-z (scala dell'interfaccia),
   --ux-tb-bar / --ux-tb (barre dell'app in alto, classe ux-barra-alto), --ux-pb-h (barra Annulla / Conferma in basso,
   classe ux-barra-conferma)
   (da ux-catasto.js): --ux-panel-w, --ux-sheet-h, --ux-co-h (altezza del pannello CAT)
   Con la scala attiva (html.ux-zoom) tutte le lunghezze in px sono "locali" (moltiplicate per --ux-z
   sullo schermo), e anche vh/vw/dvh vengono moltiplicati: per questo qui si scrivono sempre
   calc(Nvh / var(--ux-z,1)) — con la scala a 1 il risultato è identico a prima.
   ===================================================================== */

/* ---------- Variabili di comodo ---------- */
:root{
  --ux-z: 1;             /* scala dell'interfaccia (ux-layout.js la alza sui computer con schermo grande) */
  /* bordo alto utile (sotto l'header o sotto la tacca) */
  --ux-t: max(var(--ux-top,0px), env(safe-area-inset-top,0px));
  /* bordo basso utile (sopra la nav / la tacca + l'eventuale scheda catasto) */
  --ux-b: calc(max(var(--ux-bottom,0px), env(safe-area-inset-bottom,0px)) + var(--ux-sheet-h,0px));
  --ux-fab-h: 58px;      /* spazio dei pulsanti "Valvola qui" in basso */
  --ux-dx-btn: 44px;     /* lato dei pulsanti della colonna a destra */
  --ux-dx-w: 54px;       /* larghezza totale della colonna a destra */
  --ux-ease: cubic-bezier(.2,.8,.2,1);
}
html.ux-phone { --ux-dx-btn:40px; --ux-dx-w:50px; }
html.ux-tablet{ --ux-dx-btn:42px; --ux-dx-w:52px; }
html.ux-desk  { --ux-dx-btn:46px; --ux-dx-w:56px; }   /* computer: pulsanti più grandi (richiesta di Marco) */
/* in mappa piena lascio spazio alla pillola "Esci" in alto a sinistra */
html.ux-full  { --ux-t: calc(env(safe-area-inset-top,0px) + 46px); }
/* niente pulsanti "Valvola qui": le barre in basso scendono */
body.mappa-pulita{ --ux-fab-h:0px; }
/* classe messa da ux-layout.js guardando #fab-add (prima html:has(#fab-add[style*="none"]): trascinando la mappa
   Leaflet riscrive di continuo gli attributi style e lo stile di tutta la pagina veniva ricalcolato a ogni passo) */
html.ux-senza-fab body{ --ux-fab-h:0px; }
html:not(:has(#mapview.attiva)) body{ --ux-fab-h:0px; }

/* =====================================================================
   SCALA DELL'INTERFACCIA (computer con schermo grande, da ux-layout.js)
   Tutta la pagina è ingrandita come con Ctrl+; la mappa torna 1:1 (tasselli nitidi, Leaflet lavora
   in px dello schermo); controlli (+/-, attribuzione) e fumetti della mappa tornano alla scala dell'interfaccia.
   ===================================================================== */
html.ux-zoom{ zoom:var(--ux-z,1); }
/* --ux-zinv (da JS) = 1/z arrotondato per eccesso: z × inverso >= 1, tasselli esatti a 256 px */
html.ux-zoom #map{ zoom:var(--ux-zinv, calc(1 / var(--ux-z,1))); }
html.ux-zoom #map .leaflet-control-container,
html.ux-zoom #map .leaflet-popup-content-wrapper,
html.ux-zoom #map .leaflet-popup-close-button,
html.ux-zoom #map .leaflet-popup-tip-container{ zoom:var(--ux-z,1); }
/* il fumetto (non zoomato: Leaflet ne misura il contenitore) alza il fondo quanto la punta ingrandita
   (20px di Leaflet × z, meno i 7px di scostamento che Leaflet non ingrandisce) */
html.ux-zoom #map .leaflet-popup{ margin-bottom:calc(13px * var(--ux-z,1) + 7px); }

/* ---------- Animazioni (brevi, sobrie) ---------- */
@keyframes uxPop   { from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;} }
@keyframes uxFade  { from{opacity:0;} to{opacity:1;} }
@keyframes uxSu    { from{transform:translateY(40px); opacity:.4;} to{transform:none; opacity:1;} }
@keyframes uxDialog{ from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;} }

/* =====================================================================
   HEADER
   ===================================================================== */
#app > header .titolo{ cursor:default; }

/* --- Telefono: header compatto --- */
html.ux-phone #app > header{
  padding: calc(env(safe-area-inset-top,0px) + 3px) calc(env(safe-area-inset-right,0px) + 8px) 3px calc(env(safe-area-inset-left,0px) + 10px);
  gap:6px;
}
html.ux-phone #app > header .titolo{ font-size:15.5px; gap:7px; letter-spacing:.1px; }
html.ux-phone #app > header .titolo-img{ width:22px; height:22px; }
html.ux-phone #app > header .ver,
html.ux-phone #app > header #chi{ display:none; }
html.ux-phone #app > header .utente{ background:none; padding:0; gap:6px; }
html.ux-phone #app > header .utente #omni-btn,
html.ux-phone #app > header .utente #bio-set-btn,
html.ux-phone #app > header .utente > button:last-child{
  height:32px; min-width:36px; margin:0; padding:0 9px; border-radius:10px;
  background:rgba(255,255,255,.16); color:#fff; text-decoration:none; opacity:1;
  line-height:32px; font-size:16px; text-align:center;
}
html.ux-phone #app > header .utente > button:last-child{ font-size:12px; font-weight:700; padding:0 10px; }
html.ux-phone.ux-landscape #app > header{ padding-top: calc(env(safe-area-inset-top,0px) + 2px); padding-bottom:2px; }
/* senza il menu "Altro" (es. operatore con poche voci) utente e versione restano in vista.
   Il titolo non si stringe mai (prima «Irrigazione v4.01» veniva tagliato e la versione finiva sotto la lente):
   si stringe il nome, con i puntini. In verticale la versione va sotto «Irrigazione», piccola. */
html.ux-phone #app:has(#ux-nav-altro[hidden]) > header .titolo{ flex:0 0 auto; }
html.ux-phone #app:has(#ux-nav-altro[hidden]) > header .utente{ flex:0 1 auto; min-width:0; }
html.ux-phone #app:has(#ux-nav-altro[hidden]) > header #chi{
  display:inline-block; flex:0 1 auto; min-width:0; max-width:calc(30vw / var(--ux-z,1));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; opacity:.9; vertical-align:middle;
}
html.ux-phone #app:has(#ux-nav-altro[hidden]) > header .ver{ display:inline; font-size:10px; opacity:.75; }
html.ux-phone.ux-portrait #app:has(#ux-nav-altro[hidden]) > header .titolo{
  display:grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; row-gap:1px; overflow:visible;
}
html.ux-phone.ux-portrait #app:has(#ux-nav-altro[hidden]) > header .titolo-img{ grid-row:1 / span 2; }
html.ux-phone.ux-portrait #app:has(#ux-nav-altro[hidden]) > header .ver{
  grid-column:2; grid-row:2; justify-self:start; display:inline-block;
  margin:0; padding:0 6px; border-radius:7px; font-size:9.5px; line-height:13px;
}

/* --- Tablet e computer: header slanciato ma basso --- */
html.ux-tablet #app > header,
html.ux-desk #app > header{
  padding: calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 14px) 6px calc(env(safe-area-inset-left,0px) + 16px);
  background: linear-gradient(90deg, #1b5e20 0%, #24702a 60%, #2e7d32 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
html.ux-tablet #app > header .titolo,
html.ux-desk #app > header .titolo{ font-size:16px; letter-spacing:.2px; }
html.ux-tablet #app > header .utente,
html.ux-desk #app > header .utente{ padding:3px 4px; gap:6px; background:rgba(255,255,255,.12); border-radius:12px; }
html.ux-tablet #app > header .utente #omni-btn,
html.ux-desk #app > header .utente #omni-btn{
  display:inline-flex; align-items:center; gap:8px; margin:0; height:32px; padding:0 12px; border-radius:9px;
  background:rgba(255,255,255,.18); font-size:15px; min-width:200px; justify-content:flex-start;
}
html.ux-tablet #app > header .utente #omni-btn::after,
html.ux-desk #app > header .utente #omni-btn::after{
  content:'Cerca nell\2019 app'; font-size:13px; font-weight:600; opacity:.85; flex:1; text-align:left;
}
html.ux-desk #app > header .utente #omni-btn::after{ content:'Cerca nell\2019 app   /'; white-space:pre; }
html.ux-tablet #app > header .utente #bio-set-btn,
html.ux-desk #app > header .utente #bio-set-btn{ margin:0; height:32px; line-height:32px; padding:0 9px; }
html.ux-tablet #app > header .utente #chi,
html.ux-desk #app > header .utente #chi{ padding:0 4px; max-width:calc(28vw / var(--ux-z,1)); }
html.ux-tablet #app > header .utente > button:last-child,
html.ux-desk #app > header .utente > button:last-child{
  text-decoration:none; opacity:1; height:30px; padding:0 12px; border-radius:9px; font-weight:700;
  background:rgba(255,255,255,.14);
}
html.ux-mouse #app > header .utente button:hover{ background:rgba(255,255,255,.28); }
/* dita: pulsanti dell'header da almeno 40px (Esci non si tocca per sbaglio) */
html.ux-touch #app > header .utente #omni-btn,
html.ux-touch #app > header .utente #bio-set-btn,
html.ux-touch #app > header .utente > button:last-child{ height:40px; line-height:40px; min-width:40px; }

/* --- Computer: header un po' più alto e leggibile --- */
html.ux-desk #app > header{
  padding: calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 16px) 8px calc(env(safe-area-inset-left,0px) + 18px);
  gap:14px;
}
html.ux-desk #app > header .titolo{ font-size:18px; gap:9px; }
html.ux-desk #app > header .titolo-img{ width:28px; height:28px; border-radius:7px; }
html.ux-desk #app > header .ver{ font-size:12.5px; }
html.ux-desk #app > header .utente{ padding:4px 5px; gap:7px; border-radius:13px; }
html.ux-desk #app > header .utente #omni-btn{ height:38px; padding:0 14px; gap:10px; border-radius:10px; font-size:17px; min-width:250px; }
html.ux-desk #app > header .utente #omni-btn::after{ font-size:14px; }
html.ux-desk #app > header .utente #bio-set-btn{ height:38px; line-height:38px; padding:0 10px; border-radius:10px; font-size:17px; }
html.ux-desk #app > header .utente #chi{ font-size:13.5px; font-weight:600; }
html.ux-desk #app > header .utente > button:last-child{ height:38px; padding:0 14px; border-radius:10px; font-size:13.5px; }

/* pulsante «Aa» (dimensione di testo e pulsanti): solo sul computer */
#ux-scala-btn{ display:none; }
html.ux-desk #app > header .utente #ux-scala-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  height:38px; min-width:48px; margin:0; padding:0 11px; border-radius:10px;
  background:rgba(255,255,255,.18); color:#fff; opacity:1; text-decoration:none;
  font-size:18px; font-weight:800; line-height:1; letter-spacing:.2px;
}
#ux-scala-btn .ux-aa{ display:inline-flex; align-items:baseline; }
#ux-scala-btn .ux-aa-p{ font-size:.68em; margin-right:1px; }
html.ux-desk #app > header .utente #ux-scala-btn[aria-expanded="true"]{ background:#fff; color:#1b5e20; }

/* ricerca a tutto schermo (#omni): iPhone in orizzontale, lente, campo e ✕ fuori dalla tacca
   (l'app teneva solo 12 px dai bordi; l'elenco dei risultati e' gia' centrato e largo al massimo 560 px) */
html body #omni .omni-top{
  padding-left:calc(env(safe-area-inset-left,0px) + 12px);
  padding-right:calc(env(safe-area-inset-right,0px) + 12px);
}

/* pannellino "Dimensione" sotto «Aa» */
#ux-scala-pop{
  position:fixed; z-index:4600; top:0; left:0; display:none;
  padding:14px 16px 12px; border-radius:16px; background:#fff; color:#263238;
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 18px 48px rgba(0,0,0,.26);
}
#ux-scala-pop.on{ display:block; }
#ux-scala-pop::before{
  content:''; position:absolute; top:-7px; left:var(--ux-sp-x,50%); width:14px; height:14px; margin-left:-7px;
  background:#fff; transform:rotate(45deg); border-radius:3px 0 0 0;
}
#ux-scala-pop .ux-sp-tit{ position:relative; margin:0 2px 10px; font-size:15px; font-weight:800; color:#1b5e20; letter-spacing:.2px; }
#ux-scala-pop .ux-sp-opz{ display:flex; gap:6px; }
#ux-scala-pop .ux-sp-o{
  height:42px; padding:0 14px; border-radius:11px; white-space:nowrap;
  background:#f1f5f3; color:#263238; font-size:15px; font-weight:700;
  box-shadow:inset 0 0 0 1.5px #e1e8e4; transition:background-color .12s ease;
}
html.ux-mouse #ux-scala-pop .ux-sp-o:not(:disabled):not(.ux-on):hover{ background:#e2efe6; }
#ux-scala-pop .ux-sp-o.ux-on{ background:#1b5e20; color:#fff; box-shadow:none; }
#ux-scala-pop .ux-sp-o:disabled{ opacity:.38; cursor:not-allowed; }
#ux-scala-pop .ux-sp-o:focus-visible{ outline:2px solid #2e7d32; outline-offset:2px; }
#ux-scala-pop .ux-sp-nota{ margin:10px 2px 0; font-size:13px; font-weight:600; color:#607d8b; }

/* =====================================================================
   NAV — in basso (telefono, tablet verticale)
   ===================================================================== */
html:not(.ux-wide) #app > nav{
  padding: 3px env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  border-top:1px solid #e3e9e6; box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
html:not(.ux-wide) #app > nav button{
  font-size:11px; padding:4px 0 7px; gap:2px; letter-spacing:.1px; color:#5f7480; overflow:hidden;
}
html:not(.ux-wide) #app > nav button .ico{
  display:flex; align-items:center; justify-content:center;
  width:54px; max-width:100%; height:28px; border-radius:14px; font-size:20px;
  transition: background-color .15s ease;
}
html:not(.ux-wide) #app > nav button.on,
html:not(.ux-wide) #app > nav #ux-nav-altro.ux-on{ color:var(--verde); font-weight:700; }
html:not(.ux-wide) #app > nav button.on .ico,
html:not(.ux-wide) #app > nav #ux-nav-altro.ux-on .ico,
html:not(.ux-wide) #app > nav #ux-nav-altro[aria-expanded="true"] .ico{ background:#e3f1e4; }
html:not(.ux-wide) #app > nav button:active .ico{ background:#eef3f1; }
/* telefono in orizzontale: icona e testo affiancati, barra più bassa */
html.ux-phone.ux-landscape #app > nav button{ flex-direction:row; justify-content:center; gap:5px; padding:3px 0 4px; font-size:11.5px; }
html.ux-phone.ux-landscape #app > nav button .ico{ width:auto; height:26px; padding:0 9px; font-size:18px; }

/* voci spostate nel menu "Altro": restano nel DOM (le funzioni dell'app le trovano) ma non si vedono */
#app > nav button.ux-nav-extra{
  position:absolute !important; left:0 !important; top:0 !important;
  width:1px !important; height:1px !important; padding:0 !important; overflow:hidden !important;
  visibility:hidden !important; pointer-events:none !important;
}
#ux-nav-altro[hidden]{ display:none !important; }
#ux-nav-altro .ico svg{ display:block; width:22px; height:22px; }

/* =====================================================================
   NAV — barra verticale a sinistra (computer, tablet orizzontale)
   ===================================================================== */
html.ux-wide #app > nav{
  position:fixed; left:0; top:var(--ux-top,0px); bottom:0;
  width:calc(80px + env(safe-area-inset-left,0px));
  flex-direction:column; align-items:stretch; gap:2px;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);
  background:#fff; border-top:0; border-right:1px solid #e3e9e6;
  box-shadow:2px 0 12px rgba(0,0,0,.05);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin;
  z-index:500;
}
html.ux-wide #app > nav button{
  position:relative; flex:0 0 auto; margin:0 8px; padding:8px 2px 7px; border-radius:14px;
  font-size:10.5px; line-height:1.15; white-space:normal; text-align:center; gap:4px;
  color:#5f7480; transition: background-color .15s ease, color .15s ease;
}
html.ux-wide #app > nav button .ico{ font-size:22px; }
html.ux-mouse.ux-wide #app > nav button:hover{ background:#f1f5f3; color:#37474f; }
html.ux-wide #app > nav button.on{ background:#e3f1e4; color:var(--verde); font-weight:700; }
html.ux-wide #app > nav button.on::before{
  content:''; position:absolute; left:-8px; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--verde);
}
html.ux-wide #app > nav button.ux-nav-extra{
  position:relative !important; width:auto !important; height:auto !important; padding:8px 2px 7px !important;
  visibility:visible !important; pointer-events:auto !important;
}
html.ux-wide #ux-nav-altro{ display:none !important; }
/* --- Computer: barra più larga, icone e scritte più grandi e scure (tablet invariato) --- */
html.ux-desk #app > nav{ width:calc(92px + env(safe-area-inset-left,0px)); gap:4px; padding-top:12px; }
html.ux-desk #app > nav button{
  margin:0 6px; padding:10px 1px 9px; border-radius:16px; gap:6px;
  font-size:12px; font-weight:600; line-height:1.2; color:#3b4f5a; letter-spacing:0;
}
html.ux-desk #app > nav button .ico{ font-size:28px; line-height:1; }
html.ux-desk #app > nav button.on{ font-weight:800; }
html.ux-desk #app > nav button.on::before{ left:-6px; top:14px; bottom:14px; width:4px; }
html.ux-desk #app > nav button.ux-nav-extra{ padding:10px 1px 9px !important; }
html.ux-mouse.ux-desk #app > nav button:not(.on):hover{ background:#eef4f1; color:#1c2b33; }
html.ux-mouse.ux-desk #app > nav button.on:hover{ background:#d9ecdb; color:var(--verde); }
/* finestra bassa (portatile, o scala scelta a mano): ux-layout.js mette il primo livello con cui tutte le voci
   ci stanno. c1 = meno spazio, c2 = icone e scritte un po' più piccole, c3 = solo icone (il nome lo dice la bolla) */
html.ux-desk #app > nav.ux-nav-c1{ gap:2px; padding-top:8px; }
html.ux-desk #app > nav.ux-nav-c1 button{ padding:6px 1px 5px; gap:4px; border-radius:14px; }
html.ux-desk #app > nav.ux-nav-c1 button .ico{ font-size:26px; }
html.ux-desk #app > nav.ux-nav-c1 button.on::before{ top:10px; bottom:10px; }
html.ux-desk #app > nav.ux-nav-c2{ gap:1px; padding-top:6px; padding-bottom:6px; }
html.ux-desk #app > nav.ux-nav-c2 button{ padding:4px 1px 4px; gap:2px; border-radius:12px; font-size:11.5px; line-height:1.15; }
html.ux-desk #app > nav.ux-nav-c2 button .ico{ font-size:23px; }
html.ux-desk #app > nav.ux-nav-c2 button.on::before{ top:8px; bottom:8px; }
html.ux-desk #app > nav.ux-nav-c3{ gap:1px; padding-top:6px; padding-bottom:6px; }
html.ux-desk #app > nav.ux-nav-c3 button{ padding:5px 1px; gap:0; border-radius:12px; font-size:0; line-height:0; }
html.ux-desk #app > nav.ux-nav-c3 button > span:not(.ico){ font-size:0; }
html.ux-desk #app > nav.ux-nav-c3 button .ico{ font-size:25px; line-height:1; }
html.ux-desk #app > nav.ux-nav-c3 button.on::before{ top:7px; bottom:7px; }
/* le viste si spostano a destra della barra */
html.ux-wide #app > .view{ margin-left:var(--ux-rail-w,0px); }
html.ux-wide #app > .view:not(#mapview){ padding-bottom:32px; }
/* elenchi leggibili su schermo largo: contenuto centrato, largo al massimo --ux-vista-max
   (anche Fascicolo e Camera di Commercio: moduli pensati per il telefono, a tutta larghezza su 4K diventavano
   righe lunghissime. Il Quaderno ha una colonna più larga: il Registro è una tabella a 12 colonne e a 920 px
   se ne vedrebbero solo 3) */
html.ux-wide #listview, html.ux-wide #openview, html.ux-wide #logview, html.ux-wide #contview,
html.ux-wide #fascview, html.ux-wide #cciaaview, html.ux-wide #quadernoview{
  --ux-vista-max:920px;
  padding-left: max(18px, calc((100vw / var(--ux-z,1) - var(--ux-rail-w,0px) - var(--ux-vista-max)) / 2));
  padding-right: max(18px, calc((100vw / var(--ux-z,1) - var(--ux-rail-w,0px) - var(--ux-vista-max)) / 2));
}
html.ux-wide #quadernoview{ --ux-vista-max:1600px; }

/* =====================================================================
   MAPPA PIENA
   ===================================================================== */
html.ux-full #app > header,
html.ux-full #app > nav{ display:none !important; }
html.ux-full #app > .view{ margin-left:0; }
#ux-full-exit{
  display:none; position:fixed; z-index:4550;
  top:calc(env(safe-area-inset-top,0px) + 10px); left:calc(env(safe-area-inset-left,0px) + 10px);
  align-items:center; gap:7px; height:36px; padding:0 14px 0 12px; border-radius:999px;
  background:rgba(27,94,32,.94); color:#fff; font-size:13px; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 8px 22px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
html.ux-full #ux-full-exit{ display:inline-flex; }
html.ux-touch #ux-full-exit{ height:40px; }
html.ux-mouse #ux-full-exit:hover{ background:#1b5e20; }
html.ux-full .leaflet-top.leaflet-left{ top:calc(env(safe-area-inset-top,0px) + 48px); }
/* pagine a tutto schermo aperte sopra la mappa piena: la pillola non deve coprirle */
html.meteo-open #ux-full-exit,
html:has(#foto-viewer.on) #ux-full-exit,
html:has(#fasc-view.on) #ux-full-exit{ display:none !important; }

/* =====================================================================
   COLONNA PULSANTI A DESTRA ("lanciatore")
   ===================================================================== */
#barra-dx{
  top:calc(var(--ux-t) + 10px);
  bottom:auto;
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + 8px);
  max-height:calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-b) - 36px);
  gap:6px; padding:5px; border-radius:26px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(10px); backdrop-filter:saturate(1.5) blur(10px);
  box-shadow:0 1px 3px rgba(0,0,0,.16), 0 8px 26px rgba(0,0,0,.14);
  z-index:470;
}
/* dvh dentro @supports: con var() la riga verrebbe accettata anche dove dvh non esiste (e annullerebbe quella in vh) */
@supports (height:100dvh){
  #barra-dx{ max-height:calc(100dvh / var(--ux-z,1) - var(--ux-t) - var(--ux-b) - 36px); }
}
html.ux-full #barra-dx{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  max-height:calc(100vh / var(--ux-z,1) - env(safe-area-inset-top,0px) - var(--ux-b) - 36px);
}
@supports (height:100dvh){
  html.ux-full #barra-dx{ max-height:calc(100dvh / var(--ux-z,1) - env(safe-area-inset-top,0px) - var(--ux-b) - 36px); }
}
/* grandezza del glifo = --ux-gl × --ux-lz (lente al passaggio del mouse, vedi sotto) */
#barra-dx .prox-btn{
  --ux-gl:20px;
  width:var(--ux-dx-btn); height:var(--ux-dx-btn); font-size:calc(var(--ux-gl) * var(--ux-lz,1));
  box-shadow:none; transition: background-color .15s ease, transform .12s ease;
}
html.ux-phone #barra-dx .prox-btn{ --ux-gl:19px; }
html.ux-desk #barra-dx .prox-btn{ --ux-gl:23px; }
#barra-dx .prox-btn svg{ max-width:62%; max-height:62%; }
html.ux-desk #barra-dx .prox-btn svg{ width:64%; height:64%; max-width:none; max-height:none; }
#barra-dx .prox-btn:not(.on){ background:transparent; }
html.ux-mouse #barra-dx .prox-btn:not(.on):hover{ background:#eaf1ed; }
#barra-dx .prox-btn:active{ transform:scale(.9); }
/* html[class] per battere html.ux-phone / html.ux-desk #barra-dx .prox-btn (scritta CAT troppo grande) */
html[class] #barra-dx .prox-btn.cat{ --ux-gl:12px; }
html[class] #barra-dx .prox-btn.f66{ --ux-gl:11px; }
html.ux-desk[class] #barra-dx .prox-btn.cat{ --ux-gl:14px; }
html.ux-desk[class] #barra-dx .prox-btn.f66{ --ux-gl:13px; }
/* barra larga in alto (particelle del fascicolo, punta / metti telecamera) sul telefono verticale e sul tablet
   verticale: copre tutta la larghezza della mappa, la colonna scende sotto di lei (--ux-tb-bar = spazio che occupa
   sotto l'header, misurato da ux-layout.js; classe html.ux-barra-alto quando c'e'). Su schermo largo, in mappa piena
   e sul telefono in orizzontale (basso: la colonna resterebbe senza spazio) la barra si ferma prima della colonna,
   che resta dov'e'. */
html.ux-barra-alto:not(.ux-wide):not(.ux-full):not(.ux-phone.ux-landscape) #barra-dx{
  top:calc(var(--ux-t) + var(--ux-tb-bar,0px) + 10px);
  max-height:calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb-bar,0px) - var(--ux-b) - 36px);
}
@supports (height:100dvh){
  html.ux-barra-alto:not(.ux-wide):not(.ux-full):not(.ux-phone.ux-landscape) #barra-dx{
    max-height:calc(100dvh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb-bar,0px) - var(--ux-b) - 36px);
  }
}
/* scheda catasto del telefono molto alta: la colonna diventerebbe uno scroller minuscolo, la tolgo di mezzo */
html.ux-catsheet-alta #barra-dx{ display:none !important; }
/* pulsanti aggiunti: Mappa piena e Altri pulsanti */
#barra-dx #ux-dx-full, #barra-dx #ux-dx-more{ color:#37474f; position:relative; }
#barra-dx #ux-dx-full.on{ background:#1b5e20; color:#fff; }
#barra-dx #ux-dx-full{ order:-2; }
#barra-dx .ux-dx-sep{ order:-1; flex:0 0 auto; width:60%; height:1px; background:#dfe6e3; margin:0 auto; }
#barra-dx .prox-btn.ux-dx-extra{ order:1; }
#barra-dx #ux-dx-more{ order:2; }
#ux-dx-more[hidden]{ display:none !important; }
/* pallino: c'è un pulsante acceso tra quelli nascosti */
#barra-dx #ux-dx-more.ux-has-on::after{
  content:''; position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%;
  background:#2e7d32; box-shadow:0 0 0 2px #fff;
}
/* chiuso: i pulsanti in più non si vedono */
#barra-dx:not(.ux-dx-open) .prox-btn.ux-dx-extra{ display:none !important; }

/* =====================================================================
   AL PASSAGGIO DEL MOUSE (computer): lente sull'icona + bolla grande con nome e descrizione
   (classi .ux-lente / .ux-lente-v messe da ux-layout.js sul pulsante e sui vicini)
   ===================================================================== */
/* colonna destra: il pulsante non si ingrandisce (la colonna lo taglierebbe), si ingrandisce il glifo */
html.ux-mouse #barra-dx .prox-btn{ transition: background-color .15s ease, transform .12s ease, font-size .14s var(--ux-ease); }
html.ux-mouse #barra-dx .prox-btn svg{ transition: transform .14s var(--ux-ease); }
html.ux-mouse #barra-dx .prox-btn.ux-lente{ --ux-lz:1.3; }
html.ux-mouse #barra-dx .prox-btn.ux-lente-v{ --ux-lz:1.1; }
html.ux-mouse #barra-dx .prox-btn.ux-lente svg{ transform:scale(1.3); }
html.ux-mouse #barra-dx .prox-btn.ux-lente-v svg{ transform:scale(1.1); }
/* barra sinistra: si ingrandisce l'icona (.ico), la scritta resta ferma */
html.ux-mouse.ux-wide #app > nav button .ico{ transition: transform .14s var(--ux-ease); transform-origin:50% 65%; }
html.ux-mouse.ux-wide #app > nav button.ux-lente .ico{ transform:scale(1.3); }
html.ux-mouse.ux-wide #app > nav button.ux-lente-v .ico{ transform:scale(1.1); }

/* bolla: a sinistra dei pulsanti della colonna destra (.ux-tip-dx), a destra della barra sinistra (.ux-tip-sx) */
#ux-tip{
  position:fixed; z-index:4400; pointer-events:none; top:0; left:auto; right:auto;
  display:flex; align-items:center; gap:12px;
  max-width:380px; padding:9px 18px 9px 9px; border-radius:16px;
  background:#263238; color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28), 0 14px 36px rgba(0,0,0,.22);
  opacity:0; visibility:hidden;
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
#ux-tip.ux-tip-dx{ transform:translateX(6px); }
#ux-tip.ux-tip-sx{ transform:translateX(-6px); }
#ux-tip.ux-tip-giu{ transform:translateY(-6px); }      /* sotto il pulsante (header, scheda catasto) */
#ux-tip.on{ opacity:1; visibility:visible; transform:none; transition:opacity .12s ease, transform .12s ease, visibility 0s; }
#ux-tip .ux-tip-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:13px; background:#fff; color:#37474f;
  font-size:34px; line-height:1; overflow:hidden;
}
#ux-tip .ux-tip-ico svg{ width:34px; height:34px; }
#ux-tip .ux-tip-ico.ux-tip-ico-txt{ font-size:18px; font-weight:800; color:#455a64; letter-spacing:.3px; }
#ux-tip .ux-tip-ico.ux-tip-ico-vuota{ display:none; }
#ux-tip .ux-tip-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#ux-tip .ux-tip-nome{ font-size:17px; font-weight:800; line-height:1.2; white-space:nowrap; }
#ux-tip .ux-tip-desc{ font-size:13.5px; font-weight:500; line-height:1.3; color:#d3dde1; }
#ux-tip .ux-tip-desc:empty{ display:none; }
/* freccina verso il pulsante (--ux-tip-y = altezza del centro del pulsante, da JS) */
#ux-tip::after{
  content:''; position:absolute; top:var(--ux-tip-y,50%); width:14px; height:14px; margin-top:-7px;
  background:#263238; transform:rotate(45deg); border-radius:2px;
}
#ux-tip.ux-tip-dx::after{ right:-6px; }
#ux-tip.ux-tip-sx::after{ left:-6px; }
/* bolla sotto il pulsante: freccina in alto (--ux-tip-x = centro del pulsante, da JS) */
#ux-tip.ux-tip-giu::after{ top:-6px; left:var(--ux-tip-x,50%); margin-top:0; margin-left:-7px; }

/* =====================================================================
   PULSANTI "VALVOLA QUI" (solo admin) — sopra la nav, a sinistra della colonna
   ===================================================================== */
html body #fab-add{
  position:fixed;
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 10px);
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 16px);
  bottom:calc(var(--ux-b) + 12px);
  padding:0; gap:8px; z-index:450;
}
#fab-add button{ min-height:44px; transition: transform .12s ease, box-shadow .12s ease; }
#fab-add button:active{ transform:scale(.96); }
html.ux-phone #fab-add button{ padding:10px 13px; font-size:13.5px; gap:5px; min-height:42px; white-space:nowrap; }
html.ux-mouse #fab-add button:hover{ box-shadow:0 6px 18px rgba(0,0,0,.3); }

/* =====================================================================
   BARRE E PANNELLI FLOTTANTI — non si sovrappongono a header, nav, barra sinistra, scheda catasto
   ===================================================================== */
/* barre in alto dell'app: #fascbar (particelle del fascicolo), #campunta (punta telecamera), #campos-bar (metti
   telecamera) e sotto «Mostra: …» (#fascfiltro). Stanno SOTTO l'header (prima a top:10px coprivano Cerca, «Aa»,
   nome ed Esci), fuori dalla tacca e, col mouse, a destra dei +/- della mappa (prima #fascfiltro copriva il «+»).
   Telefono e tablet in verticale: la barra larga occupa tutta la mappa e la colonna destra scende sotto di lei;
   schermo largo, mappa piena e telefono in orizzontale: si ferma prima della colonna. «Mostra:» resta sempre a
   sinistra della colonna.
   Misure da ux-layout.js (px locali, 0 se non ci sono):
     --ux-tb-bar = spazio occupato sotto l'header dalla barra larga (8 px + la sua altezza)
     --ux-tb     = spazio occupato da tutte le barre in alto (anche «Mostra:»): ci scendono sotto le barre centrate,
                   il pannello Livelli, la finestrella e l'avviso "avvicinati" del catasto */
html body #fascbar,
html body #campunta,
html body #campos-bar{
  top:calc(var(--ux-t) + 8px);
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 10px);
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + 10px);
}
html body #fascfiltro{
  top:calc(var(--ux-t) + var(--ux-tb-bar,0px) + 8px);
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 10px);
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 16px);
}
html.ux-wide body #fascbar,
html.ux-wide body #campunta,
html.ux-wide body #campos-bar,
html.ux-full body #fascbar,
html.ux-full body #campunta,
html.ux-full body #campos-bar,
html.ux-phone.ux-landscape body #fascbar,
html.ux-phone.ux-landscape body #campunta,
html.ux-phone.ux-landscape body #campos-bar{
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 16px);
}
/* col mouse in alto a sinistra ci sono i +/- della mappa (38 px + 10 di margine): le barre partono dopo */
html.ux-mouse body #fascbar,
html.ux-mouse body #campunta,
html.ux-mouse body #campos-bar,
html.ux-mouse body #fascfiltro{ left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 56px); }

/* finestra mobile (dettagli somma / cerca): sotto l'header (e sotto le barre in alto), centrata sull'area mappa */
.finestra{
  top:calc(var(--ux-t) + var(--ux-tb,0px) + 10px);
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2);
}
.finestra-body{
  max-height:min(calc(62vh / var(--ux-z,1)), 520px, calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - 90px));
}
@supports (height:100dvh){
  .finestra-body{ max-height:min(calc(62vh / var(--ux-z,1)), 520px, calc(100dvh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - 90px)); }
}

/* barre centrate in alto (sotto le eventuali barre del fascicolo / telecamere) */
#valv-allarme{ top:calc(var(--ux-t) + var(--ux-tb,0px) + 8px); left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2); }
#recente-bar { top:calc(var(--ux-t) + var(--ux-tb,0px) + 10px); left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2); }
#wb-bar      { top:calc(var(--ux-t) + var(--ux-tb,0px) + 54px); left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2); }

/* pannello livelli: in alto a sinistra, accanto ai +/- (se ci sono) */
#livelli-panel{
  top:calc(var(--ux-t) + var(--ux-tb,0px) + 10px);
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 12px);
  max-height:calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - 24px);
  border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,.16), 0 10px 30px rgba(0,0,0,.16);
}
@supports (height:100dvh){
  #livelli-panel{ max-height:calc(100dvh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - 24px); }
}
html.ux-mouse #livelli-panel{ left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 56px); width:230px; }
html.ux-touch #livelli-panel label{ min-height:40px; }

/* barre in basso, impilate sopra i pulsanti "Valvola qui" */
.toast{
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 14px);
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2);
  max-width:min(calc(90vw / var(--ux-z,1)), 520px);
}
/* barra Annulla / Conferma in basso («Tocca mappa», «Valvola qui (GPS)», disegno zona): il toast sale sopra di lei
   invece di coprirne i pulsanti (--ux-pb-h = sua altezza, da ux-layout.js; la barra sta a --ux-b + 10px) */
html.ux-barra-conferma .toast{ bottom:calc(var(--ux-b) + var(--ux-pb-h,0px) + 20px); }
html body #place-bar,
html body #zona-bar{
  bottom:calc(var(--ux-b) + 10px);
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px));
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px));
}
html.ux-wide body #place-bar,
html.ux-wide body #zona-bar{ max-width:600px; margin:0 auto; }
/* telefono in orizzontale: la colonna dei pulsanti arriva quasi in fondo -> la barra Annulla/Conferma
   ("Tocca mappa", zona) le resta a sinistra invece di coprire gli ultimi pulsanti (⋯) */
html.ux-phone.ux-landscape body #place-bar,
html.ux-phone.ux-landscape body #zona-bar{
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 14px);
}
html body #fascsomma{
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 12px);
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2);
}
html body #catsomma{
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 60px);
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2);
}
html body #carbbar{
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 108px);
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2);
}
#umidita-legend{
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 12px);
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 12px);
}
#cat-opacity{
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 12px);
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 106px);
}
#f66-opacity{
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 12px);
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 166px);
  max-height:max(160px, min(calc(72vh / var(--ux-z,1)), 540px, calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-b) - var(--ux-fab-h) - 186px)));
}
/* pillola CAT di ux-catasto visibile (sta in fondo a sinistra, sopra i "Valvola qui"): le legende salgono sopra di lei */
html:has(#cat-opacity.on) #umidita-legend{ bottom:calc(var(--ux-b) + var(--ux-fab-h) + 64px); }
html:has(#cat-opacity.on) #f66-opacity{
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 220px);
  max-height:max(140px, min(calc(72vh / var(--ux-z,1)), 540px, calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-b) - var(--ux-fab-h) - 240px)));
}
/* controlli radar pioggia/vento (creati dall'app via JS): seguono barra sinistra e scheda catasto */
html body #meteo-ctl{
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 12px);
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 12px);
}
html:has(#cat-opacity.on) body #meteo-ctl{ bottom:calc(var(--ux-b) + var(--ux-fab-h) + 64px); }
/* scheda aereo (creata dall'app): non sopra la barra sinistra ne' sotto il pannello catasto */
html body #aer-card{
  left:var(--ux-rail-w,0px);
  right:var(--ux-panel-w,0px);
  bottom:calc(var(--ux-b) + 12px);
}
/* pillola "carico le tue particelle" (stile scritto dall'app, sta DENTRO #map): sopra il pannello CAT
   (--ux-co-h = sua altezza + 8, da ux-catasto.js; 0 se non c'e'). Base uguale a #cat-opacity, ma contata dal
   fondo della mappa (che sul telefono finisce sopra la nav: --ux-b - --ux-bottom) */
html body #cat-mie-prog{ bottom:calc(var(--ux-b) - var(--ux-bottom,0px) + var(--ux-fab-h) + 12px + var(--ux-co-h,0px)) !important; }

/* =====================================================================
   FINESTRA GENERICA (#modal) — NON quella del catasto (.ux-dock)
   ===================================================================== */
/* telefono / tablet verticale: resta un foglio dal basso, con maniglia */
html:not(.ux-wide) #modal-bg:not(.ux-dock) > #modal::before{
  content:''; display:block; width:38px; height:4px; border-radius:2px;
  background:#d5dcd9; margin:-12px auto 14px;
}
/* computer / tablet orizzontale: finestra centrata */
html.ux-wide #modal-bg:not(.ux-dock){ align-items:center; padding:24px; }
html.ux-wide #modal-bg:not(.ux-dock) > #modal{
  max-width:560px; max-height:calc(85vh / var(--ux-z,1)); border-radius:18px;
  padding:24px 24px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  animation:none;
}

/* =====================================================================
   CONTROLLI LEAFLET
   ===================================================================== */
/* dita: niente +/- (si usa il pizzico), attribuzione discreta */
html.ux-touch .leaflet-control-zoom{ display:none; }
html.ux-touch .leaflet-container .leaflet-control-attribution{
  font-size:9px; line-height:1.5; padding:0 5px; margin:0;
  background:rgba(255,255,255,.5); color:#455a64; opacity:.8;
  max-width:calc(55vw / var(--ux-z,1)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-radius:6px 0 0 0;
}
html.ux-touch .leaflet-container .leaflet-control-attribution a{ color:#37474f; }
/* mouse: +/- compatti */
html.ux-mouse .leaflet-bar.leaflet-control-zoom{
  border:0; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12);
}
html.ux-mouse .leaflet-bar.leaflet-control-zoom a{
  width:32px; height:32px; line-height:32px; font-size:18px; color:#37474f; border-bottom-color:#eceff1;
}
html.ux-mouse .leaflet-bar.leaflet-control-zoom a:hover{ background:#eaf1ed; }
/* computer: +/- più grandi */
html.ux-mouse.ux-desk .leaflet-bar.leaflet-control-zoom a{ width:38px; height:38px; line-height:38px; font-size:22px; }
html.ux-mouse .leaflet-container .leaflet-control-attribution{ font-size:10px; background:rgba(255,255,255,.7); border-radius:6px 0 0 0; }
/* i controlli in basso / a destra seguono la scheda e il pannello catasto */
.leaflet-bottom{ bottom:var(--ux-sheet-h,0px); }
.leaflet-bottom.leaflet-right{ right:var(--ux-panel-w,0px); }
/* mappa grande: fuori dalla tacca (orizzontale) e, se arriva in fondo allo schermo (mappa piena, barra a
   sinistra), fuori dalla barra Home dell'iPhone (con la scheda aperta copre lei la zona sicura: basta la sua altezza) */
#map .leaflet-bottom.leaflet-right{ right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px)); }
html.ux-full #map .leaflet-bottom,
html.ux-wide #map .leaflet-bottom{ bottom:max(var(--ux-sheet-h,0px), env(safe-area-inset-bottom,0px)); }
.leaflet-top.leaflet-right{ right:calc(var(--ux-panel-w,0px) + var(--ux-dx-w) + 14px); }

/* =====================================================================
   FOGLIO "ALTRO" (voci della nav che non ci stanno)
   ===================================================================== */
#ux-altro{ position:fixed; inset:0; z-index:4500; display:none; }
#ux-altro.on{ display:block; }
#ux-altro .ux-altro-bg{ position:absolute; inset:0; background:rgba(16,28,22,.42); }
#ux-altro .ux-altro-sheet{
  position:absolute; left:0; right:0; bottom:0; margin:0 auto; max-width:520px;
  background:#fff; border-radius:22px 22px 0 0;
  padding:8px calc(14px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));
  max-height:calc(82vh / var(--ux-z,1)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  box-shadow:0 -10px 40px rgba(0,0,0,.22);
}
#ux-altro .ux-altro-grip{ width:38px; height:4px; border-radius:2px; background:#d5dcd9; margin:4px auto 10px; }
#ux-altro .ux-altro-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 10px;
  font-size:12.5px; font-weight:800; color:#607d8b; text-transform:uppercase; letter-spacing:.5px;
}
#ux-altro .ux-altro-x{ width:40px; height:40px; border-radius:12px; background:#eef2f1; color:#546e7a; font-size:15px; font-weight:800; }
#ux-altro .ux-altro-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#ux-altro .ux-altro-row{
  display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 12px; border-radius:15px;
  background:#f3f6f5; color:#263238; font-size:15px; font-weight:700; text-align:left;
  transition: background-color .12s ease, transform .12s ease;
}
#ux-altro .ux-altro-row:active{ transform:scale(.97); background:#e8efeb; }
html.ux-mouse #ux-altro .ux-altro-row:hover{ background:#e9f1ec; }
#ux-altro .ux-altro-row .ux-ai{ font-size:23px; width:30px; text-align:center; flex:0 0 auto; line-height:1; }
#ux-altro .ux-altro-row .ux-at{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ux-altro .ux-altro-row.ux-on{ background:#e3f1e4; color:var(--verde); box-shadow:inset 0 0 0 1.5px #a5d6a7; }
#ux-altro .ux-altro-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin:14px 4px 2px; padding-top:10px; border-top:1px solid #eef1f0;
  font-size:12.5px; color:#78909c; font-weight:600;
}
#ux-altro .ux-altro-foot .ux-altro-ver{ background:#eef3f1; color:#1b5e20; border-radius:10px; padding:2px 8px; font-weight:800; font-size:11.5px; }
#ux-altro .ux-altro-foot .ux-altro-ver:empty{ display:none; }
@media (max-width:340px){ #ux-altro .ux-altro-list{ grid-template-columns:1fr; } }

/* =====================================================================
   AVVISO «NUOVA VERSIONE PRONTA» (ux-layout.js, sezione V) — si ricarica solo toccandolo
   Sotto l'header e le barre in alto. z-index 990: sopra mappa, colonna e pillole della mappa, SOTTO accesso (1000),
   codice email (1100), sblocco col volto (1200), caricamento (3000), finestre e toast: anche se la pagina torna in
   vista un attimo prima che compaia lo sblocco, l'avviso non gli sta sopra (ux-layout.js lo nasconde comunque).
   Schermo largo: centrato sull'area della mappa. Telefono / tablet verticale: a sinistra (a destra c'e' la colonna).
   ===================================================================== */
#ux-agg{
  position:fixed; z-index:990; display:none; align-items:center; gap:2px; padding:3px;
  top:calc(var(--ux-t) + var(--ux-tb,0px) + 10px);
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 10px);
  max-width:calc(100vw / var(--ux-z,1) - var(--ux-rail-w,0px) - var(--ux-panel-w,0px) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--ux-dx-w) - 36px);
  border-radius:999px; background:#1b5e20; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 8px 22px rgba(0,0,0,.22);
}
html.ux-mouse:not(.ux-wide) #ux-agg{ left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 56px); }   /* dopo i +/- */
html.ux-wide #ux-agg{
  left:calc(50% + (var(--ux-rail-w,0px) - var(--ux-panel-w,0px)) / 2); transform:translateX(-50%);
  max-width:calc(100vw / var(--ux-z,1) - var(--ux-rail-w,0px) - var(--ux-panel-w,0px) - 2 * var(--ux-dx-w) - 48px);
}
#ux-agg.on{ display:flex; }
#ux-agg .ux-agg-si{
  display:inline-flex; align-items:center; gap:7px; min-width:0; min-height:36px; margin:0; padding:0 4px 0 11px;
  border:0; border-radius:999px; background:transparent; color:#fff; font:inherit; font-size:13.5px; font-weight:700;
  white-space:nowrap; cursor:pointer;
}
#ux-agg .ux-agg-ico{ font-size:16px; line-height:1; }
#ux-agg .ux-agg-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
#ux-agg .ux-agg-az{ flex:0 0 auto; padding:5px 12px; border-radius:999px; background:#fff; color:#1b5e20; font-weight:800; }
#ux-agg .ux-agg-x{
  flex:0 0 auto; width:34px; height:34px; margin:0; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:14px; font-weight:800; cursor:pointer;
}
html.ux-touch #ux-agg .ux-agg-si{ min-height:40px; }
html.ux-touch #ux-agg .ux-agg-x{ width:40px; height:40px; }
html.ux-mouse #ux-agg .ux-agg-si:hover .ux-agg-az{ background:#e8f5e9; }
html.ux-mouse #ux-agg .ux-agg-x:hover{ background:rgba(255,255,255,.28); }
html.ux-mouse #ux-agg button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#ux-agg.ux-agg-carica{ opacity:.7; pointer-events:none; }
@media (max-width:420px){ #ux-agg .ux-agg-lunga{ display:none; } }
/* non sopra le altre pillole in alto (allarme valvole, foto recente, avviso catasto, barra satellite) */
html:has(#valv-allarme.on) #ux-agg,
html:has(#recente-bar.on) #ux-agg,
html:has(#ux-cat-zoom.on) #ux-agg{ top:calc(var(--ux-t) + var(--ux-tb,0px) + 58px); }
html:has(#wb-bar.on) #ux-agg{ top:calc(var(--ux-t) + var(--ux-tb,0px) + 104px); }
html:has(#valv-allarme.on):has(#ux-cat-zoom.on) #ux-agg{ top:calc(var(--ux-t) + var(--ux-tb,0px) + 110px); }
@media (prefers-reduced-motion: no-preference){ #ux-agg.on{ animation:uxFade .2s ease both; } }

/* =====================================================================
   FOCUS da tastiera (computer)
   ===================================================================== */
html.ux-mouse #app > nav button:focus-visible,
html.ux-mouse #barra-dx .prox-btn:focus-visible,
html.ux-mouse #ux-altro button:focus-visible,
html.ux-mouse #ux-full-exit:focus-visible{ outline:2px solid #2e7d32; outline-offset:2px; }

/* =====================================================================
   MOVIMENTO: solo se l'utente non l'ha ridotto
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  #barra-dx.ux-dx-open .prox-btn.ux-dx-extra{ animation:uxPop .16s var(--ux-ease) both; }
  #ux-altro.on .ux-altro-bg{ animation:uxFade .16s ease both; }
  #ux-altro.on .ux-altro-sheet{ animation:uxSu .18s var(--ux-ease) both; }
  html.ux-wide #modal-bg.on:not(.ux-dock) > #modal{ animation:uxDialog .16s var(--ux-ease) both; }
  #modal-bg.on:not(.ux-dock){ animation:uxFade .15s ease both; }
  html.ux-full #ux-full-exit{ animation:uxFade .18s ease both; }
}
@media (prefers-reduced-motion: reduce){
  #ux-tip, #ux-tip.on, #barra-dx .prox-btn, #barra-dx .prox-btn svg, #fab-add button, #app > nav button, #app > nav button .ico,
  #ux-scala-pop .ux-sp-o{ transition:none !important; }
  #modal{ animation:none !important; }
}