/* Default (fallback se manca classe theme-*) */
#map-comune {
  --comune-stroke:         #666;
  --comune-fill:           rgba(80,80,80,.15);
  --comune-hover:          rgba(80,80,80,.35);
  --comune-stroke-current: var(--primaryColor600, #1a5362);
  --comune-fill-current:   var(--primaryColor400, #25778c);
}

/* Tema OSM */
#map-comune.theme-osm {
  --comune-stroke:         #4b4f55;
  --comune-fill:           rgba(39, 125, 161, .12);
  --comune-hover:          rgba(39, 125, 161, .28);
  /*--comune-stroke-current: #1a5362;*/
  --comune-stroke-current: #CC0000;
  --comune-fill-current:   transparent;
}

/* Tema Satellite (Esri) → bordi chiari che “staccano” sul satellite */
#map-comune.theme-esri {
  --comune-stroke:         #ffffff;
  --comune-fill:           rgba(255,255,255,.16);
  --comune-hover:          rgba(255,255,255,.38);
  --comune-stroke-current: #CC0000;
  --comune-fill-current:   rgba(255,255,255,.26);
}

/* Tema OpenTopoMap → colori più “terra” */
#map-comune.theme-opentopo {
  --comune-stroke:         #3b5b3b;
  --comune-fill:           rgba(96,128,96,1);
  --comune-hover:          rgba(96,128,96,.70);
  --comune-stroke-current: #CC0000;
  --comune-fill-current:   rgba(35,77,35,.28);
}

/* Tema Carto Dark → bordi e fill chiari su sfondo scuro */
#map-comune.theme-carto-dark {
  --comune-stroke:         #e6e6e6;
  --comune-fill:           rgba(230,230,230,.12);
  --comune-hover:          rgba(230,230,230,.30);
  --comune-stroke-current: #CC0000;
  --comune-fill-current:   rgba(255,255,255,.22);
}



/* Leaflet container */

#map-wrap { position: relative; }
#map-comune{ width:100%; height:400px;}

#hover-label{
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  transform: translate(8px, -8px); /* offset rispetto al punto */
}



.leaflet-container{ font-size:12px}


/* Tevere in alto, non interattivo */
.leaflet-pane.leaflet-overlay-pane .tevere-path{ stroke:#0AF; stroke-width:2; fill:none; opacity:.80; }

/* Etichetta esterna (alla destra della mappa, allineata in verticale) */


/* Sidebar lista 
.side-panel h3{ margin:0 0 8px 0; font-size:16px; }
.comuni-list{
  margin:0; padding:0; list-style:none;
  max-height:70vh; overflow:auto; border:1px solid #e6eaee; border-radius:8px;
}
.comuni-list li{
  padding:8px 10px; border-bottom:1px solid #f0f2f5; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.comuni-list li:last-child{ border-bottom:none; }
.comuni-list li:hover, .comuni-list li.is-hover{ background:#fff7d8; }
.comuni-list li:focus{ outline:2px solid #333; outline-offset:-2px; }
.comuni-list .dot{ width:8px; height:8px; border-radius:50%; background:#8fa1b3; flex:0 0 auto; }
.comuni-list li.is-hover .dot{ background:#e0a100; }
*/
/* Responsive */
@media (max-width: 900px){
  .map-wrap{ grid-template-columns: 1fr; }
  #map-comune{ height:420px; }
}


.page-header {
  height:80px;
}




.lineatevere {
    display:flex;
}


.spondefiume {
    flex:1;
    position: relative;
}

.mare  {
    width: 3%;
    background-color: #0AF;
}

.fiume {
    background-color: #0AF;
    height: 5px;
}

.sponda {
    position:relative;
    height: 25px;
    background-color: #f1f1CC
}

.sponda > div.c {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #B00;
}


#hover-label {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  transform: translate(8px, -8px);
}