/* La mappa vera del sito, per «Immobili» e per la scheda di un annuncio (mappa-immobili.js; piano della pagina pubblica,
   compito 12). Senza JavaScript il contenitore non occupa spazio: l'elenco e il testo bastano. */
.mappa-vera { display: none; }
.js .mappa-vera { display: block; width: 100%; height: 100%; min-height: 440px; background: var(--morbido); }
.hero-disegno.mappa-immobili { display: flex; flex-direction: column; gap: 10px; }
.js .hero-disegno.mappa-immobili .mappa-vera { flex: 1; }
/* Lo stile di tutte le mappe del sito (scelto da Salvo il 25 ottobre, «Proposta B»): la tinta sul solo riquadro delle
   tessere, mai su controlli, etichette e attribuzioni (brightness prima di contrast: al contrario i grigi chiari diventano
   bianchi); il fondo --morbido mentre le tessere arrivano; il segnaposto Pavé, una goccia 34×44 con l'ancora in basso al
   centro, con il numero dell'elenco o il cerchio interno */
.leaflet-container { font-family: var(--sans); background: var(--morbido); }
.leaflet-container .leaflet-tile-pane { filter: grayscale(.6) sepia(.22) brightness(.84) contrast(1.4); }
.segnaposto-mappa { position: relative; }
.segnaposto-mappa svg { display: block; width: 34px; height: 44px; }
.segnaposto-mappa span { position: absolute; left: 0; top: 4px; width: 34px; height: 24px; display: flex; align-items: center; justify-content: center;
  color: var(--superficie); font: 600 14px/1 var(--sans); }
.leaflet-tooltip.etichetta-mappa { background: var(--inchiostro); color: var(--superficie); border: 0; border-radius: 4px; box-shadow: none;
  font: 600 13px/1.2 var(--sans); padding: 5px 9px; }
.leaflet-tooltip-top.etichetta-mappa::before { border-top-color: var(--inchiostro); }
/* i gruppi di «Immobili» negli stessi colori dei segnaposto */
.leaflet-container .marker-cluster { background: #39312e40; }
.leaflet-container .marker-cluster div { background: var(--inchiostro); color: var(--superficie); font: 600 13px var(--sans); }
.leaflet-container .leaflet-control-attribution { font-size: 12px; background: #fffffff2; }
.leaflet-container .leaflet-control-attribution a { color: var(--inchiostro); text-decoration: underline; }
@media (max-width: 760px) { .js .mappa-vera { min-height: 320px; } }
/* I Contatti: il riquadro con l'indirizzo resta finché la mappa non è pronta (senza JavaScript, o se non si carica, resta lui),
   la mappa gli si mette sopra; sotto, «Indicazioni stradali» */
figure.figura-mappa { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.mappa-contatti { position: relative; min-height: 360px; border-radius: 4px; overflow: hidden; background: var(--morbido); }
.mappa-riquadro { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: var(--inchiostro); font-size: 17px; line-height: 1.5; }
.js .mappa-contatti .mappa-vera { position: absolute; inset: 0; min-height: 0; visibility: hidden; }
.js .mappa-contatti .mappa-vera.mappa-pronta { visibility: visible; }
.mappa-indicazioni { margin-top: 12px; text-align: right; }
.mappa-indicazioni .solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .mappa-contatti { min-height: 300px; } }
/* Immobili, i filtri (passo 5): venduti e affittati con la goccia chiara e il numero scuro; il fumetto con la parola dello stato */
.segnaposto-concluso span { color: var(--inchiostro); }
.fumetto-mappa { font-family: var(--sans); }
.fumetto-mappa .fumetto-stato { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 4px; background: var(--inchiostro); color: var(--superficie); font: 600 12px/1.4 var(--sans); }
.fumetto-mappa .fumetto-stato.fumetto-concluso { background: var(--superficie); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--linea); }
.fumetto-mappa a { display: block; color: var(--inchiostro); font: 600 15px/1.35 var(--sans); }
/* I gesti di tutte le mappe (richiesta di Salvo del 26 ottobre): sul touch un dito scorre la pagina (Leaflet di suo prende
   tutti i tocchi, touch-action: none), due dita muovono e ingrandiscono la mappa; il velo che lo dice, per un attimo */
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom.mappa-gesti { touch-action: pan-x pan-y; }
.velo-mappa { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  background: #39312eb3; color: var(--superficie); font: 600 16px/1.35 var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.velo-mappa.visibile { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .velo-mappa { transition: none; } }