/* Carburante - COMPLETAMENTI della UX finale (1/11/2026, costruttore A): pagina "Dove sono", pagina /app/ e popup dell'app.
   SOLO variabili e classi di identita.css (stessi colori, stessi caratteri, stessi raggi e ombre): nessun font, nessun colore
   nuovo. Le trasparenze usano i valori RGB gia' presenti in identita.css (inchiostro 34,23,26). */

/* ---------------------------------------------------------------- DOVE SONO (/dove-sono/)
   Mappa a schermo: tutta l'area utile tra la testata e la barra fissa (telefono) o il fondo della finestra (computer).
   L'altezza esatta la scrive static/dove.js; qui c'e' la stima per il primo disegno (niente salti visibili). */
.dove-sono [hidden] { display: none !important; }
.dove-sono .contenuto { max-width: none; padding: 0; }
.dove { display: flex; flex-direction: column; }
.dove .riga-dove { margin: 0; padding: var(--s-2) var(--s-4); min-height: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); }
.dove .riga-dove .riga-dati { color: var(--tenue); }
.dove .mappa-nota { margin: 0; padding: 0 var(--s-4) var(--s-2); font-weight: 600; color: var(--inchiostro); }
.dove .mappa-blocco { margin: 0; --strumenti-h: 52px; }
.dove .mappa { height: calc(100vh - 13rem); height: calc(100svh - 13rem); min-height: 240px; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.dove .mappa-strumenti { border-radius: 0; border-left: 0; border-right: 0; padding: 0 var(--s-3); gap: var(--s-3); }
.dove .mappa[aria-busy="true"] .leaflet-tile-pane { opacity: .55; transition: opacity var(--d-media); }
/* "La tua posizione": la goccia del sito con un alone della tinta identita', piu' grande del centro di un CAP */
.dove .mappa .pin-centro.io { width: 28px; height: 28px; box-shadow: 0 0 0 6px var(--rosso-tinta), 0 1px 3px rgba(34, 23, 26, .35); }
.dove .mappa .pin-centro-icona { overflow: visible; }
.dove-rimando { margin: 0; padding: var(--s-6) var(--s-4); display: flex; justify-content: center; }
.dove-rimando .bottone { width: 100%; max-width: 24rem; min-height: 56px; font-size: var(--t-medio); font-weight: 800; box-shadow: var(--ombra-forte); }
@media (min-width: 48rem) {
  .dove .riga-dove { padding: var(--s-2) var(--s-5); }
  .dove .mappa-strumenti { padding: 0 var(--s-5); }
}

/* ---------------------------------------------------------------- L'APP: modulo (pagina /app/ e popup), punto 7C */
.riquadro-app { max-width: 30rem; margin-left: auto; margin-right: auto; }
.titolo-app { margin: 0 0 var(--s-2); color: var(--rosso-scuro); }
.testo-app { margin: 0 0 var(--s-4); font-size: var(--t-medio); color: var(--inchiostro); }
.modulo-app { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; position: relative; }
.campo-app { width: 100%; min-height: var(--tocco); font: 600 var(--t-medio) var(--f-testo); padding: 0 var(--s-3); border: 2px solid var(--linea-forte); border-radius: var(--r-medio); background: var(--bianco); color: var(--inchiostro); }
.campo-app:focus { border-color: var(--rosso-scuro); outline: 3px solid var(--rosso-tinta); }
.campo-app[aria-invalid="true"] { border-color: var(--errore); }
.campo-app::placeholder { color: var(--tenue); font-weight: 400; }
.consenso-app { display: flex; align-items: center; flex-wrap: wrap; min-height: var(--tocco); font-size: var(--t-base); }
.consenso-app input { width: 24px; height: 24px; margin: 0 var(--s-2) 0 0; accent-color: var(--rosso-scuro); flex: 0 0 auto; }
.consenso-app input[aria-invalid="true"] { outline: 3px solid var(--errore); outline-offset: 2px; }
.consenso-app label { display: inline-flex; align-items: center; min-height: var(--tocco); cursor: pointer; }
.consenso-app a { display: inline-flex; align-items: center; min-height: var(--tocco); }
.invio-app { width: 100%; min-height: 52px; font-weight: 800; font-size: var(--t-medio); }
.esito-app { margin: 0; min-height: 1.5em; font-size: var(--t-base); }
.esito-app[data-esito="invio"] { color: var(--tenue); }
.modulo-app[aria-busy="true"] .invio-app { cursor: progress; }
.trappola { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- popup dell'app: riquadro sopra la pagina, X grande */
.popup-app { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: var(--s-3); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); background: rgba(34, 23, 26, .45); animation: entra var(--d-media) ease-out both; }
.finestra-app { position: relative; width: 100%; max-width: 30rem; max-height: calc(100% - var(--s-3)); overflow: auto; background: var(--bianco); border-radius: var(--r-grande); box-shadow: var(--ombra-forte); padding: var(--s-5) var(--s-4) var(--s-4); animation: sale var(--d-media) ease-out both; }
.finestra-app:focus { outline: none; }
.finestra-app .titolo-app { padding-right: 3.5rem; font-size: var(--t-grande); }
.chiudi-app { position: absolute; top: var(--s-2); right: var(--s-2); width: 48px; height: 48px; border-radius: var(--r-pillola); border: 2px solid var(--linea-forte); background: var(--bianco); color: var(--inchiostro); font: 700 1.75rem/1 var(--f-testo); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; touch-action: manipulation; }
.chiudi-app:hover { background: var(--rosso-tinta); color: var(--rosso-scuro); }
html.popup-app-aperto, html.popup-app-aperto body { overflow: hidden; }
@media (min-width: 48rem) { .popup-app { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .popup-app, .finestra-app { animation: none; } }
@media print { .popup-app { display: none; } }