/* Telefono (18/10): sotto i 721 px la mappa prende tutto lo schermo tra una testata di una riga e una barra in basso con quattro
   voci (Mappa · Livelli · Settori · Altro, telefono.js). Comandi dei settori, scheda dell'elemento, legenda, menu dei livelli e
   elenchi della barra si aprono in un foglio che sale dal basso: stessa posizione per tutti, altezza in --foglio-h (tre scatti,
   trascinabile dalla maniglia). Caricato per ultimo: batte le disposizioni per telefono dei fogli precedenti. Sopra i 720 px
   non cambia nulla. */
#barra-telefono, #foglio-maniglia { display: none; }

@media (max-width: 720px) {
  body.comunale { --testa: 56px !important; --titolo-h: 0px !important; --rail-w: 0px !important; --sx: 0px !important; --dx: 0px !important;
    --fondo: 0px !important; --barra: 60px; --foglio-h: 0px; --foglio-vis: 0px; }

  /* testata in una riga: simbolo, ricerca, account */
  #intestazione { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  #intestazione .marchio > span { display: none; }
  #intestazione .marchio > svg { width: 30px; height: 30px; }
  #intestazione .cerca { order: 0; flex: 1 1 auto; width: auto; margin: 0; }
  #intestazione input { padding-top: 9px; padding-bottom: 9px; font-size: 16px; }   /* 16 px: iOS non ingrandisce la pagina */
  #intestazione .cerca > svg { top: 10px; }
  #richiamo-dimostrazione { flex: none; padding: 3px 8px; font-size: 11px; }
  #apri-account > span:not(.icona-account), #apri-account .chevron { display: none !important; }
  .icona-account { width: 34px; height: 34px; }
  /* titolo e data della colonna: il settore aperto ha il suo titolo nel foglio, la data è il primo pulsante sopra la mappa */
  .comunale #testa-vista { display: none; }

  /* mappa a tutto schermo */
  .comunale #vista-home, .comunale.mappa-ampliata #vista-home { position: fixed; top: var(--testa); left: 0; right: 0; bottom: var(--barra);
    border: 0; border-radius: 0; background: #1b2430; }
  .comunale #map, .comunale:not(.pannello-chiuso) #map, .comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #map { inset: 0 !important; border-radius: 0; }
  body.comunale.fm-aperto #vista-home { z-index: 48; }

  /* comandi sopra la mappa: data, 2D/3D e i filtri accesi in una riga che scorre; il menu dei livelli è nella barra */
  .comunale #azioni-mappa, body.comunale:not(.pannello-chiuso) #azioni-mappa, body.comunale:is(.sc-aperto, .pv-aperto, .ro-aperto) #azioni-mappa {
    inset: 8px 8px auto; min-height: 0; padding: 0; flex-wrap: wrap; justify-content: flex-start; gap: 6px; background: none; border: 0; pointer-events: none; }
  .comunale #azioni-mappa > * { pointer-events: auto; }
  .comunale #azioni-mappa h2, .comunale #azioni-mappa .dimensione-mappa { display: none !important; }
  /* «Filtri» in testa alla riga (18/10: sul telefono non si trovavano); la scritta lunga del pulsante diventa «Filtri» */
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) { height: 34px; padding: 0 10px; gap: 5px; border: 0; border-radius: 17px; background: #1767d3; color: #fff;
    box-shadow: 0 1px 6px rgba(16, 32, 60, .22); font-size: 0; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli)::after { content: "Filtri"; order: 1; font: 650 13px system-ui; }
  .comunale #azioni-mappa #apri-livelli::after { content: "Livelli"; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-n { order: 2; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-n:not(:empty) { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #1767d3;
    font: 650 11px/18px system-ui; text-align: center; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli) .fm-giu { display: none; }
  .comunale #azioni-mappa :is(#apri-filtri, #apri-livelli)[aria-expanded=true] { background: #0c4fa8; color: #fff; }
  .comunale #azioni-mappa #data-cambia { order: 1; }
  .comunale #azioni-mappa .modo-vista { order: 2; flex: none; display: flex; background: #fff; border-radius: 17px; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); overflow: hidden; }
  /* il riquadro dei filtri si scioglie: «Filtri» apre la riga, i filtri accesi vanno in una seconda riga che scorre di lato */
  body.comunale #azioni-mappa .azioni-rapide.filtri-mappa { display: contents; }
  .comunale #azioni-mappa .fm { order: 0; pointer-events: auto; }
  .comunale #azioni-mappa .fm-accesi { order: 3; flex: 1 0 100%; pointer-events: auto; }
  .comunale #azioni-mappa .fm-accesi:empty { display: none; }
  .comunale #azioni-mappa :is(#data-cambia, .modo-vista button) { height: 34px; padding: 0 12px; font-size: 13px; }
  .comunale #azioni-mappa #data-cambia { border: 0; border-radius: 17px; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); }
  .comunale #azioni-mappa #data-cambia span { font-size: 13px; font-weight: 600; color: inherit; }
  .comunale #azioni-mappa .modo-vista button { border-radius: 0; }
  .comunale .fm-accesi { padding: 2px; scrollbar-width: none; }
  .comunale .fm-acceso { height: 30px; box-sizing: border-box; box-shadow: 0 1px 6px rgba(16, 32, 60, .2); }
  .comunale #azioni-mappa .fm-acceso span { font-size: 12px; color: inherit; }

  /* menu «Livelli e filtri»: un foglio sopra la barra */
  .comunale .fm-menu { position: fixed; top: auto; left: 0; right: 0; bottom: var(--barra); width: auto; max-height: 68vh; overflow-y: auto; padding: 10px 10px 14px;
    border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(16, 32, 60, .18); }
  .comunale #azioni-mappa .fm-menu button { min-height: 44px; font-size: 15px; }

  /* controlli della mappa: resta la bussola; zoom e rotazione con le dita, le misure da computer */
  .comunale .maplibregl-ctrl-top-right { top: 48px; }
  body.comunale:has(.fm-accesi:not(:empty)) .maplibregl-ctrl-top-right { top: 88px; }
  .comunale :is(.controllo-misure, .controllo-vista, .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-zoom-out) { display: none !important; }
  .comunale .maplibregl-ctrl-group:has(> .maplibregl-ctrl-compass:only-of-type) { border-radius: 50%; }
  .comunale :is(.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { bottom: var(--foglio-vis); transition: bottom .22s ease; }

  /* barra in basso */
  #barra-telefono { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--barra); display: flex; box-sizing: border-box;
    padding: 0 4px env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); }
  #barra-telefono button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0;
    background: none; color: #4a6185; font: 500 11px system-ui; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #barra-telefono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  #barra-telefono button[aria-current] { color: #0c5fc8; font-weight: 650; }
  #barra-telefono button[aria-current] svg { stroke-width: 2.1; }
  #barra-telefono button.in-attesa svg { animation: tel-attesa 1s ease-in-out infinite alternate; }
  @keyframes tel-attesa { from { opacity: 1; } to { opacity: .3; } }

  /* fogli: stessa posizione per tutti, sopra la barra; l'ordine di sovrapposizione decide quale si vede */
  body.comunale :is(#scheda, .sc-scheda, .pv-pannello, .ro-pannello, #pannello, .procedura:not(.procedura-ridotta)),
  body.comunale[data-tel-menu] #viste, body.comunale #legende:not(.lg-chiuso) {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: var(--barra) !important; width: auto !important;
    max-width: none !important; height: var(--foglio-h) !important; max-height: none !important; margin: 0 !important; box-sizing: border-box;
    border: 0 !important; border-radius: 0 !important; box-shadow: 0 -2px 18px rgba(16, 32, 60, .14) !important; transform: none !important;
    transition: height .22s ease; }
  body.tel-trascina :is(#scheda, .sc-scheda, .pv-pannello, .ro-pannello, #pannello, .procedura, #viste, #legende, #foglio-maniglia) { transition: none !important; }
  body.comunale #pannello { z-index: 41 !important; }
  body.comunale :is(.sc-scheda, .pv-pannello) { z-index: 42 !important; }
  body.comunale :is(.ro-pannello, .procedura:not(.procedura-ridotta)) { z-index: 43 !important; }
  body.comunale #viste { z-index: 45 !important; }
  body.comunale #scheda { z-index: 46 !important; }
  body.comunale #legende:not(.lg-chiuso) { z-index: 47 !important; }
  body.comunale #scheda:not([hidden]) { display: flex; }
  body.comunale .procedura:not(.procedura-ridotta) { overflow-y: auto; }

  /* maniglia sopra il foglio in vista: tocco = altezza successiva, trascinata = altezza libera che si ferma allo scatto più vicino */
  #foglio-maniglia { position: fixed; z-index: 49; left: 0; right: 0; bottom: calc(var(--barra) + var(--foglio-h)); height: 24px; display: flex;
    background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 14px rgba(16, 32, 60, .12); transition: bottom .22s ease; }
  #foglio-maniglia[hidden] { display: none; }
  #foglio-maniglia .fg-presa { flex: 1; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  #foglio-maniglia .fg-presa span { width: 40px; height: 5px; border-radius: 3px; background: #c4d0e0; }
  #foglio-maniglia .fg-chiudi { position: absolute; right: 6px; top: 0; width: 40px; height: 24px; padding: 0; border: 0; background: none; color: #627694; font-size: 15px; cursor: pointer; }

  /* elenchi della barra: Settori e Altro, con i pulsanti della colonna */
  .comunale #viste, .comunale.mappa-ampliata #viste { display: none !important; }
  body.comunale[data-tel-menu] #viste { display: flex !important; flex-direction: column; gap: 2px; padding: 8px 10px 14px; overflow-y: auto; background: #fff; }
  body[data-tel-menu=settori] #viste :is(.viste-principali, .viste-servizio) { display: none; }
  body[data-tel-menu=altro] #viste .uf-navigazione, body[data-tel-menu=altro] #viste #tab-home { display: none; }
  body.comunale[data-tel-menu] #viste .viste-principali { flex: none; }
  body.comunale[data-tel-menu] #viste .viste-servizio { margin: 0; padding: 0; border: 0; }
  body.comunale[data-tel-menu] #viste .uf-navigazione > p { margin: 4px 8px 6px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
  body.comunale[data-tel-menu] #viste :is(button, #vai-validazione) { flex-direction: row; justify-content: flex-start; min-height: 50px; padding: 8px 10px; gap: 14px;
    border-radius: 8px; font-size: 15px; text-align: left; box-shadow: none; }
  body.comunale[data-tel-menu] #viste :is(button, #vai-validazione) svg { width: 22px; height: 22px; }
  body.comunale[data-tel-menu] #viste .uf-sigla { width: 30px; height: 30px; font-size: 11px; }
  body.comunale[data-tel-menu] #viste button[aria-current] { background: #e5f0ff; color: #075fc9; }

  /* legenda: chiusa è un'etichetta in basso a sinistra sopra il foglio; aperta è un foglio */
  #legende.lg-chiuso, .comunale #legende.lg-chiuso { top: auto; left: 10px; right: auto; bottom: calc(var(--barra) + var(--foglio-vis) + 34px); width: 124px;
    max-height: none; transition: bottom .22s ease; }
  body.comunale #legende:not(.lg-chiuso) { background: #fff; }
  body.comunale #legende:not(.lg-chiuso) .lg-corpo { flex: 1; min-height: 0; padding: 0 14px 14px; font-size: 13px; }
  body.comunale #legende:not(.lg-chiuso) .lg-testa { padding: 12px 14px; font-size: 15px; }
  body.comunale.fm-aperto #legende, body.comunale[data-tel-menu] #legende.lg-chiuso { display: none; }

  /* cose appoggiate alla mappa: la linea del tempo sotto i comandi, le sintesi sopra il foglio */
  body.comunale:has(.fm-accesi:not(:empty)) :is(.sc-tempo, .mc-espansa .sc-tempo) { --sotto-comandi: 90px; }
  .comunale .sc-tempo, .comunale.mc-espansa .sc-tempo, .aq-aperto .sc-tempo { top: calc(var(--testa) + var(--sotto-comandi, 50px)) !important; bottom: auto !important; left: 8px !important;
    right: 8px !important; max-width: none; margin: 0; z-index: 20; }
  .mc-sintesi, .mc-espansa .mc-sintesi { left: 10px; right: 10px; bottom: calc(var(--barra) + var(--foglio-vis) + 52px); max-width: none; }
  .comunale .barra-editor { left: 8px; right: 8px; bottom: calc(var(--barra) + var(--foglio-vis) + 8px); }

  /* Validazione (validazione.html): la mappa del rilievo riempie il riquadro; sotto la testata una riga con rilievo e avanzamento
     («0 di 119 esaminati»); restano «Inquadra tutto il rilievo» e le misure sulla nuvola, che sono parte del lavoro */
  body.comunale.val { --riga-val: 30px; }
  body.comunale.val #testa-vista { display: flex; position: fixed; z-index: 39; top: var(--testa); left: 0; right: 0; height: var(--riga-val); box-sizing: border-box;
    padding: 0 12px; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
  body.comunale.val #testa-vista :is(h1, .col-pulsante) { display: none; }
  body.comunale.val #data-riga { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; }
  body.comunale.val #data-riga #val-rilievo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.comunale.val #data-riga :is(.origine-dato, #avanzamento .barra) { display: none; }
  body.comunale.val #vista-home { top: calc(var(--testa) + var(--riga-val)); }
  body.comunale.val .val-cartografia { inset: 0; border-radius: 0; }
  body.comunale.val #azioni-mappa .dimensione-mappa:has(#val-estensione) { display: flex !important; flex: none; order: 2; }
  body.comunale.val #azioni-mappa #val-estensione { width: 34px; height: 34px; border: 0; border-radius: 50%; box-shadow: 0 1px 6px rgba(16, 32, 60, .22); }
  body.comunale.val #azioni-mappa .modo-vista { order: 1; }
  body.comunale.val .controllo-misure { display: block !important; }
  body.comunale.val .val-sopra-mappa { top: auto; bottom: calc(var(--foglio-vis) + 8px); }
}