/* Estilos para el mapa de yacimientos */

.yacimiento-popup-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.yacimiento-popup h6 {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #007bff;
}

.yacimiento-popup table {
    margin-bottom: 0;
}

.yacimiento-popup table td {
    padding: 0.25rem 0.5rem;
}

/* Estilos del card sticky */
.sticky-top {
    position: sticky !important;
    z-index: 1020;
}

/* Animación de carga en panel de detalles - MÁS RESTRICTIVO */
.yacimiento-detail-content {
    animation: yacimiento-fadeIn 0.3s ease-in;
}

/* Animación con nombre único para evitar conflictos */
@keyframes yacimiento-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de marcadores */
.leaflet-marker-icon {
    transition: transform 0.2s ease;
}

.leaflet-marker-icon:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.8));
    cursor: pointer;
}

/* Animación de marcador seleccionado */
.leaflet-marker-icon.marker-selected {
    animation: yacimiento-pulse 1.5s infinite;
}

@keyframes yacimiento-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(220, 53, 69, 0.8));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(220, 53, 69, 1));
    }
}

/* Estilos de los badges en el panel de detalles */
.yacimiento-detail-content .badge {
    font-size: 0.85rem;
    padding: 0.4em 0.65em;
}

/* Iconos en dl */
.yacimiento-detail-content dt i {
    width: 20px;
    text-align: center;
}

/* Loading spinner */
#yacimientosMap.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Popup personalizado */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

.leaflet-popup-content {
    margin: 13px 19px;
    min-width: 280px;
}

/* Responsividad */
@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
    }

    #yacimientosMap {
        height: 400px !important;
    }

    .yacimiento-detail-content .badge {
        font-size: 0.75rem;
    }
}

/* Mejora visual de la alerta de observaciones */
.yacimiento-detail-content .alert-light {
    background-color: #f8f9fa;
    border-left: 3px solid #0dcaf0;
}