/* =====================================================================
   ux-catasto.css — anteprima UX del CATASTO
   - scheda particella agganciata (pannello a destra / scheda dal basso)
   - pannello "selezione multipla" con i dati delle particelle
   - pillola CAT richiudibile, avviso zoom, anteprima al passaggio del mouse
   Usa le variabili di ux-layout: --ux-top, --ux-bottom, --ux-rail-w
   e imposta (da JS) --ux-panel-w e --ux-sheet-h.
   ===================================================================== */

:root{
  --ux-cat-verde:#1b5e20;
  --ux-cat-verde2:#2e7d32;
  --ux-cat-bordo:#e3ebe5;
  --ux-cat-ombra:0 12px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05);
  /* bordo alto "sicuro" (se ux-layout non c'e' uso un valore di riserva) */
  /* --ux-t (di ux-layout) tiene conto anche della pillola "Esci da mappa piena" */
  --ux-cat-top:var(--ux-t, max(var(--ux-top, calc(50px + env(safe-area-inset-top, 0px))), env(safe-area-inset-top, 0px)));
}

@keyframes ux-in-r{ from{ transform:translateX(28px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes ux-in-b{ from{ transform:translateY(40px); opacity:.2; } to{ transform:none; opacity:1; } }
@keyframes ux-lampo{ 0%{ background:#fff59d; } 100%{ background:#fff; } }
@keyframes ux-pop{ 0%{ transform:translateX(-50%) translateY(-8px); opacity:0; } 100%{ transform:translateX(-50%); opacity:1; } }

/* ---------------------------------------------------------------------
   A) SCHEDA PARTICELLA AGGANCIATA (#modal-bg.ux-dock)
   --------------------------------------------------------------------- */
#modal-bg.ux-dock{
  background:transparent !important;
  pointer-events:none;              /* la mappa sotto resta toccabile */
}
/* chiamata al portale (a pagamento) in corso: la mappa torna bloccata come col vecchio modal,
   cosi' la risposta non finisce nella scheda di un'altra particella */
#modal-bg.ux-dock.ux-dock-busy{
  pointer-events:auto;
  background:rgba(0,0,0,.12) !important;
  cursor:progress;
}
/* barre della somma fascicolo e dei carburanti: con la scheda agganciata restano visibili
   (la regola dell'app le nasconde quando #modal-bg ha 'on') */
#modal-bg.ux-dock.on ~ #fascsomma.on{ display:inline-flex !important; }
body:not(.mappa-pulita) #modal-bg.ux-dock.on ~ #carbbar.on{ display:inline-flex !important; }
/* scheda aperta dall'elenco (ℹ️): "Non era questa?" agirebbe sulla selezione, lo nascondo */
#modal.ux-info-multi [data-cat-vicina],
#modal.ux-info-multi div:has(> [data-cat-vicina]){ display:none !important; }
#modal-bg.ux-dock > #modal{
  pointer-events:auto;
  position:fixed;
  margin:0;
  max-width:none;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  box-shadow:var(--ux-cat-ombra);
  padding:0 16px 16px;
}
/* --- in largo (computer, iPad orizzontale): pannello a destra --- */
#modal-bg.ux-dock.ux-dock-wide > #modal{
  top:calc(var(--ux-cat-top) + 8px);
  right:calc(8px + env(safe-area-inset-right, 0px));
  left:auto;
  bottom:auto;
  width:380px;
  height:auto;
  max-height:calc(100vh / var(--ux-z, 1) - var(--ux-cat-top) - max(var(--ux-bottom, 0px), env(safe-area-inset-bottom, 0px)) - 16px);
  border-radius:14px;
  animation:ux-in-r .22s ease-out;
}
/* dvh dentro @supports: con var() la riga verrebbe accettata anche dove dvh non esiste (e annullerebbe quella in vh) */
@supports (height:100dvh){
  #modal-bg.ux-dock.ux-dock-wide > #modal{
    max-height:calc(100dvh / var(--ux-z, 1) - var(--ux-cat-top) - max(var(--ux-bottom, 0px), env(safe-area-inset-bottom, 0px)) - 16px);
  }
}
#modal-bg.ux-dock.ux-dock-wide.ux-dock-tab > #modal{ width:340px; }

/* --- stretto (telefono, iPad verticale): scheda dal basso "a sbirciata" --- */
#modal-bg.ux-dock.ux-dock-sheet > #modal{
  left:0;
  right:0;
  top:auto;
  bottom:var(--ux-bottom, calc(56px + env(safe-area-inset-bottom, 0px)));
  width:auto;
  max-height:none;
  border-radius:18px 18px 0 0;
  padding:0 calc(14px + env(safe-area-inset-right, 0px)) calc(14px + max(0px, env(safe-area-inset-bottom, 0px) - var(--ux-bottom, 0px))) calc(14px + env(safe-area-inset-left, 0px));
  box-shadow:0 -8px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  animation:ux-in-b .24s ease-out;
  transition:height .22s cubic-bezier(.2,.8,.2,1);
}
#modal-bg.ux-dock.ux-dock-sheet.ux-drag > #modal{ transition:none; }

/* intestazione compatta fissa in alto (inserita da JS) */
.ux-dock-head,
.ux-cm-head{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--ux-cat-bordo);
}
.ux-dock-head{
  margin:0 -16px 10px;
  padding:10px 10px 10px 16px;
}
#modal-bg.ux-dock-sheet .ux-dock-head{
  margin:0 calc(-14px - env(safe-area-inset-right, 0px)) 10px calc(-14px - env(safe-area-inset-left, 0px));
  padding:18px calc(10px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));
  touch-action:none;                /* si trascina con il dito */
  cursor:grab;
}
.ux-grip{
  display:none;
  position:absolute;
  top:6px;
  left:50%;
  width:42px;
  height:5px;
  margin-left:-21px;
  border-radius:3px;
  background:#c5d0cb;
}
#modal-bg.ux-dock-sheet .ux-grip,
#ux-cat-multi.ux-sheet .ux-grip{ display:block; }
.ux-dh-tit{ flex:1; min-width:0; }
.ux-dh-t1{
  font-weight:800;
  font-size:17px;
  line-height:1.2;
  color:var(--ux-cat-verde);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ux-dh-t2{
  font-size:12.5px;
  color:#607d8b;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ux-hbtn{
  flex:none;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:#eef4ef;
  color:var(--ux-cat-verde);
  font-size:15px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
}
.ux-hbtn:hover{ background:#e0ece2; }
.ux-hbtn.ux-x{ background:#eceff1; color:#37474f; font-size:16px; }
.ux-hbtn.ux-elenco{ background:#fff3e0; color:#bf360c; font-size:13px; }
#modal-bg.ux-dock-wide .ux-only-sheet,
#ux-cat-multi.ux-wide .ux-only-sheet{ display:none; }

/* il titolo originale e' gia' nell'intestazione: nascondo l'h3 doppio */
#modal-bg.ux-dock > #modal > .ux-dock-head + h3{ display:none; }

/* contenuto piu' compatto */
#modal-bg.ux-dock > #modal .stato-attuale{
  padding:10px 12px;
  margin-bottom:10px;
  font-size:13.5px;
  line-height:1.5;
  border-radius:12px;
}
#modal-bg.ux-dock > #modal .btn{
  padding:10px 10px;
  font-size:14px;
  border-radius:11px;
}

/* pulsanti azione in griglia a 2 colonne (solo nella scheda particella) */
#modal-bg.ux-dock > #modal.ux-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:8px;
  row-gap:0;
  align-content:start;
}
#modal-bg.ux-dock > #modal.ux-grid > *{ grid-column:1 / -1; min-width:0; }
#modal-bg.ux-dock > #modal.ux-grid > button.btn{
  grid-column:auto;
  width:100% !important;
  margin:0 0 8px !important;
  padding:9px 8px !important;
  font-size:13.5px !important;
  line-height:1.2;
  min-height:44px;
  border-radius:11px;
}
#modal-bg.ux-dock > #modal.ux-grid > #cat-lotto-btn,
#modal-bg.ux-dock > #modal.ux-grid > button.btn.btn-annulla:last-child{ grid-column:1 / -1; }
#modal-bg.ux-dock > #modal.ux-grid > button.btn.btn-annulla:last-child{ min-height:42px; }
@media (max-width:339px){
  #modal-bg.ux-dock > #modal.ux-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   B) PANNELLO SELEZIONE MULTIPLA (#ux-cat-multi)
   --------------------------------------------------------------------- */
html.ux-catsel #catsomma{ display:none !important; }   /* la vecchia pillola e' sostituita dal pannello */

#ux-cat-multi{
  position:fixed;
  z-index:1500;
  display:none;
  flex-direction:column;
  background:#fff;
  box-shadow:var(--ux-cat-ombra);
  overflow:hidden;
  box-sizing:border-box;
  font-size:14px;
  color:#263238;
}
#ux-cat-multi.on{ display:flex; }
/* quando sopra c'e' la scheda di una particella, il pannello resta dietro */
html.ux-catdock #ux-cat-multi{ visibility:hidden; }

#ux-cat-multi.ux-wide{
  top:calc(var(--ux-cat-top) + 8px);
  right:calc(8px + env(safe-area-inset-right, 0px));
  width:380px;
  max-height:calc(100vh / var(--ux-z, 1) - var(--ux-cat-top) - max(var(--ux-bottom, 0px), env(safe-area-inset-bottom, 0px)) - 16px);
  border-radius:14px;
  animation:ux-in-r .22s ease-out;
}
@supports (height:100dvh){
  #ux-cat-multi.ux-wide{
    max-height:calc(100dvh / var(--ux-z, 1) - var(--ux-cat-top) - max(var(--ux-bottom, 0px), env(safe-area-inset-bottom, 0px)) - 16px);
  }
}
#ux-cat-multi.ux-wide.ux-tab{ width:340px; }
#ux-cat-multi.ux-sheet{
  left:0;
  right:0;
  bottom:var(--ux-bottom, calc(56px + env(safe-area-inset-bottom, 0px)));
  border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  animation:ux-in-b .24s ease-out;
  transition:height .22s cubic-bezier(.2,.8,.2,1);
}
#ux-cat-multi.ux-sheet.ux-drag{ transition:none; }

.ux-cm-head{
  position:relative;
  flex:none;
  padding:12px 10px 10px 16px;
}
#ux-cat-multi.ux-sheet .ux-cm-head{
  padding:18px calc(10px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
  touch-action:none;
  cursor:grab;
}
.ux-cm-badge{
  display:inline-block;
  min-width:22px;
  padding:1px 7px;
  margin-left:4px;
  border-radius:999px;
  background:var(--ux-cat-verde);
  color:#fff;
  font-size:12.5px;
  text-align:center;
  vertical-align:2px;
}
.ux-cm-fine{
  flex:none;
  height:36px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:var(--ux-cat-verde);
  color:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  font-family:inherit;
}
.ux-cm-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:10px calc(14px + env(safe-area-inset-right, 0px)) calc(14px + max(0px, env(safe-area-inset-bottom, 0px) - var(--ux-bottom, 0px))) calc(14px + env(safe-area-inset-left, 0px));
}
#ux-cat-multi.ux-wide .ux-cm-body{ padding:10px 14px 14px; }
.ux-cm-vuoto{
  text-align:center;
  color:#546e7a;
  padding:14px 8px 10px;
  line-height:1.45;
}
.ux-cm-vuoto .ux-cm-ico{ font-size:30px; display:block; margin-bottom:6px; }
.ux-cm-vuoto b{ color:var(--ux-cat-verde); }
.ux-cm-tot{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-bottom:10px;
}
.ux-cm-tot > div{
  background:linear-gradient(180deg, #f1f8f2, #e6f2e8);
  border:1px solid #d5e8d8;
  border-radius:12px;
  padding:8px 6px;
  text-align:center;
}
.ux-cm-tot b{ display:block; font-size:19px; color:var(--ux-cat-verde); line-height:1.15; font-variant-numeric:tabular-nums; }
.ux-cm-tot span{ font-size:11.5px; color:#607d8b; }
.ux-cm-azioni{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:10px;
}
.ux-cm-azioni button{
  min-height:38px;
  border:0;
  border-radius:10px;
  background:#eceff1;
  color:#37474f;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
  padding:6px 8px;
}
.ux-cm-azioni button:hover{ background:#e0e6e9; }
.ux-cm-azioni button.ux-cm-lotto{ background:var(--ux-cat-verde); color:#fff; }
.ux-cm-azioni button.ux-cm-lotto.ux-cm-sec{ background:#e8f5e9; color:var(--ux-cat-verde); }
.ux-cm-azioni button.ux-cm-svuota{ color:#c62828; }
.ux-cm-azioni button[disabled]{ opacity:.45; cursor:default; }
.ux-cm-lista{ border-top:1px solid #eceff1; }
.ux-cm-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 0;
  border-bottom:1px solid #eceff1;
  background:#fff;
}
.ux-cm-row.ux-cm-nuova{ animation:ux-lampo 1.2s ease-out; }
.ux-cm-row.ux-cm-hl{ background:#f1f8e9; }
.ux-cm-main{
  flex:1;
  min-width:0;
  text-align:left;
  background:none;
  border:0;
  padding:2px 0;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
}
.ux-cm-p{ display:block; font-weight:800; font-size:14.5px; color:#263238; }
.ux-cm-sub,
.ux-cm-own{
  display:block;
  font-size:12px;
  color:#78909c;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ux-cm-own{ color:#6a1b9a; }
.ux-cm-own.ux-mio{ color:var(--ux-cat-verde2); font-weight:700; }
.ux-cm-area{ flex:none; text-align:right; font-variant-numeric:tabular-nums; }
.ux-cm-area b{ display:block; font-size:13.5px; }
.ux-cm-area small{ display:block; font-size:11px; color:#90a4ae; }
.ux-cm-az{ flex:none; display:flex; gap:2px; }
.ux-cm-az button{
  width:32px;
  height:32px;
  border:0;
  border-radius:9px;
  background:transparent;
  font-size:15px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.ux-cm-az button:hover{ background:#eceff1; }
.ux-cm-az button.ux-cm-togli{ color:#c62828; font-weight:800; }
.ux-cm-nota{ font-size:12px; color:#90a4ae; margin-top:10px; line-height:1.4; }
.ux-cm-nota kbd{
  display:inline-block;
  padding:0 5px;
  border:1px solid #cfd8dc;
  border-bottom-width:2px;
  border-radius:5px;
  background:#fafafa;
  font-family:inherit;
  font-size:11px;
  line-height:1.5;
  color:#455a64;
}
#ux-cat-multi.ux-mini .ux-cm-body{ visibility:hidden; }
/* telefono / tablet verticale (foglio dal basso): a meta' altezza devono vedersi le particelle.
   I totali sono gia' nell'intestazione (numero + "ha · tumoli") -> niente riquadri; le azioni stanno su
   una riga sola che scorre di lato. Sul computer resta tutto com'era. */
#ux-cat-multi.ux-sheet .ux-cm-tot{ display:none; }
#ux-cat-multi.ux-sheet .ux-cm-azioni{
  display:flex;
  gap:6px;
  margin-bottom:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#ux-cat-multi.ux-sheet .ux-cm-azioni::-webkit-scrollbar{ display:none; }
#ux-cat-multi.ux-sheet .ux-cm-azioni button{ flex:0 0 auto; white-space:nowrap; padding:6px 12px; }
/* ℹ️ in corso: pannello "in attesa" (i clic mostrano solo un avviso) */
#ux-cat-multi.ux-cm-attesa{ cursor:progress; }
#ux-cat-multi.ux-cm-attesa .ux-cm-body{ opacity:.55; }

/* rettangolo di selezione (Maiusc + trascina, solo computer) */
.ux-cat-box{
  position:absolute;
  z-index:800;
  border:2px dashed var(--ux-cat-verde);
  background:rgba(46,125,50,.14);
  pointer-events:none;
  border-radius:3px;
}
html.ux-catsel .leaflet-container.ux-shift{ cursor:crosshair; }
/* con la scala attiva il rettangolo sta in px dello schermo (dentro #map): bordo in proporzione */
html.ux-zoom .ux-cat-box{
  border-width:calc(2px * var(--ux-z, 1));
  border-radius:calc(3px * var(--ux-z, 1));
}

/* ---------------------------------------------------------------------
   C) PANNELLO CAT (#cat-opacity) -> pillola richiudibile
   --------------------------------------------------------------------- */
#cat-opacity{
  left:calc(var(--ux-rail-w, 0px) + 12px + env(safe-area-inset-left, 0px));
  /* --ux-b (di ux-layout) = max(nav, tacca) + scheda catasto; --ux-fab-h = spazio dei pulsanti "Valvola qui" */
  bottom:calc(var(--ux-b, calc(var(--ux-bottom, calc(56px + env(safe-area-inset-bottom, 0px))) + var(--ux-sheet-h, 0px))) + var(--ux-fab-h, 0px) + 12px);
  width:auto;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:14px;
  z-index:470;
  transition:bottom .22s ease;
}
#cat-opacity .ux-co-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:40px;
  padding:0 14px 0 12px;
  border:0;
  border-radius:999px;
  background:var(--ux-cat-verde);
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
#cat-opacity .ux-co-pct{
  background:rgba(255,255,255,.2);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
#cat-opacity .ux-co-car{ display:inline-block; transition:transform .2s; font-size:12px; }
#cat-opacity .ux-co-sel{
  display:none;
  background:#ff6f00;
  color:#fff;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
}
html.ux-catsel #cat-opacity .ux-co-sel{ display:inline-block; }
#cat-opacity .ux-co-body{ display:none; }
#cat-opacity.ux-co-aperto{
  width:220px;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  overflow:auto;
  max-height:calc(100vh / var(--ux-z, 1) - var(--ux-cat-top) - var(--ux-b, calc(var(--ux-bottom, 56px) + var(--ux-sheet-h, 0px))) - var(--ux-fab-h, 0px) - 30px);
}
@supports (height:100dvh){
  #cat-opacity.ux-co-aperto{
    max-height:calc(100dvh / var(--ux-z, 1) - var(--ux-cat-top) - var(--ux-b, calc(var(--ux-bottom, 56px) + var(--ux-sheet-h, 0px))) - var(--ux-fab-h, 0px) - 30px);
  }
}
#cat-opacity.ux-co-aperto .ux-co-pill{
  display:flex;
  width:100%;
  border-radius:14px 14px 0 0;
  box-shadow:none;
  position:sticky;
  top:0;
  z-index:1;
}
#cat-opacity.ux-co-aperto .ux-co-lab{ flex:1; text-align:left; }
#cat-opacity.ux-co-aperto .ux-co-car{ transform:rotate(180deg); }
#cat-opacity.ux-co-aperto .ux-co-body{ display:block; padding:10px 12px 12px; }
#cat-opacity .ux-co-body button{ border-radius:10px !important; }
#cat-opacity .ux-co-body button:hover{ filter:brightness(1.08); }
/* scheda del telefono molto alta: la pillola si toglie di mezzo */
html.ux-catsheet-alta #cat-opacity{ display:none !important; }
@media (pointer:coarse){
  #cat-opacity.ux-co-aperto .ux-co-body button{ min-height:40px; }
  #cat-opacity .ux-co-pill{ height:42px; }
}

/* ---------------------------------------------------------------------
   D) AVVISO ZOOM (#ux-cat-zoom)
   --------------------------------------------------------------------- */
#ux-cat-zoom{
  position:fixed;
  z-index:1450;
  /* --ux-tb (di ux-layout) = barre del fascicolo / telecamere aperte sotto l'header: l'avviso scende sotto di loro */
  top:calc(var(--ux-cat-top) + var(--ux-tb, 0px) + 10px);
  left:calc(var(--ux-rail-w, 0px) + (100vw / var(--ux-z, 1) - var(--ux-rail-w, 0px) - var(--ux-panel-w, 0px)) / 2);
  transform:translateX(-50%);
  display:none;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:calc(100vw / var(--ux-z, 1) - var(--ux-rail-w, 0px) - var(--ux-panel-w, 0px) - 120px);
  box-sizing:border-box;
  padding:6px 6px 6px 14px;
  border-radius:999px;
  background:rgba(27,94,32,.95);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
#ux-cat-zoom.on{ display:flex; animation:ux-pop .25s ease-out; }
/* non coprire le barre in alto dell'app (foto recente, allarme valvole, barra satellite) */
html:has(#recente-bar.on) #ux-cat-zoom,
html:has(#valv-allarme.on) #ux-cat-zoom{ top:calc(var(--ux-cat-top) + var(--ux-tb, 0px) + 62px); }
html:has(#wb-bar.on) #ux-cat-zoom{ top:calc(var(--ux-cat-top) + var(--ux-tb, 0px) + 108px); }
/* telefono / tablet verticale: col pannello "livelli" aperto l'avviso ne coprirebbe la ✕ */
html:not(.ux-wide):has(#livelli-panel.on) #ux-cat-zoom{ display:none !important; }
/* niente avviso sopra sblocco / login (l'app e' nascosta): classe messa da ux-catasto.js guardando #app
   (non piu' body:has(#app[style*="none"]), che faceva ricalcolare lo stile di tutta la pagina trascinando la mappa) */
html.ux-app-nascosta #ux-cat-zoom,
html.ux-app-nascosta #ux-cat-multi{ display:none !important; }
#ux-cat-zoom button{
  flex:none;
  min-height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:var(--ux-cat-verde);
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
  font-family:inherit;
}
@media (pointer:coarse){ #ux-cat-zoom button{ min-height:40px; } }

/* ---------------------------------------------------------------------
   E) ANTEPRIMA AL PASSAGGIO DEL MOUSE (#ux-cat-hover)
   --------------------------------------------------------------------- */
#ux-cat-hover{
  position:fixed;
  z-index:1480;
  left:0;
  top:0;
  display:none;
  max-width:280px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(33,33,33,.92);
  color:#fff;
  font-size:12.5px;
  line-height:1.4;
  pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
#ux-cat-hover.on{ display:block; }
#ux-cat-hover b{ color:#c8e6c9; }
#ux-cat-hover .ux-h-c{ color:#b0bec5; font-size:11.5px; }
#ux-cat-hover .ux-h-o{ color:#e1bee7; }
#ux-cat-hover .ux-h-m{ color:#a5d6a7; font-weight:700; }
#ux-cat-hover .ux-h-s{ color:#ffcc80; font-weight:700; }

/* ---------------------------------------------------------------------
   F) ETICHETTE che non si accavallano
   --------------------------------------------------------------------- */
.leaflet-container.ux-tips-ridotte .leaflet-tooltip.cat-tip,
.leaflet-container .leaflet-tooltip.cat-tip.ux-tip-coperta{
  opacity:0 !important;
  transition:opacity .15s;
}
.leaflet-container .leaflet-tooltip.cat-tip.ux-tip-on{
  opacity:1 !important;
  z-index:5;
}
.cat-nome-lab span.ux-tip-coperta{ opacity:0; }
.leaflet-container.ux-zoom-basso .cat-nome-lab span{
  font-size:10px;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:top;
}
/* scala dell'interfaccia (html.ux-zoom): la mappa e' 1:1 con lo schermo, quindi numeri e nomi resterebbero
   minuscoli. Li ingrandisco con font-size/padding (NON con zoom: Leaflet centra il numero misurandone
   offsetWidth e lo sposta con transform, che lo zoom moltiplicherebbe). Al cambio di scala ux-catasto.js li ricentra. */
html.ux-zoom .leaflet-container .leaflet-tooltip.cat-tip{
  font-size:calc(12px * var(--ux-z, 1));
  padding:calc(1px * var(--ux-z, 1)) calc(6px * var(--ux-z, 1));
  border-radius:calc(8px * var(--ux-z, 1));
}
html.ux-zoom .cat-nome-lab span{
  font-size:calc(11px * var(--ux-z, 1));
  padding:calc(1px * var(--ux-z, 1)) calc(6px * var(--ux-z, 1));
  border-radius:calc(8px * var(--ux-z, 1));
}
html.ux-zoom .leaflet-container.ux-zoom-basso .cat-nome-lab span{
  font-size:calc(10px * var(--ux-z, 1));
  max-width:calc(130px * var(--ux-z, 1));
}

/* ---------------------------------------------------------------------
   Computer (anche a scala 100%): pulsanti-icona e anteprima un po' piu' grandi (richiesta di Marco:
   "le icone mi servono piu' grandi"). Larghezza dei pannelli invariata: con lo schermo grande
   e' gia' la scala dell'interfaccia a ingrandire tutto.
   --------------------------------------------------------------------- */
html.ux-desk .ux-hbtn{ min-width:40px; height:40px; font-size:17px; }
html.ux-desk .ux-hbtn.ux-x{ font-size:18px; }
html.ux-desk .ux-hbtn.ux-elenco{ font-size:14px; }
html.ux-desk .ux-cm-fine{ height:40px; font-size:15px; }
html.ux-desk .ux-cm-az button{ width:36px; height:36px; font-size:18px; }
html.ux-desk #ux-cat-hover{ max-width:320px; padding:8px 12px; font-size:13.5px; }
html.ux-desk #ux-cat-hover .ux-h-c{ font-size:12.5px; }
html.ux-desk #cat-opacity .ux-co-pill{ height:42px; font-size:15px; }

/* ---------------------------------------------------------------------
   Bersagli touch piu' grandi
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  .ux-hbtn{ min-width:40px; height:40px; }
  .ux-cm-fine{ height:40px; }
  .ux-cm-az button{ width:40px; height:40px; }
  .ux-cm-azioni button{ min-height:42px; }
  #modal-bg.ux-dock > #modal .btn{ min-height:42px; }
}

/* ---------------------------------------------------------------------
   Movimento ridotto
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #modal-bg.ux-dock > #modal,
  #ux-cat-multi,
  #ux-cat-zoom.on,
  .ux-cm-row.ux-cm-nuova,
  #cat-opacity,
  #cat-opacity .ux-co-car{
    animation:none !important;
    transition:none !important;
  }
}

/* stampa: niente pannelli flottanti */
@media print{
  #ux-cat-multi, #ux-cat-zoom, #ux-cat-hover{ display:none !important; }
}