/* Fondo del mapa */
#laguna-mapa {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  outline-style: none;
}

/* Popup general */
.leaflet-popup-content {
  max-width: 280px;     /* en escritorio */
  font-size: 14px;
  color: #000;
  line-height: 1.4;
}

/* Caja del popup */
.popup-box {
  background: rgba(255, 255, 255, 0.75); /* 75% transparencia */
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

/* Botones del popup */
.popup-box button {
  display: inline-block;
  margin: 4px 2px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  background: #e53935;
  color: #fff;
  transition: background 0.2s ease-in-out;
}

.popup-box button:hover {
  background: #c62828;
}

/* Ajustes para móviles */
@media (max-width: 600px) {
  .leaflet-popup-content {
    max-width: 90vw;   /* ocupa como máximo el 90% de la pantalla */
    font-size: 13px;
  }

  .popup-box {
    padding: 8px;
  }

  .popup-box button {
    font-size: 13px;
    padding: 5px 8px;
    width: 100%;  /* botones apilados */
  }
}