@charset "UTF-8";
/* mappe-dati.css 1.2 - CRS/OGS, 05/11/2026 (CRS-Docs: mappe_dati_2026-11-05; 1.1: pubblicazione_accessibilita_fase2_2026-11-05). Le mappe delle tabelle eventi, nelle pagine di /DATI/ e dei siti. */

/* I contenitori delle pagine di /DATI/ hanno larghezza fissa in un attributo style dei Mac: sotto quella larghezza si restringono. */
#map, #RSCLmap { max-width: 100%; }

.mappa-dati {
  width: 100%;
  max-width: 700px;
  height: 500px;
  margin: 0 auto 1rem;
  border: 1px solid #5a6772;
}
@media (max-width: 575.98px) {
  .mappa-dati { height: 380px; }
}

/* il fuoco da tastiera sulla mappa e sui simboli */
.leaflet-container:focus-visible,
.leaflet-marker-icon:focus-visible,
.leaflet-interactive:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}
/* 2.4.7 (G195-2.4.7 e F78-2.4.7): le regole :focus di leaflet.css per questi collegamenti non dichiarano un outline: qui si dichiara. */
.leaflet-bar a:focus,
.leaflet-control-attribution a:focus,
.leaflet-container a.leaflet-popup-close-button:focus { outline: 3px solid #000; outline-offset: 2px; }
/* 2.4.7: sui percorsi SVG l'ombra di Bootstrap Italia non si disegna e il suo outline trasparente ha !important: qui si vince con !important e si cambia anche il tratto, per i motori che non disegnano l'outline sugli SVG. */
path.leaflet-interactive:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; stroke: #000; stroke-width: 6px; }
/* il testo del fumetto riceve il fuoco all'apertura (mappe-dati.js, F85) */
.leaflet-popup-content:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* i collegamenti dell'attribuzione: contrasto AA anche sopra la mappa */
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  color: #1a1a1a;
  font-size: 0.75rem;
}
.leaflet-container .leaflet-control-attribution a {
  color: #004d99;
  text-decoration: underline;
}
.leaflet-container a.leaflet-popup-close-button { color: #1a1a1a; }

/* il simbolo degli eventi: nessun riquadro intorno al cerchio */
.mappa-dati-cerchio { background: transparent; border: 0; }
.mappa-dati-cerchio svg { display: block; }

.mappa-dati-avviso {
  max-width: 700px;
  margin: 0 auto 1rem;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #995c00;
  background: #fff8e6;
  color: #1a1a1a;
}

/* la leggenda nelle pagine dei siti: dalle tabelle dei Mac, come elenchi */
.mappa-dati-leggenda dt { font-weight: 700; margin-top: 0.5rem; }
.mappa-dati-leggenda dd { display: inline-block; margin: 0 1.25rem 0.25rem 0; }
.mappa-dati-leggenda img { vertical-align: middle; margin-right: 0.35rem; width: auto; }

/* pagine di /DATI/: la tabella dei Mac sta nel riquadro, «Valori PGx» e «Mappa» compresi, e sugli schermi stretti scorre dentro di se' senza allargare la pagina */
table[style*="line-height: 150%"] { display: block; max-width: 100%; overflow-x: auto; font-size: 0.875rem; }
table[style*="line-height: 150%"] td { padding: 0.25rem 0.4rem; }

/* 1.2, 06/11/2026 (mappe_legenda_2026-11-06): il pulsante dell'elenco che apre il fumetto, e dal fumetto di una stazione ED alla sua scheda. min-height 24 px: WCAG 2.5.8. */
.mappa-dati-apri { background: none; border: 0; padding: 0; min-height: 24px; color: #004d99; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.mappa-dati-apri:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
/* 210 px e 14 px: come il div dei fumetti dei Mac. Senza limite il fumetto si allarga fino a maxWidth, e a 320 px la X resta fuori dalla mappa, larga 256 px (misura del 06/11/2026). */
.leaflet-popup-content p.mappa-dati-schede { margin: .5rem 0 0; max-width: 210px; font-size: 14px; }
.mappa-dati-schede a { display: block; min-height: 24px; }