/* ==========================================================================
   Estilos Premium para Mapa Interactivo (map)
   ========================================================================== */

/* 1. Selector de Estilo Flotante */
.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ismx-map-btn {
    border: none;
    font-size: 0.8rem;
    color: var(--ismx-gray);
    background: transparent;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ismx-map-btn:hover {
    color: var(--ismx-primary);
    background: rgba(1, 87, 155, 0.08);
}

.ismx-map-btn.active {
    background: var(--ismx-primary) !important;
    color: var(--ismx-white) !important;
    box-shadow: 0 2px 6px rgba(1, 87, 155, 0.25);
}

/* 2. Marcador Premium (Círculo con Ancla) */
.ismx-custom-pin {
    background-color: var(--ismx-primary);
    border: 3px solid var(--ismx-white);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.ismx-custom-pin:hover {
    transform: scale(1.1) translateY(-5px);
    background-color: var(--ismx-secondary);
}

.ismx-custom-pin img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* Pone el ancla SVG en color blanco puro */
}

/* 3. Estilos de Leaflet.MarkerCluster (Agrupadores) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(1, 87, 155, 0.6) !important; /* Azul primario transparente */
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: var(--ismx-primary) !important; /* Azul primario sólido */
    color: var(--ismx-white) !important;
    font-family: var(--ismx-font-family);
    font-weight: bold;
    border: 2px solid var(--ismx-white);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* Asegurar que los popups mantengan la estética de Bootstrap */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.leaflet-popup-content {
    margin: 15px 20px !important;
    font-family: var(--ismx-font-family);
}