body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#toggleButton {
  padding: 8px;
  position: absolute;
  top: 10px;
  left: 8px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toggleButton button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* so that the contents take up the whole button */
}

@media screen and (max-width: 768px) {
  #toggleButton {
    padding: 8px;
    position: fixed;
    bottom: 100px;
    left: 10px; /* Cambiado de 'right' a 'left' */
    width: 30px;
    height: 30px;
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* Popup styling */

.mapboxgl-popup {
  max-width: unset !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mapboxgl-popup-close-button {
  display: none;
}

.mapboxgl-popup-content {
  padding: 0 !important;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.mapboxgl-popup-content-wrapper {
  padding: 1%;
}

.mapboxgl-popup-tip {
  display: none;
}

.mapboxgl-popup-anchor-top .popup > svg {
  top: -12px;
  transform: rotate(180deg);
  transform-origin: center;
  bottom: unset;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-content {
  top: 12px;
}

.mapboxgl-popup-anchor-left .popup > svg {
  top: 50%;
  left: -12px;
  transform: rotate(90deg);
  transform-origin: center;
  bottom: unset;
}

.mapboxgl-popup-anchor-left {
  left: 12px !important;
  top: -10px !important;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-content {
  top: unset;
  right: -12px;
}

.mapboxgl-popup-anchor-right {
  left: 0 !important;
  top: -10px !important;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-content {
  top: unset;
  left: -12px;
  transform: unset;
}

.mapboxgl-popup-anchor-right .popup > svg {
  top: 50%;
  right: -12px;
  transform: rotate(270deg);
  transform-origin: center;
  bottom: unset;
}

.mapboxgl-popup-anchor-top-right {
  top: 3px !important;
  left: -12px !important;
}

.mapboxgl-popup-anchor-top-right .popup > svg {
  bottom: unset;
  top: 0;
  transform: rotate(270deg);
  right: -12px;
}

.mapboxgl-popup-anchor-top-left {
  top: 3px !important;
  left: 12px !important;
}

.mapboxgl-popup-anchor-top-left .popup > svg {
  bottom: unset;
  top: 0;
  transform: rotate(90deg);
  left: -12px;
}

.mapboxgl-popup-anchor-bottom,
.mapboxgl-popup-anchor-top,
.mapboxgl-popup-anchor-left,
.mapboxgl-popup-anchor-right {
  left: unset;
  top: unset;
}

.mapboxgl-popup-anchor-bottom-left {
  top: 20px !important;
  left: 12px !important;
}

.mapboxgl-popup-anchor-bottom-left .popup > svg {
  bottom: unset;
  bottom: 0;
  transform: rotate(90deg);
  left: -12px;
}

.mapboxgl-popup-anchor-bottom-right {
  top: 20px !important;
  left: -12px !important;
}

.mapboxgl-popup-anchor-bottom-right .popup > svg {
  bottom: unset;
  bottom: 0;
  transform: rotate(270deg);
  right: -12px;
}

.img-view {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 5000;
  width: 100%;
  height: 100%;
  transition: 300ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

#img-quit {
  position: absolute;
  top: 32px;
  right: 32px;
  height: 32px;
  width: 32px;
  cursor: pointer;
}

.img-view img {
  width: 75%;
  height: auto;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 32px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .img-view img {
    width: 80%;
  }
}