body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
}

/* ✅ MAPA — Tamaño estable */
#map {
  position: relative; /* ✅ Sí, acá va */
  height: 700px !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 0 8px 8px !important;
}

@media (max-width: 768px) {
  /* Botonera pegada, sin separación */
  .caja-botonera-mapa {
    padding: 8px 6px;
    margin: 0 !important;
    border-width: 2px 2px 0 2px;
    border-radius: 8px 8px 0 0;
    width: 100%;
  }

  /* Fila superior: que Barrios NO baje solo */
  .fila-superior {
    flex-wrap: nowrap; /* Mantener todo en una línea */
    gap: 3px;
  }

  .fila-superior button {
    padding: 6px 8px;
    font-size: 13px;
  }

  /* Fila de filtros */
  .fila-inferior {
    flex-wrap: nowrap;
    gap: 3px;
    margin-top: 6px;
  }

  .etiqueta-filtros {
    width: auto; /* "Filtros" al lado, no arriba */
    margin-right: 4px;
    font-size: 13px;
  }

  .filtror-btn {
    padding: 6px 8px;
    font-size: 13px;
  }

  /* Mapa pegado sin separación */
  #map {
    margin-top: 0 !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    height: 700px !important;
  }
}





/* ✅ Quitar fondo, borde y sombra de TODOS los tooltips de Leaflet */
.leaflet-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ✅ Eliminar el borde interno que a veces queda */
.leaflet-tooltip::before {
  display: none !important;
}

/* ✅ Estilo del texto del nombre del barrio */
.etiqueta-barrio {
  font-size: 11px !important;
  font-weight: bold !important;
  color: #2c3e50 !important;
  background: transparent !important;
  white-space: nowrap !important;
}
.nombre-barrio-mapa {
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: bold;
  font-size: 13px;
  color: #222;
  text-shadow: 0 0 3px white, 0 0 5px white;
}


.leaflet-popup-content {
  width: 300px !important;
  max-width: 300px !important;
  margin: 10px !important;
}

.leaflet-popup-content img {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 2px;
}
.leaflet-popup-content p {
 text-align:center; text-decoration:none; padding:8px 10px;
}

/* Flechita apuntando hacia arriba */
.leaflet-popup-tip-container {
 
  top: -100px !important;
}
/* Botonera del mapa — vive en <body>, no en #map  */
.botonera-cpa {
  z-index: 9999 !important;
}



/* ==============================================
   BOTONERA SIEMPRE ARRIBA — NADA LA TAPA
   ============================================== */
/* ✅ Nada la tapa — z-index altísimo */
.botonera-cpa {
  z-index: 999999 !important;
}

/* ✅ Las tarjetas quedan siempre por debajo */
.leaflet-popup-pane {
  z-index: 700 !important;
}

/* ✅ Espacio arriba para que la tarjeta baje */
.leaflet-popup {
  margin-top: 70px !important; /* ⬅️ Empuja la tarjeta hacia abajo */
.leaflet-popup-content-wrapper { border-radius:10px; }

}


/* Ajuste en celular */
@media (max-width: 768px) {
  .botonera-cpa {
    top: 8px !important;
    right: 8px !important;
  }
}
/* ==============================================
   Achicar títulos y texto SOLO en celular
   ============================================== */
@media (max-width: 768px) {
  h1 {
    font-size: 1.3rem !important;
    margin: 2px 0 !important;
  }
  h2 {
    font-size: 1rem !important;
    margin: 2px 0 !important;
  }
  h3 {
    font-size: 0.85rem !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
  }
  .visible-xs {
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 2px 0 !important;
  }
  .container-fluid {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }
}




/* Estados inactivos */
.caja-botonera-mapa #btn-casas { background: #e3f2fd; color: #0758A1; }
.caja-botonera-mapa #btn-cabanas { background: #c8e6c9; color: #28a745; }
.caja-botonera-mapa #btn-deptos { background: #ffe0b2; color: #e65100; }
.caja-botonera-mapa #btn-todas { background: #e3f2fd; color: #0758A1; }
.caja-botonera-mapa #filt-pileta { background: #c8e6c9; color: #28a745; }
.caja-botonera-mapa #filt-jovenes { background: #f5f5f5; color: #424242; }
.caja-botonera-mapa #filt-mascotas { background: #f5f5f5; color: #424242; }
.caja-botonera-mapa #btn-barrios { background: #e0e0e0; color: #424242; }

/* Estados activos 
.caja-botonera-mapa #btn-casas.activo { background: #0758A1; color: white; }
.caja-botonera-mapa #btn-cabanas.activo { background: #28a745; color: white; }
.caja-botonera-mapa #btn-deptos.activo { background: #e65100; color: white; }
.caja-botonera-mapa #btn-todas.activo { background: #0758A1; color: white; }
.caja-botonera-mapa #filt-pileta.activo { background: #28a745; color: white; }
.caja-botonera-mapa #filt-jovenes.activo { background: #28a745; color: white; }
.caja-botonera-mapa #filt-mascotas.activo { background: #28a745; color: white; }
.caja-botonera-mapa #btn-barrios.activo { background: #b71c1c; color: white; }

.caja-botonera-mapa .separador {
  border-left: 1px solid #b2dfdb;
  height: 20px;
  margin: 0 4px;
}

/* Mapa sin separación de la caja */
#map {
  border-radius: 0 0 8px 8px;
  margin-top: 0 !important;
}
/* Botones de categoría — desactivar bien */
.fila-superior button {
  background-color: #f1f3f4;
  color: #333;
  font-weight: normal;
}

.fila-superior button.activo {
  background-color: #0758A1 !important;
  color: white !important;
  font-weight: bold !important;
}

/* Botones de filtro */
.fila-inferior .filtror-btn {
  background-color: #f1f3f4;
  color: #333;
  font-weight: normal;
}

.fila-inferior {
  display: flex;
  flex-wrap: nowrap; /* ✅ Todo en línea, NUNCA baja */
  gap: 3px;
  align-items: center;
  justify-content: center;
}

/* Si sigue bajando, achicá un poquito los botones */
.filtror-btn {
  padding: 5px 12px; /* Un poquito más chico */
  font-size: 14px;
}
/* ==============================================
   BOTONERA — UNIFICADA Y SIN REPETIR
   ============================================== */

/* Contenedor general */
.caja-botonera-mapa {
  background: rgb(200, 215, 171);
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  border: 2px solid #0758A1;
  border-bottom: none; /* Sin borde abajo → se une al mapa */
  width: 100%; /* ✅ Ancho completo igual al mapa */
  box-sizing: border-box; /* ✅ El borde no ensancha */
  margin: 0; /* ✅ Sin margen arriba → pegadito */
}

/* Fila 1: Categorías */
.fila-superior {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: center;
}

.fila-superior button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  background: white;
  color: #333;
  transition: all 0.2s;
}

/* Estado INACTIVO — colores suaves */
#btn-todas { background: #e3f2fd; color: #0758A1; }
#btn-casas { background: #e3f2fd; color: #0758A1; }
#btn-cabanas { background: #c8e6c9; color: #28a745; }
#btn-deptos { background: #ffe0b2; color: #e65100; }
#btn-barrios { background: #e0e0e0; color: #424242; }

/* Estado ACTIVO — color fuerte y texto blanco */
.fila-superior button.activo {
  font-weight: bold;
  color: white;
}
#btn-todas.activo { background: #0758A1; }
#btn-casas.activo { background: #0758A1; }
#btn-cabanas.activo { background: #28a745; }
#btn-deptos.activo { background: #fd7e14; }
#btn-barrios.activo { background: #795548; }

/* Fila 2: Filtros */
.fila-inferior {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.etiqueta-filtros {
  font-size: 14px;
  color: #444;
  font-weight: bold;
  margin-right: 8px;
}

.filtror-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  background: #f1f1f1;
  color: #333;
  transition: all 0.2s;
}
.filtror-btn.activo {
  background: #28a745;
  color: white;
  font-weight: bold;
}

/* 📱 CELULAR — TODO EN 2 FILAS, NO EN 4 */
@media (max-width: 768px) {
  .caja-botonera-mapa {
    padding: 8px 10px;
  }
  .fila-superior, .fila-inferior {
    flex-wrap: wrap; /* Permitir bajar solo lo necesario */
    gap: 5px;
  }
  .fila-superior button, .filtror-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  .etiqueta-filtros {
    width: 100%; /* "Filtros" solito arriba de los botones */
    text-align: center;
    margin-bottom: 4px;
    margin-right: 0;
  }
}
/* ==============================================
   AJUSTES VISUALES — SIN TOCAR EL FUNCIONAMIENTO
   ============================================== */

/* Botonera unida al mapa, mismo ancho */
.caja-botonera-mapa {
/* === BOTONERA SIN ETIQUETA — MÁS ESPACIO === */
.caja-botonera-mapa {
  background: rgb(200, 215, 171);
  padding: 12px 15px; /* Más alto → botones respiran */
  border-radius: 8px 8px 0 0;
  border: 1px solid #0758A1;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0; /* Pegadito arriba */
}

/* Fila 1: Categorías */
.fila-superior {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px; /* Más espacio entre botones */
  margin-bottom: 12px;
  justify-content: center;
}

.fila-superior button {
  padding: 10px 18px; /* Más ancho y alto */
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  background: white;
  color: #333;
  transition: all 0.2s;
}

/* Colores inactivos */
#btn-todas { background: #e3f2fd; color: #0758A1; }
#btn-casas { background: #e3f2fd; color: #0758A1; }
#btn-cabanas { background: #c8e6c9; color: #28a745; }
#btn-deptos { background: #ffe0b2; color: #e65100; }
#btn-barrios { background: #e0e0e0; color: #424242; }

/* Colores activos */
.fila-superior button.activo {
  font-weight: bold;
  color: white;
}
#btn-todas.activo { background: #0758A1; }
#btn-casas.activo { background: #0758A1; }
#btn-cabanas.activo { background: #28a745; }
#btn-deptos.activo { background: #fd7e14; }
#btn-barrios.activo { background: #795548; }

/* Fila 2: Filtros — SIN etiqueta */
.fila-inferior {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px; /* Mismo espacio que arriba */
  justify-content: center;
}

.filtror-btn {
  padding: 10px 18px; /* Igual tamaño que los de arriba */
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  background: #f1f1f1;
  color: #333;
  transition: all 0.2s;
}
.filtror-btn.activo {
  background: #28a745;
  color: white;
  font-weight: bold;
}

/* Mapa pegado sin separación */
#map {
  margin: 0 !important;
  border: 2px solid #0758A1;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  height: 700px !important;
}

/* 📱 Celular — entra todo sin apretar */
@media (max-width: 768px) {
  .caja-botonera-mapa {
    padding: 10px 8px;
  }
  .fila-superior, .fila-inferior {
    gap: 6px;
  }
  .fila-superior button, .filtror-btn {
    padding: 8px 10px;
    font-size: 14px;
  }
  .fila-superior {
    margin-bottom: 10px;
  }
  #map {
    height: 480px !important;
  }
}

/* Pantallas muy chicas */
@media (max-width: 360px) {
  .fila-superior, .fila-inferior {
    gap: 4px;
  }
  .fila-superior button, .filtror-btn {
    padding: 7px 8px;
    font-size: 13px;
  }
}

}

/* ✅ Área del mapa: maneja solo su propio desplazamiento */
#map {
  touch-action: pan-y !important;
  
}

/* ✅ El resto de la página: se desplaza normalmente */
body {
  touch-action: auto;
}

/* Índice de barrios: panel de texto, alineado a la izquierda */
#indice-zonas {
  list-style: none;          /* saca las viñetas */
  margin: 0 auto;
  padding: 0;
  max-width: 620px;
  text-align: left;          /* corta el centrado heredado */
}
#indice-zonas li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px 0;
}
#indice-zonas .zona-link {
  min-width: 170px;          /* los nombres arrancan alineados */
  padding: 4px 10px;
  background: none;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  font: inherit;
  color: #0758A1;
  text-align: left;
  cursor: pointer;
}
#indice-zonas .zona-link:hover {
  background: #eef4fb;
  border-color: #0758A1;
}