html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100% !important;
    height: 85vh !important;
    min-height: 700px !important;
    max-height: 900px !important;  /* evita que en monitores muy altos se vea excesivo */
    position: relative !important;
}

  /* === Brujula === */
.compass-needle {
    font-size: 22px;
    color: red;
    text-align: center;
}

/* Contenido colapsable en popups */
.colapsable {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    margin-top: 4px;
    padding-left: 10px;
    color: #333;
}

.colapsable.open {
max-height: 500px; /* altura máxima expandida */
}

.leaflet-popup-content {
font-size: 13px;
line-height: 1.4;
}

.leaflet-popup-content a {
word-break: break-word;
color: #0078A8;
text-decoration: underline;
}

/* Transición suave para polígonos y líneas */
.leaflet-interactive {
    transition: fill 0.25s ease, stroke 0.25s ease, fill-opacity 0.25s ease, stroke-opacity 0.25s ease;
}

/* Para las leyendas mostradas*/
.info.legend {
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
font-family: Arial, Helvetica, sans-serif;
}

.info.legend i {
vertical-align: middle;
border-radius: 2px;
}

/* Contenedor general para limitar el ancho máximo del mapa en pantallas ultra anchas */
.wp-block-shortcode:has(#map),
#map {
  max-width: 1800px !important;
  margin: 0 auto !important;
}

/* Ajuste para pantallas muy anchas (ultrawide / curvos) */
@media (min-width: 1920px) {
  #map {
    height: 80vh !important;
  }

  #panel-filtros {
    max-height: 70vh !important;
  }

  .info.legend {
    max-height: 50vh !important;
  }
}

/* Ajuste para pantallas medianas/tablet */
@media (max-width: 768px) {
  #panel-filtros {
    width: 180px !important;
    font-size: 12px !important;
  }

  .info.legend {
    width: 220px !important;
  }

  .botones-descarga button {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
}

.leaflet-control-layers {
  max-width: min(280px, 90vw) !important;
  font-size: 13px;
}