/* Variables del mapa */
:root {
    --map-width: 100%;
    --map-height: 100%;
    --map-z-index: 1;
    --marker-transition-duration: 0.2s;
}

/* Contenedor del mapa */
#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Estilos base para marcadores personalizados */
.leaflet-marker-icon.custom-marker {
    background: none !important;
    border: none !important;
}

/* Estilos para iconos de marcadores usando HTML/CSS */
.custom-marker {
    transition: transform var(--marker-transition-duration) ease;
}

.custom-marker:hover {
    transform: scale(1.1);
}

/* Efectos hover para marcadores SVG */
.leaflet-marker-icon:hover {
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transform: scale(1.05);
    transition: filter 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

/* Efecto hover específico para diferentes tipos de marcadores */
.leaflet-marker-icon[src*="study-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(10deg) drop-shadow(0 2px 6px rgba(52, 152, 219, 0.4));
}

.leaflet-marker-icon[src*="sondeo-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(-10deg) drop-shadow(0 2px 6px rgba(231, 76, 60, 0.4));
}

.leaflet-marker-icon[src*="calicata-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(15deg) drop-shadow(0 2px 6px rgba(46, 204, 113, 0.4));
}

.leaflet-marker-icon[src*="penetrometro-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(-15deg) drop-shadow(0 2px 6px rgba(155, 89, 182, 0.4));
}

.leaflet-marker-icon[src*="estacion-geomecanica-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(20deg) drop-shadow(0 2px 6px rgba(241, 196, 15, 0.4));
}

.leaflet-marker-icon[src*="perfil-sismico-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(-20deg) drop-shadow(0 2px 6px rgba(230, 126, 34, 0.4));
}

.leaflet-marker-icon[src*="sondeo-electrico-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(25deg) drop-shadow(0 2px 6px rgba(26, 188, 156, 0.4));
}

.leaflet-marker-icon[src*="column-otro-marker"]:hover {
    filter: brightness(1.3) saturate(1.4) hue-rotate(5deg) drop-shadow(0 2px 6px rgba(149, 165, 166, 0.4));
}

/* Transición suave para cambios de tamaño en zoom */
.leaflet-marker-icon {
    transition: width var(--marker-transition-duration) ease, 
                height var(--marker-transition-duration) ease,
                transform var(--marker-transition-duration) ease;
}

/* Asegurar que los divs internos mantengan sus propiedades */
.custom-marker > div {
    box-sizing: border-box;
}

/* Estilos para popups personalizados */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.map-popup {
    font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    min-width: 250px;
}

.map-popup h4 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e1e8ed;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.study-popup h4 {
    border-bottom-color: #3498db;
    color: #2980b9;
}

.column-popup h4 {
    border-bottom-color: #e74c3c;
    color: #c0392b;
}

.popup-content {
    line-height: 1.5;
}

.popup-content p {
    margin: 6px 0;
    font-size: 14px;
    color: #34495e;
}

.popup-content strong {
    color: #2c3e50;
    font-weight: 600;
}

/* Ocultar el botón de cerrar del popup por defecto de Leaflet */
.leaflet-popup-close-button {
    color: #95a5a6 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 8px !important;
}

.leaflet-popup-close-button:hover {
    color: #7f8c8d !important;
}

/* Animación de aparición para los marcadores */
@keyframes markerAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-marker {
    animation: markerAppear 0.3s ease-out;
}

/* Animación suave para el redimensionado durante zoom */
@keyframes markerZoomResize {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Aplicar animación cuando se actualiza por zoom */
.marker-zoom-update {
    animation: markerZoomResize 0.15s ease-out;
}



/* Asegurar que los marcadores de búsqueda puedan hacer fade-out */
.leaflet-marker-icon {
    transition: opacity 1s ease-out !important;
}