/* Estilo del mapa */
#map {
  height: 100%;
}

/* Asegura que solo una imagen se muestre por vez */
.swiper-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide {
  width: 100% !important;
  flex-shrink: 0;
  text-align: center;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

/* Barra de navegación superior */
.navbar {
  height: 55px;
 background-image: 
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='5' cy='5' r='1.5' fill='white' fill-opacity='0.1'/%3E%3C/svg%3E"),
  linear-gradient(to right, #3e4e2c, #7eab07);
  background-repeat: repeat;
  background-size: auto, cover;
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Contenedor desplazable */
.scrollable-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 15px;
  white-space: nowrap;
  overflow-x: auto; /* Siempre visible pero opaco al inicio */
  overflow-y: hidden;
  padding-bottom: 3px; /* Reservar espacio para scrollbar */
  box-sizing: content-box;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* Firefox invisible por defecto */
}

/* Al pasar el mouse, mostrar el scrollbar (sin mover layout) */
.scrollable-container:hover {
  scrollbar-color: rgba(100,100,100,0.4) transparent; /* Firefox */
}

/* Webkit: scrollbar inicialmente invisible */
.scrollable-container::-webkit-scrollbar {
  height: 8px;
  background-color: transparent;
}

.scrollable-container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.4);
}

.scrollable-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Contenedor de botones */
.checkbox-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Estilo de cada grupo */
.checkbox-item {
  display: flex;
  align-items: center;
  background-color: rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 6px 10px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.checkbox-item:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Ícono */
.menu-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
 /*filter: brightness(0) invert(1);  Blanco para SVG oscuros */
}

/* Texto */
.checkbox-item span {
  color: white;
  font-size: 13px;
}

/* Checkbox */
.checkbox-item input[type="checkbox"] {
 margin-right: 6px;
 accent-color: black;
}

/* Centrado automático de los checkbox si no hay scroll */
.scrollable-container.center-buttons {
  justify-content: center;
}

/* Por defecto, alineados a la izquierda*/ 
.scrollable-container {
  justify-content: flex-start;
}

.scrollable-container.invisible {
  visibility: hidden;
}

/* Logo del mapa */
.map-logo-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
}

.map-logo img {
  width: 140px;
  height: auto;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.map-logo img:hover {
  opacity: 0.7;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .navbar {
    height: 45px; /* más baja para móviles */
    padding: 4px 8px;
  }
  .scrollable-container {
    overflow-x: auto; /* Mostrar scroll horizontal siempre en móviles */
  }

  .navbar-title {
    font-size: 13px;
    margin-right: 10px;
  }

  .checkbox-buttons {
    gap: 8px;
  }

  .checkbox-item {
    padding: 4px 6px;
  }

  .menu-icon {
    width: 18px;
    height: 18px;
  }

  .checkbox-item span {
    font-size: 12px;
  }
}

.map-logo-container {
  position: absolute;
  bottom: 5px; /* Distancia desde la parte inferior */
  right: 10px; /* Distancia desde la derecha */
  z-index: 1000; /* Asegura que está por encima del mapa */
  display: flex; /* Flexbox para alinear los elementos */
  align-items: center; /* Centra verticalmente el texto con el logo */
  gap: 10px; /* Espacio entre el texto y el logo */
  flex-wrap: nowrap; /* Evita que los elementos salten a una nueva línea */
}

.map-logo img {
  width: 140px; /* Ancho del logo en pantallas grandes */
  height: auto; /* Mantiene proporciones */
  opacity: 0.4; /* Semitransparente */
  transition: opacity 0.3s ease, width 0.3s ease; /* Transiciones suaves */
}

.map-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  /* margin-top: 95px; ❌ Eliminalo */
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.1; /* 🔽 Reduce el interlineado (por defecto es ~1.2 a 1.4) */
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
  .map-logo img {
    width: 100px; /* Reduce el tamaño del logo */
  }

  .map-text {
    font-size: 12px;
    /* margin-top: 95px; ❌ Eliminalo */
    padding: 2px 4px;
  }
}

  .map-logo-container {
    gap: 5px; /* Reduce el espacio entre el texto y el logo */
  }
}

/* Estilos responsivos para pantallas muy pequeñas (como móviles) */
@media (max-width: 480px) {
  .map-logo img {
    width: 80px; /* Logo más pequeño */
  }

  .map-text {
    font-size: 10px;
    /* margin-top: 95px; ❌ Eliminalo */
    padding: 2px 4px;
  }


  .map-logo-container {
    flex-wrap: nowrap; /* Asegura que texto y logo estén en la misma línea */
  }
}

.leaflet-text-path {
    fill: black;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px white;
}

.custom-tooltip {
	z-index: 1000; /* Asegura que la etiqueta esté en frente */
    background-color: rgba(255, 255, 255, 0); /* Fondo transparente */
	text-align: center;
    color: black; /* Color del texto */
    font-weight: bold; /* Opcional: hacer el texto en negrita */
    text-shadow:
        -1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff; /* Borde blanco alrededor del texto */
    padding: 2px; /* Opcional: un poco de espacio alrededor del texto */
    border: none; /* Elimina el marco */
    box-shadow: none; /* Elimina cualquier sombra del contenedor de la etiqueta */
    white-space: nowrap; /* Evita que el texto se envuelva */
	font-size: 11px; /* Tamaño de la fuente */
}

.home-button {
    background-color: white; /* Fondo blanco */
    color: black;            /* Ícono negro */
    font-size: 17px;         /* Tamaño del ícono */
    width: 36px;             /* Ancho del botón */
    height: 32px;            /* Alto del botón */
    text-align: center;      /* Centra el contenido horizontalmente */
    line-height: 30px;       /* Centra el contenido verticalmente */
    border-radius: 5px;      /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra */
    cursor: pointer;         /* Cambia el cursor al pasar por encima */
    user-select: none;       /* Evita la selección del texto */
}

.home-button:hover {
    background-color: #f0f0f0; /* Cambia el fondo al pasar el ratón */
}

/* Selecciona el botón de Pegman */
.leaflet-pegman-v3-small .pegman-icon {
    width: 70px !important; /* Aumenta el ancho */
    height: 36px; /* Aumenta la altura */
    background-size: cover; /* Asegura que la imagen se ajuste correctamente */
}

.leaflet-control-custom {
  background: white;
  padding: 1px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-control-locate a {
    background-color: white; /* Color oscuro del botón */
    color: black; /* Color del ícono */
}

 .leaflet-control-zoom a {
            width: 31px !important; /* Cambiar el ancho */
            height: 27px !important; /* Reducir la altura (predeterminado es 26px) */
            line-height: 30px !important; /* Centrar verticalmente el contenido */
            text-align: center; /* Centrar horizontalmente el contenido */
        }