/* css/context-menu.css */
.context-menu {
    position: fixed !important;
    background-color: var(--background-surface) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 12px 32px rgba(0, 196, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    padding: var(--spacing-sm) !important;
    z-index: 99999 !important;
    min-width: 220px !important;
    animation: contextMenuFadeIn 0.2s ease-out !important;
    backdrop-filter: blur(10px);
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* No usar opacity: 1 !important porque interfiere con la animación */
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-md) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: var(--border-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: var(--text-color-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 4px 0 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.context-menu-item:hover {
    background-color: var(--primary-color-light);
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 196, 255, 0.2);
}

.context-menu-item:active {
    transform: translateX(2px);
    background-color: var(--primary-color);
    color: var(--text-color-on-primary);
}

.context-menu-item i {
    width: 20px;
    height: 20px;
    color: var(--accent-color);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.context-menu-item:hover i {
    color: var(--accent-color);
    transform: scale(1.1);
}

.context-menu-item span {
    flex: 1;
    white-space: nowrap;
    font-weight: 600;
}