/* =====================================================================
   ux-indietro.css — da ogni schermata si torna sempre alla mappa (pulsante visibile, tasto Indietro, gesto).
   Va con ux-indietro.js (classi uxi-*). Caricato dopo ux-layout, ux-catasto e ux-scala-app.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) BARRE DELLA MAPPA NELLE ALTRE SEZIONI
   Stanno fuori da #app: cambiando sezione restavano sopra l'elenco (Valvole, Contatori...).
   html.uxi-fuori-mappa (da ux-indietro.js) = la sezione attiva non e' la mappa: le nascondo.
   Non chiudo niente: tornando sulla mappa ricompaiono e la modalita' continua.
   I :not(#uxi-z) alzano la precedenza sopra le regole di ux-catasto.css (scheda agganciata + pillole).
   --------------------------------------------------------------------- */
html.uxi-fuori-mappa body #app ~ :is(#finestra, #place-bar, #zona-bar, #campunta, #campos-bar, #vel-bar,
  #fascbar, #fascfiltro, #fascsomma, #catsomma, #carbbar):not(#uxi-z):not(#uxi-z){
  display:none !important;
}

/* ---------------------------------------------------------------------
   2) FINESTRA GENERICA (#modal) piu' alta dello schermo: il suo «Chiudi / Indietro» sta in fondo e si vede
   solo scorrendo. ux-indietro.js mette allora in cima una riga ALTA ZERO (.uxi-x-cima) che resta ferma in alto
   mentre si scorre (sticky), con un ✕ tondo nell'angolo in alto a destra: non sposta niente e non copre i
   pulsanti in fondo. Dove la finestra ci sta, il ✕ non viene messo.
   --------------------------------------------------------------------- */
html body #modal-bg:not(.ux-dock) > #modal > .uxi-x-cima{
  position:sticky; top:0; height:0; z-index:5; margin:0; padding:0;
}
html body #modal > .uxi-x-cima > .uxi-x{
  position:absolute; top:-12px; right:-12px;
  width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:rgba(236,239,241,.96); color:#455a64; font-size:18px; font-weight:800; line-height:40px; text-align:center;
  cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.22);
}
html body #modal > .uxi-x-cima > .uxi-x:hover{ background:#dfe5e8; }
html.ux-touch body #modal > .uxi-x-cima > .uxi-x::after{
  content:''; position:absolute; left:50%; top:50%; width:48px; height:48px; transform:translate(-50%, -50%);
}
/* righe aggiunte (Chiudi di riserva, Eventi allarme): i pulsanti in fila come le altre .btn-row dell'app */
html body #modal .uxi-riga > .btn{ width:auto !important; margin-top:0 !important; }
html body #modal .uxi-riga{ margin-top:8px; }

/* ---------------------------------------------------------------------
   3) FOTO INGRANDITA: ✕ visibile in alto a destra (sotto la barra di stato dell'iPhone)
   --------------------------------------------------------------------- */
#foto-viewer .uxi-foto-x{
  position:absolute; z-index:2;
  top:calc(env(safe-area-inset-top, 0px) + 10px); right:calc(env(safe-area-inset-right, 0px) + 10px);
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.2); color:#fff; font-size:22px; font-weight:700; line-height:44px; text-align:center;
  cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.4);
}
#foto-viewer .uxi-foto-x:hover{ background:rgba(255,255,255,.32); }

/* ---------------------------------------------------------------------
   4) DOCUMENTO DEL FASCICOLO: la testata (✕, Salva) sotto la barra di stato dell'iPhone
   («html body» perche' lo stile dell'app sta piu' in basso nella pagina)
   --------------------------------------------------------------------- */
html body #fasc-view .vh{
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  padding-left:calc(12px + env(safe-area-inset-left, 0px));
  padding-right:calc(12px + env(safe-area-inset-right, 0px));
}

/* ---------------------------------------------------------------------
   5) POSIZIONA TELECAMERE: griglia delle inquadrature schiacciata a 2 px (righe "auto" + riquadri con
   overflow:hidden dentro un foglio che scorre). Ogni riga alta quanto la sua inquadratura.
   --------------------------------------------------------------------- */
html body #campos-grid{ grid-auto-rows:max-content; }

/* ---------------------------------------------------------------------
   6) ✕ PICCOLI PER IL DITO (solo schermi touch: sul computer col mouse restano come sono)
   - i due sotto i 30 px diventano un po' piu' grandi;
   - tutti ricevono un margine di tocco invisibile di 48×48 px (Apple consiglia 44) senza spostare niente.
   --------------------------------------------------------------------- */
html.ux-touch #livelli-panel .lp-x{ width:32px; height:32px; font-size:15px; }
html.ux-touch #meteo-ctl .mt .x{ min-width:34px; min-height:32px; }
html.ux-touch #campos .cx{ width:40px; height:40px; }
html.ux-touch #fasc-view .vh > button:last-of-type{ min-width:44px; min-height:40px; }
html.ux-touch #livelli-panel .lp-x,
html.ux-touch #meteo-ctl .mt .x,
html.ux-touch .finestra-x,
html.ux-touch #campos .cx,
html.ux-touch #meteo-det .mt-x{ position:relative; }
html.ux-touch #livelli-panel .lp-x::after,
html.ux-touch #meteo-ctl .mt .x::after,
html.ux-touch .finestra-x::after,
html.ux-touch #campos .cx::after,
html.ux-touch #meteo-det .mt-x::after,
html.ux-touch #aer-card .ac-x::after,
html.ux-touch #map .leaflet-popup-close-button::after{
  content:''; position:absolute; left:50%; top:50%; width:48px; height:48px;
  transform:translate(-50%, -50%); background:transparent;
}