/* Bubble Menu Styles */

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

.bubble-menu-main {
    position: relative;
    z-index: 10;
}

.bubble-menu-main:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

.bubble-menu-main:active {
    transform: scale(0.95) !important;
}

.bubble-menu-item {
    position: relative;
}

.bubble-menu-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.bubble-menu-item:active {
    transform: scale(0.9) !important;
}

.bubble-menu-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.bubble-menu-container[style*="right"] .bubble-menu-tooltip::before {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}

.bubble-menu-container[style*="left"] .bubble-menu-tooltip::before {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}

/* Animaciones adicionales */
@keyframes bubblePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bubbleShrink {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .bubble-menu-container {
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .bubble-menu-main,
    .bubble-menu-item {
        width: 48px !important;
        height: 48px !important;
    }
}